What each harmony is actually for
- Complementary — opposite sides of the colour wheel. Maximum contrast, which is why it works for a call-to-action button and fails for large areas placed side by side.
- Analogous — neighbours on the wheel. Calm and cohesive, the safe choice for backgrounds and long-form reading.
- Triadic — three points evenly spaced. Lively while staying balanced, but one colour should dominate and the other two accent.
- Monochrome — one hue, varying lightness. Impossible to get wrong, and the fastest route to a coherent interface.
A harmony is not the same as legible
The wheel says nothing about contrast, and this is where palettes go wrong in practice. Two colours can be textbook complementary and still be unreadable as text on background — a mid-blue on a mid-orange has plenty of hue contrast and almost no luminance contrast.
Before you use a pair for text, run it through a contrast checker: WCAG asks for 4.5:1 on body text. A beautiful palette that nobody can read is a failed palette.
Frequently asked questions
Which format are the colours given in?
Hexadecimal, the format CSS and design tools expect. Click any swatch to copy it.
How many colours does a palette have?
It depends on the harmony — from three for a triad to five or more for a monochrome scale.
Can I check the contrast of two of them?
Yes, use the contrast checker: harmony and legibility are different questions.