Generate five-colour palettes for websites, brands and designs. Lock the colours you like, regenerate the rest, and copy the hex codes or CSS.
Loading the tool…
Colour harmonies explained
| Harmony | What it is | Feels |
|---|---|---|
| Analogous | Neighbouring colours on the colour wheel | Calm, natural |
| Complementary | Colours opposite each other | Bold, high contrast |
| Triadic | Three colours evenly spaced around the wheel | Lively, balanced |
| Monochrome | Shades of a single colour | Clean, minimal |
Using a palette in a design
A common approach is the 60-30-10 rule: about 60% a neutral or light background colour, 30% a main brand colour, and 10% an accent for buttons and highlights.
- Use the darkest colour for text, and check it has enough contrast against the background (aim for a contrast ratio of at least 4.5:1 for body text).
- Keep your brightest colour for calls to action.
- Press the space bar to generate a new palette quickly on a computer.
Frequently asked questions
How do I keep a colour I like?
Tap the padlock under it. Locked colours stay when you generate a new palette.
How do I copy a hex code?
Tap the colour swatch to copy its code, or copy all five as CSS variables.
What's a good number of colours for a website?
Usually 3 to 5: a background, a text colour, a main colour and one or two accents.
Are the palettes free to use?
Yes, for any personal or commercial project.
Last updated: