Home · Blog · Colour harmonies

Colour harmonies: the rules behind palettes that work

8 Oct 2026 · Colour · 6 min read

Some colour combinations just look right, and others clash in a way you feel before you can explain. That feeling isn't random, and it isn't purely a matter of taste — it follows from how human vision processes hue relationships. Colour harmonies are the classic geometric rules, drawn on the colour wheel, that predict which combinations will feel balanced. They're not laws — breaking them deliberately is half of what makes design interesting — but they're the best starting map anyone has drawn.

Every harmony starts from the same picture: hues arranged in a circle, red at 0°, sweeping through orange, yellow, green, blue and violet back to red at 360°. A harmony rule is simply a shape placed on that wheel — pick a starting hue, and the shape tells you which other hues sit in pleasing relation to it. What follows are the five shapes worth knowing, what each one is good for, and where each one quietly fails.

Complementary: opposites attract

Pick a hue, then take the hue directly opposite it on the wheel — 180° away. Red pairs with cyan, blue with orange, yellow with violet. Complementary pairs create maximum contrast and visual vibration: each colour makes the other look more intense, because the eye, fatigued by one hue, rebounds toward its opposite.

This is the harmony of energy — sports branding, sale banners, call-to-action buttons. It works because the contrast guarantees separation: text in one colour on the other is about as legible as colour-on-colour gets. The failure mode is equally dramatic. Two full-strength complements at equal proportions fight for attention and can appear to shimmer at the boundary, which is tiring to look at. The standard fix is dominance: let one colour own roughly 70–80% of the space and use its complement as the accent. A navy page with orange highlights feels designed; a page split evenly between navy and orange feels like a warning sign.

Analogous: neighbours on the wheel

Take three to five hues that sit next to each other — say, 150°, 170° and 190° (greens sliding into teals and blues). Analogous palettes are the calmest harmony because there's no hue conflict at all; everything belongs to one family. Nature is full of them: forests, oceans, sunsets.

Use analogous schemes when you want cohesion over excitement — backgrounds, data visualisations where categories are related, anything meant to feel serene. The risk is monotony: with no contrast to create hierarchy, everything can melt into one undifferentiated wash. The fix is to vary lightness and saturation rather than hue. Three blues at lightness 25%, 50% and 75% give you a dark, a mid and a light that structure a page perfectly while the hue stays constant. Analogous harmony plus lightness contrast is one of the most reliable recipes in interface design.

Triadic: the even triangle

Three hues spaced 120° apart — the classic example is red, yellow and blue, the primary triad. Triadic palettes are vibrant but balanced: unlike complements, no two colours are in direct opposition, so the eye doesn't get the vibrating-boundary effect, yet the spread across the wheel guarantees variety.

Triadic schemes suit playful, confident brands and illustrations. The discipline they demand is the same as complements, squared: with three strong hues, you must appoint a clear lead. A common working ratio is 60-30-10 — a dominant colour, a supporting colour, and an accent that appears sparingly. Without that hierarchy, triadic palettes read as chaotic, the visual equivalent of three people talking at once. Muting two of the three (lowering their saturation while keeping the lead vivid) is another way to keep the peace.

Split-complementary and tetradic: the advanced shapes

Split-complementary takes a base hue and pairs it with the two neighbours of its complement — instead of red-plus-cyan, you get red plus blue-green and yellow-green. You keep most of the complementary punch with less of the vibration, and you gain a third colour for free. It's arguably the most forgiving harmony for beginners: contrast plus variety with a built-in safety margin.

Tetradic (or double-complementary) places a rectangle on the wheel: two complementary pairs, e.g. red, green, blue and orange. Four hues give enormous range — and enormous rope. Tetradic palettes work when the pairs are kept apart in the design (one pair for backgrounds, one for accents) or when three of the four are heavily muted. Used carelessly, four full-strength hues just look loud. A good rule of thumb: if you can't name which colour is in charge within five seconds, demote two of them.

Shades: the harmony of restraint

Not every palette needs multiple hues. A shades palette — one hue at five or six lightness steps, say from hsl(210, 60%, 12%) to hsl(210, 60%, 92%) — is technically the simplest harmony and often the most professional-looking. Everything matches by construction, and the lightness steps give you a ready-made hierarchy: dark for text, mid for borders and secondary elements, light for backgrounds.

Shades palettes are the backbone of most design systems precisely because they're foolproof. Their only real weakness is emotional flatness — a single hue can't carry excitement — which is why systems built on shades almost always add one accent hue (often a complement) for the moments that need to pop: links, buttons, alerts.

Why these shapes work at all

The honest answer is part physics, part neurology. The eye's colour receptors adapt to whatever dominates the scene and rebound toward the opposite — stare at a red square for thirty seconds, look at a white wall, and you'll see a cyan afterimage. Complementary pairs exploit that rebound deliberately. Analogous schemes avoid triggering it. None of this is magic; it's the visual system seeking equilibrium, and the harmony rules are just geometry that predicts where equilibrium lies.

But geometry isn't the whole story, which is why the rules come with a large asterisk. Culture loads colours with meaning — white reads as purity in some traditions and mourning in others. Context changes everything — a palette that sings on a poster can fail on a dashboard. And personal taste, training and trends all move the goalposts. Treat harmonies as a starting point for exploration, not a verdict. Generate the rule-based palette, then adjust it by eye until it feels right for the specific job. The wheel proposes; the designer disposes.

The caveat the wheel can't see

Here's what no harmony rule accounts for: roughly 1 in 12 men and 1 in 200 women have some form of colour-vision deficiency, most commonly red-green. A complementary red-green palette — theoretically perfect on the wheel — is unreadable mush to a deuteranope. The wheel describes hue relationships for typical vision; it says nothing about whether your palette survives translation to other kinds of eyes. Always check critical palettes with a colour-blindness simulator or, better, by verifying that information never depends on hue alone — pair colour with labels, icons or lightness differences.

Try the Palette Generator