Color palette generator
Press space to generate, lock the colors you love, and keep going — or pull a palette straight out of an image. Contrast and color-blindness checks built in. Free, no signup, no ads.
Selected color formats
Tints, shades & tones of #264653
Tints (+ white)
Shades (+ black)
Tones (+ gray)
WCAG contrast
Color blindness simulation
Export the palette as CSS, Tailwind, SVG, JSON, PNG, or PDF — generated in your browser.
Put this palette to work
Design slides, social posts, and visual content with your colors — on a real canvas you control.
Try Moda free →How to build a palette that works
Start by generating until one color catches your eye, then lock it and keep generating — the unlocked swatches keep reorganizing around what you have kept. This lock-and-iterate loop converges on a palette much faster than trying to imagine five colors at once. When the set feels close, fine-tune individual swatches with the tints, shades, and tones strips: swapping a swatch for its own tint or tone often fixes a palette that feels "almost right" without changing its character.
Rule-based generation, not random colors
Truly random colors almost never form a usable palette. This generator instead samples the classic color harmonies — complementary, split-complementary, analogous, monochromatic, triadic, tetradic, and square — and distributes lightness in a ramp across the swatches. Harmony gives the palette a reason to hang together; the lightness ramp gives it built-in hierarchy, so there is always a color dark enough for text and light enough for backgrounds. To explore harmonies deliberately instead of by shuffle, use the color wheel tool.
From palette to product
A palette only matters once it is applied. Export CSS variables to drop the colors straight into a stylesheet, the Tailwind snippet to extend a design system, or JSON to feed design tokens. The PNG and PDF exports are for sharing and print reference, and SVG gives you editable vector swatches. Every export is generated in your browser — nothing is uploaded, and no account is needed.
Frequently asked questions
How does the palette generator work?
Each generation picks a color harmony from classic color theory — complementary, analogous, triadic, and others — then builds a palette along it with a structured spread of lightness, so the result has both cohesion and hierarchy. Press the space bar or the Generate button to shuffle, and lock any swatch to keep it through the next generations.
Can I create a palette from an image?
Yes. Click "From image" and choose a photo — the dominant colors are extracted with a median-cut algorithm running entirely in your browser. The image is never uploaded anywhere.
How do I share a palette?
The palette is encoded in the page URL as you work. Copy the address bar and anyone who opens the link sees exactly the same colors.
What export formats are supported?
CSS custom properties, a Tailwind config snippet, SVG swatches, JSON with every color format (HEX, RGB, HSL, HSB, CMYK, OKLCH), PNG, and PDF. All files are generated locally in your browser.
How many colors should a palette have?
Most working palettes use three to six colors: a dominant color, one or two supporting colors, a neutral, and an accent. This generator supports two to eight swatches — start with five and remove what you do not need. The 60-30-10 rule is a good weighting guide: 60% dominant, 30% secondary, 10% accent.
How do I know if my palette is accessible?
Check two things, both built into this page: contrast — each swatch is rated against black and white text using WCAG 2 ratios (4.5:1 minimum for normal text) — and color-blindness safety, shown by simulating the palette under protanopia, deuteranopia, tritanopia, and achromatopsia. If two colors that carry different meanings look identical in a simulation, separate them by lightness, not just hue.