Colour harmonies

Complementary, triadic and analogous sets, each one contrast-audited.

Harmony

Neighbouring hues. Calm, and the safest default for interfaces.

2563eb

on white 5.16:1 · AA

on black 4.06:1 · large only

007aa7

on white 4.83:1 · AA

on black 4.34:1 · large only

7a49df

on white 5.46:1 · AA

on black 3.84:1 · large only

3 pairs collapse

Each of these passes contrast against the background individually. That is not the same as being tellable apart from its neighbour.

  • 2563eb / 007aa7under deuteranomaly, deuteranopia, protanomaly, protanopia, tritanopia, achromatomaly, achromatopsia
  • 2563eb / 7a49dfunder deuteranomaly, deuteranopia, protanomaly, protanopia, achromatomaly, achromatopsia
  • 007aa7 / 7a49dfunder deuteranomaly, deuteranopia, protanomaly, protanopia, achromatopsia

CSS

:root {
  --palette-1: #2563eb;
  --palette-2: #007aa7;
  --palette-3: #7a49df;
}

What colour harmony is

A harmony is a set of hues at fixed angular relationships to a base — complementary at 180°, triadic at 120°, analogous at ±30°. The rules are long-standing conventions rather than empirical findings; their value is that they reduce an infinite space to a handful of defensible options.

What this tool does that others do not

  • Rotations computed in OKLCH

    Rotating hue in HSL also changes apparent lightness, so an HSL triad arrives with one colour looking washed out and another looking heavy. In OKLCH the rotated hues stay at the same perceived lightness, which is what a harmony is supposed to mean.

  • Six harmonies, each with its failure mode named

    Analogous is the safest default for interfaces because neighbouring hues stay calm and are hard to misuse. Monochromatic is the most robust of all, because a single hue at different lightnesses survives every form of colour blindness. Triadic and tetradic are lively and hard to balance — they need one colour to dominate and the rest used sparingly.

  • Audited on arrival

    Every generated set carries contrast against both grounds per colour, and a pairwise colour-vision check across the whole set. A harmony that is mathematically correct and practically unusable is caught before you copy the CSS.

How to use it

  1. Pick the base colour

    Usually the one you are not allowed to change. Every rotation is relative to it.

  2. Start with analogous or monochromatic

    For interface work those are the two that reliably survive contact with real components. Reach for triadic when you need liveliness and have somewhere for the tension to go.

  3. Read the audit before the CSS

    The pairwise check is the one that catches a harmony whose colours collapse into each other for part of your audience.

Worked example

Real input, real figures.

Choosing a harmony that survives colour blindness

You give it

One base hue, compared as a triad and as a monochromatic set.

You get

The monochromatic set separates by lightness, which is the channel every red-green deficiency leaves intact, so no pair collapses. The triad separates by hue at similar lightness, which is precisely the arrangement that can collapse — the audit names the pair when it does.

Against a typical harmony wheel

AspectThis toolA typical colour wheel
Rotation spaceOKLCH, so lightness holds across the setHSL, so lightness drifts
GuidanceEach harmony’s failure mode statedA name and a diagram
ContrastBoth grounds, per colourNot measured
Colour visionPairwise across the whole setNot checked

Guide

What the audit checks

Contrast against both backgrounds. A colour that works as text on white often fails on black and the reverse. Each swatch shows both, with the threshold it clears.

Pairwise colour vision. This is the check nothing else does. A contrast tool compares foreground to background and never foreground to foreground, so two palette colours can each pass individually while being indistinguishable to each other. Measured on real frameworks, Bootstrap's danger and success colours fall from a perceptual distance of 74 to 4 under deuteranopia.

Choosing a harmony

Harmony rules are conventions with a long history rather than empirical findings, and they are a starting point rather than an answer. They are useful because they constrain an infinite space to a handful of defensible options.

For interfaces, analogous and monochromatic are the reliable choices. Monochromatic in particular survives every kind of colour vision deficiency, because it separates by lightness rather than hue.

Questions people ask

Straight answers. Each one links directly: copy the address after opening it.

Why does this generate fewer palettes than other tools?

Because generating colours is the easy part and an unlimited stream of random palettes is not actually useful. Every palette here is built from a base colour you chose, using a named harmony, and arrives already audited against both backgrounds and eight kinds of colour vision.

Which harmony should I use for an interface?

Analogous is the safest default — neighbouring hues stay calm and are hard to misuse. Monochromatic is the most robust, because a single hue at different lightnesses survives every form of colour blindness. Triadic and tetradic are lively and hard to balance; they usually need one colour to dominate and the others to be used sparingly.

Why are harmonies calculated in OKLCH?

Rotating hue in HSL also changes apparent lightness, so an HSL triad comes out with one colour looking washed and another looking heavy. In OKLCH the rotated hues stay at the same perceived lightness, which is what a harmony is supposed to mean.