How does this palette generator work?
Pick a base colour on the wheel – or type a hex code – then choose a harmony rule. The tool works out the other colours mathematically, using each hue's position on the colour wheel relative to your base colour.
Need more colours than the harmony gives you by default? Click the dashed tile at the end of the palette to add another tint or shade, or remove any swatch you don't need with its × button.
What do the different harmonies mean?
- Monochromatic uses a single hue at different lightness levels, from dark to light. It's a safe way to build a cohesive palette without any colour clashing.
- Analogous picks hues that sit next to each other on the wheel. These tend to feel harmonious because the colours are naturally similar.
- Complementary pairs a hue with its opposite on the wheel, giving high contrast that works well for calls to action.
- Split complementary pairs a hue with the two hues either side of its opposite – almost as much contrast as complementary, with a little more variety.
- Triadic and square harmonies space three or four hues evenly around the wheel for a bold, balanced look.
- Tetradic uses two complementary pairs, which gives a rich palette but works best when one colour is left to dominate.
Can I use these colours in CSS?
Yes – click any swatch to copy its hex code to your clipboard, ready to paste straight into your stylesheet. If you need the RGB, CMYK, HSV or HSL equivalent of a colour, the colour converter will convert it for you.