Color Palette Generator
Press Space for a new palette, lock the colors you like and keep going — or derive a classic scheme from your brand color. With contrast check and export.
- Space = new palette
- Lock colors
- Contrast grid
- Export
The perceptual wheel keeps all colors equally bright to the eye.
Press Space for a new palette. Lock the colors you want to keep; click a code to copy it.
Contrast between the colors
Each cell shows a row color as text on a column color. AA needs 4.5 : 1 for normal text, AAA 7 : 1.
Color-blind preview
Export
How to generate a color palette
Explore fast, then refine.
- 1
Generate
Press Space or the Generate button for a fresh palette — or choose a scheme and a base color.
- 2
Lock and refine
Lock the colors that work, regenerate the others, change any color with the picker, add or remove columns.
- 3
Check and export
Look at the contrast grid and the color-blind preview, then export as CSS variables, Tailwind config or an image.
From first idea to usable tokens
Generated in OKLCH for balanced lightness.
Good random palettes
Not noise: colors are placed on a harmony with a deliberate spread from light to dark, so most results are usable as they are.
Classic color schemes
Analogous, complementary, split-complementary, triadic, tetradic, square, monochromatic and tints-and-shades from any base color.
Lock what you like
Locked colors stay while everything else changes. New colors are built around them.
Contrast grid
Every color as text on every other, with its WCAG ratio and AA / AAA marks — find readable pairs at a glance.
Color-blind preview
See the palette as people with protanopia, deuteranopia, tritanopia or no color vision do.
Undo, redo, share
Step back through the last 60 palettes and copy a link that reopens the exact colors.
Private by design
Everything runs in your browser. What you type or open is not sent to a server.
Free, no sign-up
No account, no limits, no watermark — on a phone, tablet or computer.
How color harmonies work
Color harmonies are simple geometric rules on the color wheel. Analogous colors sit next to each other and feel calm; complementary colors lie opposite and give maximum tension; triadic and tetradic schemes spread three or four hues evenly for lively, balanced palettes. Monochromatic schemes vary only lightness and saturation of one hue and are the safest choice for interfaces.
Hue alone does not make a palette. What separates a professional scheme from a random one is the distribution of lightness: you need at least one very light and one very dark color so that text and backgrounds are possible, and accents with enough saturation to stand out. That is why this generator builds palettes in OKLCH, where lightness matches perception, and lets you choose the perceptual wheel on which rotated hues keep the same brightness.
A practical workflow: lock your brand color, generate until the companions feel right, then check the contrast grid. Pick the pair with the highest ratio for body text, keep the most saturated color for calls to action, and use the rest sparingly. Finally look at the color-blind preview — if two colors that carry different meanings become indistinguishable there, change one of them in lightness, not just in hue.
Color schemes
| Scheme | Hues on the wheel | Character |
|---|---|---|
| Monochromatic | One hue, different lightness | Calm, elegant, very safe |
| Analogous | Neighbors, about 30° apart | Harmonious, natural |
| Complementary | Opposites, 180° apart | High contrast, energetic |
| Split complementary | One hue plus the two beside its opposite | Contrast with less tension |
| Triadic | Three hues, 120° apart | Vivid and balanced |
| Tetradic | Two complementary pairs | Rich; needs one dominant color |
Tips
- Start from a tested combination in the Palette Collection.
- Get the starting colors from a photo with the Palette Extractor.
- Verify a text and background pair in detail with the Contrast Checker.
- Need a 50–950 scale of one color? The Color Converter creates it.
Frequently asked questions
Can’t find your answer? Contact us — we reply quickly.
How do I generate a new palette?
Press the space bar or the Generate button. Locked colors are kept; all others are replaced.
How do I build a palette around my brand color?
Choose a scheme such as “Analogous” or “Triadic” and enter your color as the base color. Or set one column to your color with the picker, lock it and generate the rest.
What does locking a color do?
A locked color survives regeneration. New colors are created to fit the locked ones, so you can settle a palette one color at a time.
What do the numbers in the contrast grid mean?
Each cell is the WCAG contrast ratio of the row color as text on the column color. 4.5 or more passes AA for normal text, 7 or more passes AAA.
Can I export the palette for Tailwind or CSS?
Yes. The export box produces CSS custom properties, SCSS variables, a Tailwind CSS config, JSON, CSV, a GIMP palette, SVG or a PNG image.
Is my data sent to a server?
No. The tool runs entirely in your browser. Your input is not uploaded, logged or stored on our servers.
More free developer tools
Encode, format, test, convert and generate — small tools that run in your browser and keep your data on your device.