Colour Harmony: Complementary, Analogous & Triadic Schemes

Beginner · Studio Colour

Some colour combinations just work, because of their structure. Colour harmony is the small set of relationships on the colour wheel that reliably look good together: complementary, analogous, triadic, and a couple more. Learn the five schemes and you can build a palette on purpose instead of nudging swatches until something feels okay.

The wheel is the map

Every scheme is just a shape laid over the colour wheel. Hue is an angle from 0 to 360°; the relationships are fixed angular distances. Once you see it that way, “what goes with purple?” becomes something you can measure.

Analogous: calm and cohesive

Three hues sitting next to each other (within ~30–60°): purple, violet, magenta. Because they share underlying colour, they blend into a single mood, which makes them ideal for backgrounds, gradients, and brands that want to feel unified rather than energetic. Pick one as the dominant and let the others support.

Complementary: maximum contrast

Two hues directly opposite (180° apart): purple and yellow-orange, blue and orange. They make each other look more vivid, which is exactly what you want for a call-to-action against a calm background. The catch: at equal amounts they fight. Use one as ~90% of the surface and the complement as the ~10% accent.

Triadic: balanced and playful

Three hues evenly spaced (120° apart) form a triangle. You get variety and balance, which is why triadic schemes feel lively without looking random. Think of illustration, kids’ brands, dashboards with several categories. Keep one dominant and desaturate the other two so it doesn’t turn into a circus.

Two more worth knowing

• Split-complementary. Instead of the exact opposite, use the two hues either side of it. Almost the same contrast, less tension, which makes it a safer complementary.
• Monochromatic. One hue, many tints and shades. The most foolproof scheme of all, and the backbone of most UI palettes (it’s the ramp from the colour-system guide).

Harmony picks the hues; a system finishes the job

A scheme gives you 2–3 base hues. To ship a UI you still need tints, shades, neutrals, and contrast-checked pairs for each, which is where the tint-and-shade ramp comes in. Think of harmony as choosing the notes and the ramp as playing the chord.

/* Complementary base + accent, then ramp each */
--brand:  oklch(0.58 0.18 285);   /* purple */
--accent: oklch(0.80 0.14 75);    /* ~180° away */

Common mistakes

• Equal amounts of complements. At equal strength they vibrate, so use the 90/10 (or 60/30/10) split.
• Full saturation across the whole scheme. Let one hue lead and mute the rest.
• Judging hues in isolation. Colours shift next to their neighbours, so always preview them together.
• Forgetting contrast. A harmonious pair can still fail as text on background. Check it.