Palette generator
How palette harmony works
A harmony rule rotates the hue wheel by a fixed angle: analogous colors sit next to each other, complementary colors face each other, and triadic or tetradic palettes spread evenly around the wheel.
Lock the colors you want to keep, then regenerate the rest. The locked swatches stay in place while the unlocked ones follow the new rule.
Building an accessible UI palette
Start with one brand color, derive a neutral ramp from the same hue, and reserve saturated colors for actions and states.
Check each text/background pair with the contrast checker before shipping, and keep a darker and lighter variant for hover and pressed states.
Frequently asked questions
What does the harmony setting change?
It changes how the hue wheel is rotated when generating colors. Auto uses a balanced spread; the other modes follow classic color theory.
Can I keep some colors unchanged?
Yes. Use the lock button on a swatch. Locked colors survive every regeneration and reorder.
How do I export the palette?
Copy the CSS variables, download a PNG strip, or save the palette in your browser with the bookmark button.
How many colors can a palette hold?
You can add up to eight colors, insert a new swatch between any two colors, and drag swatches to reorder them.