How to use
- Pick or type your base colour.
- Choose a palette type.
- Click a colour to copy its HEX code.
- Copy the CSS variables from the result box to use the palette in your website.
How it works
Colours are chosen by rotating the hue around the colour wheel: complementary is 180° away, triadic 120°, analogous ±30°. Monochromatic and tint/shade palettes keep the hue and change lightness and saturation.
Frequently asked questions
Which palette type should I use?
Analogous and monochromatic palettes look calm and safe. Complementary and triadic palettes have more contrast — good for buttons and highlights, but use the extra colours sparingly.
How many colours should a website use?
Usually one main colour, one accent colour and a few neutrals (greys) for text and backgrounds is enough.
Can I check if text is readable on these colours?
Yes, use our Contrast Checker with any two colours from the palette.