What makes colours go together?
Colour harmony comes from the relationship between hues on the colour wheel and from balancing how bright and saturated each colour is. Designers rely on a few proven patterns:
- Complementary: opposite hues (blue and orange). High energy; use one as the main colour and the other as an accent.
- Analogous: neighbours on the wheel (green, teal, blue). Calm and natural.
- Triadic: three hues evenly spaced (red, yellow, blue). Lively but balanced if one dominates.
- Split-complementary: one hue plus the two either side of its opposite. Strong contrast, less tension than complementary.
- Monochromatic: one hue in different lightness. Always cohesive.
- Neutrals (white, black, grey, beige, navy) go with almost anything.
A common rule of thumb is 60-30-10: 60% main colour, 30% secondary, 10% accent.
Contrast for readable text (WCAG)
| Level | Normal text | Large text (24 px, or 18.7 px bold) |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
Colours can look great together and still be unreadable as text on each other. The matrix shows every pair so you can choose which colour to use for text and which for backgrounds.
Colour blindness
About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, most often red-green (protanopia, deuteranopia). The simulation shows whether your colours stay distinguishable. If two colours merge, add a difference in lightness, or use labels and patterns rather than colour alone.
Clashing colours
Two very saturated colours of similar brightness that are neither close nor opposite (for example bright red and bright purple) can seem to vibrate against each other. Soften one, darken it, or separate them with a neutral.
Frequently asked questions
How do I know if two colours go together?
Check their relationship on the colour wheel (complementary, analogous, triadic) and their contrast. This checker does both and gives a rating with tips.
What is a good contrast ratio for text?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA. Aim for 7:1 for the best readability.
What colours go with everything?
Neutrals: white, black, grey, navy and beige. They pair with almost any colour and calm down bright ones.
Why do some colour combinations look bad?
Highly saturated colours of similar lightness that aren’t related on the colour wheel compete for attention and can appear to vibrate.
Can I check colours for colour-blind users?
Yes. The simulation shows your palette as seen with protanopia, deuteranopia and tritanopia, so you can spot colours that become hard to tell apart.
Last updated October 2026 · More converters