Complementary vs Analogous vs Triadic: Color Harmony Basics

2026/07/15

Open any palette tool and you’ll meet the same six words: complementary, analogous, triadic, split-complementary, tetradic, monochromatic. They’re not decoration — each one is a fixed geometric relationship on the color wheel, and each produces a predictably different mood. Here’s what the schemes actually do, when to reach for which, and the proportion rule that keeps any of them from turning into a rainbow.

One wheel, six recipes

Every harmony scheme is hue rotation. Take your base color’s hue — the H in HSL, an angle from 0 to 360° on the color wheel — keep saturation and lightness where they are, and rotate by a fixed amount. Rotate 180° and you get the complement; ±30° gives the analogous neighbors; ±120° the triadic partners. That’s the entire trick. The schemes differ only in how far they rotate, which controls how much tension the pairing carries.

All the examples below start from the same indigo, #5B5BD6 (hue 240°), so you can see the rotations doing the work.

Complementary (180°) — maximum tension

The exact opposite hue: indigo #5B5BD6 pairs with yellow-green #D6D65B. Opposites produce the strongest possible hue contrast, which is why complementary pairs dominate sports branding, movie posters (the infamous teal-and-orange), and anything that needs to shout.

The catch: a 50/50 complementary split exhausts the eye. Complementary pairs are accent machines — let one color own the design and spend its opposite only on the few moments that matter: the CTA, the alert, the sale badge.

Analogous (±30°) — calm and cohesive

The two neighbors on either side: indigo picks up azure #5B98D6 and violet #985BD6. Because adjacent hues share an undertone, they can sit next to each other at similar strengths without fighting — the reason analogous schemes dominate calm, editorial, and nature-adjacent design. This is also the harmony photos hand you for free: one light source tints everything in frame toward neighboring hues.

The catch is the mirror image of complementary: analogous schemes have almost no built-in contrast. You’ll usually want a neutral or a small opposing accent so buttons and links have somewhere to live.

Triadic (±120°) — vivid but balanced

Three hues spaced evenly around the wheel: indigo, red #D65B5B, green #5BD65B. Triadic schemes are lively without being chaotic — the spacing guarantees variety while keeping the tension symmetric. Think children’s brands, games, illustration systems.

At full saturation a triad looks like a carnival. The fix is muting: keep one hue vivid and pull the other two toward gray or near-neutral versions, then expand each into light and dark steps with the Shades & Tints Generator so they can do background and text duty.

The other three

• Split-complementary (150° and 210°). Instead of the exact opposite, take the two hues flanking it. Nearly the same contrast as complementary, but softer and much easier to balance — the best “first serious scheme” for most projects.
• Tetradic (two complementary pairs). Four hues, maximum variety, hardest to control. Works only with strict hierarchy: one dominant, three supporting.
• Monochromatic (one hue, many lightnesses). Technically the absence of a hue scheme — and the most reliable look in interface design. All the discipline, none of the clash.

Which scheme for which job

• Product UI, dashboards, docs: monochromatic or analogous base, complementary accent.
• Marketing pages, posters, packaging: complementary or split-complementary — you want the tension.
• Illustration, games, kids’ brands: triadic, with two of the three muted.
• Editorial, photography-led sites: analogous, sampled from the imagery itself.

Proportion is the real secret

The wheel tells you which hues relate; it says nothing about how much of each to use — and that’s where most harmony experiments die. Follow 60-30-10: the calmest color takes ~60% of the surface, a secondary ~30%, and the loudest hue earns just ~10% as an accent. The full role-assignment method is in How to Choose a Color Palette from a Photo — it applies to wheel-generated schemes exactly the same way.

Harmony is not accessibility

A scheme can be beautiful and unreadable at the same time. Harmony formulas rotate hue but preserve lightness — and contrast for reading is about lightness, not hue. A complementary pair like red on green can sit at a catastrophic 1.3:1 while looking “high contrast.” Before shipping, put your actual text-on-background pairs through the numbers — WCAG Contrast Ratios Explained covers what to aim for — and remember that red-green pairs also collapse for roughly 8% of men with color vision deficiency.

Treat the wheel as a starting point, not a verdict: pick the relationship that matches the mood, mute what needs muting, weight it 60-30-10, and verify the text still reads. That’s color harmony in practice.

Try it yourself

Everything on ScanHue is free and runs in your browser: Photo Palette Extractor · Contrast Checker · Color Code Converter. More reads in the guides section.