Color Palette Generator
Hit Generate (or the spacebar), lock what you love, and keep rolling until all five colors sit right — then export the palette as CSS, SCSS, Tailwind, JSON or PNG, free and unlimited. Runs 100% in your browser.
Generate, lock, repeat — why this workflow wins
Nobody designs a five-color palette in one stroke. What actually happens is recognition: you see a color that works, you keep it, and you re-roll the rest around it. That is exactly what the lock buttons do. A typical session takes under a minute — lock a base you like on the second or third roll, then let the generator negotiate the remaining slots against it, locking one more each round until the set clicks.
Constrained randomness, not noise
Uniformly random RGB colors are a famous disappointment: most of the RGB cube is dark, desaturated sludge, and unrelated hues rarely cohere. This generator works differently. Each round picks one base hue, then derives candidates through classic harmony relations — same hue, neighbors at ±25°, the complement and its splits — with controlled jitter. Lightness is deliberately spread from dark to light across the five slots (in OKLCH, where “lightness” matches your eyes), because a usable palette needs a dark anchor, a light surface and things between. The result reads like a scheme, not a lottery.
What the five slots are for
| Slot | Typical role | Typical share |
|---|---|---|
| Darkest | Text, dark anchor | 10–30% |
| Dark-mid | Primary brand / dominant | ~30% |
| Mid | Secondary, hovers, illustration | ~20% |
| Vivid | Accent — buttons, highlights | ~10% |
| Lightest | Background, surfaces | 30–60% |
The 60-30-10 rule is a good default: dominant color on most of the surface, a secondary on about a third, the accent kept scarce so it stays special.
Free export, on purpose
The big palette sites gate exports behind subscriptions. Here every format is free and unlimited: CSS custom properties for plain stylesheets, SCSS variables, a Tailwind theme.extend.colors fragment, JSON for tooling, and a PNG swatch sheet for decks and mood boards. “Save all” also drops the palette into My colors, so you can immediately test pairs in the contrast checker or expand a favorite into a full ramp with the shades generator. Everything runs 100% in your browser — nothing is uploaded, no account exists to upsell.
Frequently asked questions
How does the generate-and-lock workflow work?
Press Generate (or the spacebar) for a fresh palette. When a color you like appears, lock it — locked colors survive every following generation while the rest keep exploring. Repeat until all five are locked.
Are the palettes really random?
The randomness is real (your browser’s crypto-grade generator), but it is constrained: each round picks a base hue and derives the other colors through harmony-style hue relations, spread across a lightness range in the perceptual OKLCH space. Pure uniform randomness mostly produces mud.
Is exporting free? Are there limits?
Completely free and unlimited — copy CSS custom properties, SCSS variables or a Tailwind config fragment, or download JSON and a PNG swatch sheet. No account, no watermark, no pro tier.
How many colors should a real project palette have?
Five is a sweet spot: a dark and a light neutral, one dominant color, one supporting color, one accent. If you need tints and shades of each, feed a color into the shades generator for a full 50–900 ramp.
Does this tool upload anything?
No — generation, locking and every export run 100% in your browser. It even works offline once the page is loaded.