Colour Wheel Harmonies

What a colour harmony actually is

A harmony is a fixed geometric relationship on the colour wheel. Pick a starting hue, rotate around the circle by a set of angles, and you get a group of colours that share a structural logic. That is the whole idea, and it is why harmonies feel deliberate: the viewer can sense the relationship even if they could not name it.

The angles matter because hue distance is the main thing that makes two colours feel related or unrelated. Saturation and lightness can be adjusted afterwards without breaking the relationship, which is what makes these schemes practical rather than rigid.

1. Complementary colours

Two hues directly opposite each other — red and green, blue and orange, yellow and violet. It is the highest-contrast relationship available, and the most misused: a pair at full saturation across equal areas will vibrate and tire the eye rather than focus it.

Use it when one colour should dominate and the other should interrupt. A warm page with a single cool call-to-action button works because the button is the only thing breaking the pattern. Read the full guide to complementary colours.

2. Split-complementary colours

Take the complement of your base hue, then step thirty degrees to either side of it. You keep most of the contrast of a complementary pair, but because the opposite is split across two hues, the tension drops substantially. It is the most forgiving high-contrast scheme, which makes it a sensible first choice for anyone who finds complementary too loud.

It works particularly well in marketing layouts, where you want energy without the aggressive edge of a direct opposite pair.

3. Analogous colours

Three hues sitting next to each other, within about sixty degrees of the wheel. Nothing clashes, everything feels related, and the result is calm by default. This is the harmony that most editorial design, brand systems and quiet interfaces are secretly built on.

Its weakness is the mirror of its strength: with so little hue contrast, you have to create contrast from somewhere else — lightness, size, weight or texture. If an analogous layout feels flat, that is usually the missing ingredient. Read the full guide to analogous colours.

4. Triadic colours

Three hues spaced evenly around the wheel, forming an equilateral triangle. It gives you genuine variety while keeping the three colours balanced against one another, because no two are closer than any other pair.

Triadic palettes are vivid and read as playful, which is why they suit children’s products, charts, event branding and anything that wants to feel energetic. The risk is equal weighting: three strong colours at equal area will always look unresolved until one of them is given dominance. Read the full guide to triadic colours.

5. Tetradic colours

Two complementary pairs, arranged as a rectangle on the wheel. With four hues you get the richest set of relationships available, and also the hardest one to balance. Most failed tetradic palettes fail for the same reason: all four colours are given roughly equal importance.

The working method is to let one hue occupy at least half the visual area, use a second as support, and treat the remaining two as accents that appear in small quantities. If that feels like too much, tetradic is probably the wrong scheme for the project.

6. Monochromatic colours

A single hue at several lightness levels. There is no hue contrast at all, so every relationship in the palette comes from value. It is the quietest harmony, and the most reliable one for interfaces with a lot of text.

Because there is only one hue, you can add more steps without the palette becoming noisy — which is exactly what a design system needs for backgrounds, borders, disabled states and hover variants.

How to choose between them

Harmony is a starting point, not a finish

Two mistakes account for almost every palette that looks wrong despite being technically correct.

The first is equal proportion. A harmony tells you which colours belong together; it says nothing about how much of each to use. The usual remedy is the 60-30-10 split — roughly sixty per cent dominant, thirty per cent supporting, ten per cent accent. Without a dominant tone, the eye has nowhere to settle.

The second is ignoring value. Two colours can be perfectly harmonious in hue and identical in lightness, at which point they become indistinguishable in greyscale and unreadable for anyone with colour vision deficiency. Harmony operates on hue; legibility operates on lightness. You need both.

Putting a harmony to work

Start with one colour you already trust — a brand value, a paint sample, a colour from a photograph. Open the palette generator, paste it in, and cycle through the six schemes. Pick the one whose behaviour matches the job, not the one that looks nicest in isolation, then check every text pair with the contrast checker.

If you are still learning the underlying logic, colour theory explains temperature, value and saturation — the three properties that decide whether a harmony works in practice.