Color Palette Generator
One colour in, a whole palette out.
- Runs in your browser
- Free, no signup
Palettes are generated from this colour.
Click a swatch to make it the new base colour, then use Copy all HEX values for the whole palette as a list.
Your colours are converted in this browser. Nothing is uploaded and nothing is saved.
Start from one colour and get the palettes that are defined by its position on the colour wheel: its complement, its neighbours, the triangle and the split pair, plus a set of lightness steps and the tints and shades that come from mixing it with white or black.
Each family is a relationship rather than a set of swatches picked by eye, which is what makes it hold together when the palette grows. Copy any single value, copy the whole list, or download the lot as CSS custom properties.
How to use this tool
- Enter a base colour, pick one from the swatches, or press Random base colour.
- Look through the seven families below — each one is labelled with what it is and how it was derived.
- Click a swatch to make it the new base colour and explore from there.
- Copy all the HEX values, or download the palette as CSS variables.
What each family is for
The families are the standard relationships on the colour wheel. Which one to use depends on how much contrast the design can carry.
- Complementary — the opposite hue, 180° away. The strongest contrast, best used sparingly.
- Analogous — hues 30° either side. Quiet and coherent, which makes it useful for backgrounds.
- Triadic — three hues 120° apart. Lively, and hard to balance without a dominant one.
- Split complementary — the complement split 150° and 210°. Contrast with less tension than a straight complement.
- Monochromatic — one hue, five lightness steps. The safest base for an interface.
- Tints and shades — steps towards white and towards black.
Tints and shades keep the hue
A tint is the colour mixed towards white and a shade is the colour mixed towards black, and both keep the hue intact. That is different from raising or lowering lightness in HSL, which is what the monochromatic family does: mixing white in also reduces saturation slightly, which is why a tint of a strong colour reads as softer rather than merely lighter.
Taking the palette with you
The CSS download is a block of custom properties on :root, named after the family each value came from, so the palette can be pasted into a stylesheet and referenced by name. The copied list is the plain HEX values, one per line, for anywhere a stylesheet is not the destination.
Frequently asked questions
Which palette should I use?
Monochromatic and analogous palettes are the easiest to live with across a whole interface; complementary and triadic are best for a single accent or a call to action. Starting from a monochromatic base and adding one complementary accent is a common and reliable approach.
What is a complementary colour?
The hue 180° opposite on the colour wheel. Complementary pairs have the greatest contrast, which is why they are used for emphasis — and why using both at full strength across a large area usually looks harsh.
Can I export the palette?
Yes, as CSS custom properties, or as a plain list of HEX values. Clicking any swatch makes it the new base colour if you want to keep exploring.
Do tints and shades change the hue?
No. Mixing with white or black shifts lightness and reduces saturation, but the hue stays the same.