Guide

Color Harmony: Analogous, Complementary, Triadic, Split-Complementary

The palette generator on the home page rotates around the color wheel using four classical schemes. Each scheme gives a different feel; each fits a different job. Here is what the names actually mean.

Last reviewed on 2026-05-09

The wheel underneath everything

All four schemes are angles. Pick a starting hue — anywhere from 0° to 360° — and the scheme tells you which other angles to grab. The math is the same as the one in the HSL guide: hue is an angle on a circle, so adding or subtracting degrees moves you to a related hue.

Saturation and lightness are usually held roughly steady inside a single palette so the colors feel like siblings rather than strangers. The home palette generator nudges saturation and lightness within a small range — enough variation to make swatches distinct, not enough to break the family resemblance.

Analogous

Analogous palettes pick three to five hues that sit next to each other on the wheel — typically 30° apart. Imagine sliding a small fan across the wheel: every hue under the fan is included.

Example. Starting at 200° (sky blue): 170°, 200°, 230°, 260°, 290° — a journey from teal through blue into violet.

Feel. Calm, cohesive, low contrast. Analogous palettes look intentional and rarely clash. They're a default choice when the color itself shouldn't be the loudest part of the design.

Use it for:

• Backgrounds, gradients, and ambient illustrations.
• Editorial content where typography should lead.
• Long-form interfaces (dashboards, docs) that need calm chromaticity.

Watch out for: low internal contrast. If two analogous swatches need to communicate different statuses (success vs warning), analogous may be too subtle. Pair with a single accent color from across the wheel to mark exceptions.

Complementary

Complementary palettes use two hues sitting opposite each other on the wheel — exactly 180° apart. Red and cyan. Yellow and blue. Magenta and green.

Example. 30° (orange) paired with 210° (sky blue). Or 265° (violet) paired with 85° (lime).

Feel. High energy, high contrast, instantly readable as "two things." Complementary pairs are how a single accent color can pop against a dominant brand color.

Use it for:

• Call-to-action buttons that have to stand against a brand-coloured surface.
• Data visualisations that compare two opposing categories (gain vs loss, before vs after).
• Sports, games, and editorial covers where the design needs to shout.

Watch out for: vibration. Two fully-saturated complements at the same lightness produce a flickering edge that's exhausting to read. Drop one's saturation, raise the other's lightness, or insert a neutral between them.

Triadic

Triadic palettes pick three hues spaced evenly around the wheel — 120° apart. Red, yellow, blue is the canonical example. Orange, green, violet is another.

Example. 0° (red), 120° (green), 240° (blue). Rotating the entire trio by any offset gives another valid set: 30° (orange), 150° (mint), 270° (violet).

Feel. Balanced and playful. Three equal voices — no single hue dominates.

Use it for:

• Children's products, education brands, illustration-heavy surfaces.
• Categorical data where you have exactly three groups and want each to feel equally important.
• Logo systems where each sub-brand inherits one of the three hues.

Watch out for: circus energy. Three saturated equals can feel chaotic if used at full strength everywhere. Designate one as the dominant (largest area), one as secondary (accents), and one as a tertiary (rare highlights). The 60-30-10 rule applies here.

Split-complementary

Split-complementary takes a base hue and pairs it with the two hues adjacent to its complement — 150° and 210° away from the base. It is complementary's quieter cousin.

Example. Base at 0° (red): pair with 150° (yellow-green) and 210° (sky blue) instead of 180° (cyan).

Feel. The drama of complementary minus the visual fight. The two "complements" reinforce each other but don't directly oppose the base.

Use it for:

• Brand palettes that need vivid contrast without going eye-watering.
• Illustration where you want a clear focal hue and supporting cast.
• Data viz where one main series is contrasted by two related comparisons.

Watch out for: too-similar complements. The two "split" hues sit only 60° apart, so they can blur together. Differentiate them with lightness or saturation if they need to read as distinct.

Decision criteria — picking the right scheme

The 60-30-10 distribution

Whatever scheme you pick, the proportion in which colors are used matters as much as the colors themselves. A common rule:

• 60% of the surface is one dominant color (often a near-neutral).
• 30% is a secondary color that supports the dominant.
• 10% is the accent — the color that earns attention.

The proportions don't have to be exact; the principle is that one color leads, one supports, one punctuates. Triadic and complementary palettes especially benefit from this discipline — used in equal proportion they overwhelm.

Saturation, lightness, and the missing dimensions

Color harmony schemes describe hue relationships only. Two palettes built from the same scheme can feel completely different depending on how saturated and how light their members are. A muted analogous palette of slate, mauve, and dusty blue conveys something very different from the same hue trio at full saturation.

For digital interfaces, lightness usually does most of the work — you'll have a 50%-lightness "brand" version of each hue plus tints (lighter) and shades (darker) for backgrounds, hovers, and disabled states. The HSL guide explains how to construct these scales without losing the relationship between hues.

Accessibility — the constraint that overrides taste

A palette that looks beautiful in a moodboard can fail at the moment text lands on it. Two adjacent colors that look distinct to most viewers can be invisible to a viewer with color vision deficiency. Build the palette, then validate the actual text-on-background pairs in the contrast checker, and audit critical pairs with a color-blindness simulator. Detail is in the WCAG contrast guide.

A practical workflow

1. Pick a base hue that fits the brand or mood you want.
2. Pick a scheme based on the decision criteria above.
3. Use the home palette generator to spin candidate sets quickly.
4. Lock the palette in HSL so you can produce tints and shades systematically.
5. Validate every pair you intend to use as text-on-background with the contrast checker.
6. Apply the 60-30-10 distribution rather than using all colors equally.

Common mistakes

• Picking a scheme without picking a job. The scheme follows what the design needs to communicate, not the other way around.
• Equal-weight everywhere. Three hues at 33% each will fight; commit one to lead.
• Saturation as the only lever. Two saturated complements clash; one saturated and one muted complement sing.
• Forgetting neutrals. Every palette needs grays for backgrounds, dividers, and disabled states. Choose them with the same hue family — a slightly purple gray reads better in a violet palette than pure neutral gray.