Color Harmony 101: Complementary, Analogous, Triadic, and More

The color wheel is just hue, split into 360 degrees

Every color harmony rule is really a statement about angles on the hue wheel (0–360°), independent of saturation and lightness. Once you see harmonies as angle relationships, the whole system stops feeling like arbitrary named rules and starts feeling like simple arithmetic.

Complementary — 180° apart

Two hues directly opposite each other on the wheel. This is the highest-contrast pairing possible at a given saturation and lightness, which is exactly why it's used for things that need to visually separate — a call-to-action button against a brand background, for instance. The tradeoff is tension: complementary pairs can feel loud or jarring if both colors are used at full saturation in large areas.

Analogous — hues next to each other

Three (or more) hues sitting close together, typically 30° apart. Because they're neighbors on the wheel, analogous palettes read as harmonious and low-contrast — common in nature photography and calm, cohesive brand palettes. The risk is the opposite of complementary: analogous schemes can lack enough contrast to establish clear visual hierarchy without varying lightness or saturation too.

Triadic — three hues, 120° apart

Evenly spaced around the wheel, triadic schemes are vibrant without being as confrontational as a pure complementary pair, because no single color is "opposing" another as directly. It's a common choice when a design needs three roles (primary, secondary, accent) that all feel intentional rather than arbitrary.

Split-complementary — a softer complementary

Instead of the exact complement, split-complementary pairs a base hue with the two hues adjacent to its complement (typically ±30°). It keeps most of the contrast a true complementary pair offers while reducing the tension, since neither of the two secondary hues is a full opposite.

Tetradic and square — two complementary pairs

Tetradic schemes use two complementary pairs at a chosen offset (commonly 60°), forming a rectangle on the wheel. Square schemes are the special case where that offset is exactly 90°, spacing all four hues evenly. Both give a wider color range than triadic, but are harder to balance well — usually one hue needs to dominate and the other three play supporting roles, rather than treating all four as equals.

Monochromatic — no hue change at all

Not a wheel-angle rule at all: a single hue, varied only in lightness and/or saturation (shades, tints, and tones). It's the safest scheme for guaranteed cohesion, at the cost of needing lightness/contrast to do all the work of establishing hierarchy.

A harmony gives you hues — not a palette

The wheel only decides hue angles. A usable palette still needs saturation and lightness assigned per role, and that's where most "I picked complementary colors and it looks bad" failures live: two hues at full saturation and identical lightness will vibrate no matter how correct the geometry is. The reliable recipe: pick the scheme for hues, then give each hue a job with its own lightness range — dominant surfaces light and desaturated, text nearly neutral, accent saturated and mid-lightness. The 60-30-10 rule is the proportion half of this same idea.

A worked example

Say the brand hue is a blue at 220°. Complementary puts the accent near 40° — an amber. Rather than using both raw: surfaces take the blue desaturated way down (a near-white at 5–10% saturation), interactive elements take the blue at full strength around 50% lightness, and the amber appears only on the few elements that must pop. Run the same base through the palette generator and each scheme becomes concrete instead of theoretical.

Which wheel? RGB vs the painters' wheel

Classical art education teaches a red–yellow–blue wheel where red's complement is green. Digital color runs on the RGB/HSL wheel, where red's complement is cyan and green's is magenta. Neither is "wrong" — they model different mixing physics — but harmony angles computed on one wheel don't transfer to the other, which is why a scheme from a painting tutorial can feel off when reproduced with HSL arithmetic. Everything on this site, including the color wheel, uses the HSL wheel, because that's the space your CSS actually lives in.

Harmony says nothing about accessibility

Two hues 180° apart can have nearly identical luminance — complementary red and cyan are both mid-lightness, so red text on a cyan card can be geometrically perfect and completely illegible. Contrast is a separate, non-negotiable check on the lightness axis: run the pairs you actually intend to combine through the contrast checker. Color-vision deficiency adds a second independent check — the red–green axis that several harmonies lean on is exactly the axis most CVD compresses, so a complementary red/green scheme can collapse into two similar browns for around 8% of male users. The simulator shows this instantly.

When to break the rules

Harmonies are defaults, not laws, and two moves cover most real-world palettes anyway. Any scheme plus neutrals always works — grays don't participate in hue relationships, so they can carry 90% of a UI while the scheme lives in the accents. And near-misses read as intentional once lightness contrast is strong — a 165° "almost complement" is often calmer than the literal 180°. If a palette tests well for hierarchy, contrast, and CVD, the angle being off-book doesn't matter.