Color harmonies: complementary, analogous, triadic and more

What a color harmony is

A harmony is a rule for choosing colors that belong together. You take a base color, keep how light and how colorful it is, and turn only the hue by set angles on a color wheel.

The angles are the easy part. Which wheel you turn matters just as much, because the classic HSL wheel and a perceptual wheel like OKLCH give visibly different results for the same angle. All examples below start from #2a7fbf, a medium blue.

Complementary, split-complementary, analogous, triadic, tetradic, square

Each row keeps the OKLCH lightness of the base, 0.577, and its chroma, 0.127. Only the hue turns by the listed angles. When a turned color falls outside sRGB, chroma is lowered slightly to fit, which is why a couple of colors are a little less vivid. Monochromatic is the exception: it keeps the hue and steps lightness by 0.12.

• Complementary: the strongest tension. Use the second color only for small accents such as a call-to-action button.
• Split-complementary: the same energy as complementary but easier to balance, because the accent is split into two neighbors of the opposite hue.
• Analogous: calm and cohesive. Good for illustrations and backgrounds, weak when you need one element to stand out.
• Triadic, tetradic and square: lively and hard to control. Let one color lead and keep the others small.
• Monochromatic: one hue in several lightness steps. The safest choice for interfaces, since contrast comes from lightness anyway.

Why the HSL color wheel gives unbalanced harmonies

Most color wheels in design tools are HSL: they turn the hue and keep the HSL saturation and lightness numbers. But HSL lightness is a formula, not what you see. Turn a golden yellow by 180° in HSL and you get a deep blue that looks far darker than the yellow.

Rotating in OKLCH keeps perceived lightness equal. Here is #f4b400 turned both ways, with the OKLCH lightness of every result.

The HSL set spans lightness from 0.489 to 0.857, so the blue and purple sink and the mint green glows. The OKLCH set stays between 0.802 and 0.817. The same happens with pure RGB primaries: #ff0000, #00ff00 and #0000ff are a perfect HSL triad, yet their OKLCH lightness is 0.628, 0.866 and 0.452.

There is a trade-off. A blue as light as this yellow cannot be very vivid on an sRGB screen, so the OKLCH complement #97c0ff has chroma 0.10 instead of 0.166. You choose between equal lightness and equal vividness; with yellow and blue you cannot have both.

Artist’s RYB wheel vs the screen RGB wheel

The wheel from art class is RYB: red, yellow and blue as primaries, as in mixing paint. On it, the complement of red is green and the complement of blue is orange. Screens mix light, so digital tools use an RGB wheel, where the complement of red is cyan and the complement of blue is yellow.

Neither is wrong, they answer different questions. RYB follows painting tradition, RGB and OKLCH follow how screens and eyes work. If a design tool gives you cyan where you expected green, it is using the RGB wheel.

The OKLCH column shows what equal lightness does to extreme colors. The complement of pure blue becomes a dark ochre with the same lightness, 0.45, and the complement of pure yellow becomes an almost white lavender at 0.96.

The 60-30-10 rule applied to a harmony

A harmony tells you which colors to use, not how much of each. The 60-30-10 rule fills that gap: about 60% of the area goes to a dominant color, 30% to a secondary one and 10% to an accent. Equal shares make even a good harmony look noisy.

In an interface the 60% is usually a near-neutral tinted with the base hue, the 30% is the base and the 10% is the complementary accent. Here is a copy-ready set built from #2a7fbf.

:root {
    --surface: #eff6fd;
    --primary: #2a7fbf;
    --accent: #ab6708;
    --text: #15232f;
}

How to check a harmony for contrast

Hue difference does not make text readable, lightness difference does. The complementary pair above is as far apart in hue as colors get, yet #2a7fbf on #ab6708 has a WCAG ratio of 1.05:1 and an APCA Lc of 0: practically invisible as text.

Equal lightness has an upside. White text on every color of the OKLCH harmonies above lands between 4.04:1 and 4.62:1. On the HSL version of the same harmonies, it swings from 2.15:1 to 8.90:1. One fix therefore works for the whole OKLCH set: lower the lightness to 0.52, and white text passes 4.5:1 on any hue at chroma 0.127, from 5.00:1 to 5.91:1.

To use two harmony colors together as text and background, move them apart in lightness: keep the hues and push one toward 0.35 and the other toward 0.93. Then check the real pair in a contrast checker, and run the palette through a color blindness simulator if the accent carries meaning.

Questions and answers