Color Palette Generator
Turn one colour into a balanced palette and a full tint and shade scale.
How to use the Color Palette Generator
- Pick a base colour with the picker or type its code.
- Choose a harmony, or press Shuffle (or the space bar) for a fresh base colour.
- Lock colours you like so they stay put while you explore.
- Click any colour to copy it, or export the palette and scale as CSS or JSON.
About this tool
Colour harmonies are combinations based on where hues sit on the colour wheel: neighbours for a calm look, opposites for punch, evenly spaced hues for variety. This generator builds them in OKLCH, a colour space designed around human vision, so a yellow and a blue at the same lightness really look equally light. Palettes made in older colour models often have one colour that glares or sinks; working perceptually avoids that.
Under the palette is an 11-step scale of the base colour, from a near-white tint to a deep shade, numbered 50 to 950 like the scales in popular design systems. Saturation is highest in the middle and eases off towards the ends, so the light steps make soft backgrounds and the dark steps make readable text.
Every swatch shows whether white or black text reads better on it and the contrast ratio, with a note when it only passes for large text. Use that to pick button and badge colours that stay accessible, then export the whole set as CSS custom properties and paste it into your stylesheet.
Frequently asked questions
Which harmony should I choose?
For interfaces, analogous or monochrome palettes are easiest to use well, with one complementary accent for buttons and highlights. Triadic and tetradic schemes are lively and work best when one colour clearly dominates.
Why do the colours differ from a classic colour wheel?
Classic wheels rotate the hue in HSL, where equal steps do not look equal. This tool rotates in OKLCH and keeps lightness steady, and if a colour falls outside what screens can show it is pulled back in gently rather than clipped.
What do the 50 to 950 numbers mean?
They name the steps of the tint scale from lightest (50) to darkest (950), with 500 near the middle. Design systems use the same idea so that, for example, text on a 50 background can use the 800 step.
What does the contrast badge mean?
It shows the contrast ratio of the better text colour on that swatch. 4.5:1 or more passes the common accessibility guideline for normal text; between 3:1 and 4.5:1 is suitable only for large or bold text.
Is my palette stored anywhere?
Only your last base colour and harmony are kept, in this browser, so the page opens where you left it. Nothing is sent to a server.