The previous article covered complementary colors (180°) and analogous colors (30°–60°), the two ends of the contrast spectrum. In real projects the more common situation is: complementary feels too hard, analogous feels too flat.
Between them sit two schemes: triadic colors (three hues 120° apart) and split-complementary colors (150° and 210°). The first gives you variety across three directions; the second gives you tension close to complementary but easier to live with. This article covers how to calculate both, where each one applies, and how to keep them under control.
Triadic Colors: Three Directions, 120° Apart
How to calculate
Divide the hue circle into three equal parts in HSL:
With #7C3AED (hsl(262, 83%, 58%)) as the base, the triadic scheme gives hsl(22, 83%, 58%) (orange-red) and hsl(142, 83%, 58%) (green).
The most classic triadic schemes are the three primaries themselves (red, yellow, and blue in RYB) and the three secondaries (orange, green, and violet) — they form equilateral triangles on the wheel by nature.
How it differs from complementary
Complementary is two armies facing off, with the conflict concentrated at two points. A triadic scheme spreads the conflict across three directions, and no pair sits in direct opposition, so the result is softer overall than complementary while being noticeably richer in color.
The trade-off: three hues mean three claims on attention, and poor control makes the result look busy. Triadic is the easiest of the four schemes to get wrong, and the failure almost always comes from giving the three hues equal weight.
The one rule: one dominant, two supporting
Whether a triadic scheme works depends almost entirely on this. The three hues cannot be equal. A workable split:
- Dominant 60%–70%: keeps higher saturation, carries the large areas
- Secondary 20%–30%: saturation can drop a little
- Third color under 10%: accent only, used where something needs to be seen
One more hard requirement: do not keep all three highly saturated. Bring at least one down below 50% S so the image has a hierarchy. Three equally vivid colors leave the eye with nowhere to settle.
Palettes you can use directly
Scheme A: Red × yellow × blue (education, children, multi-category)
Blue carries the large areas at reduced saturation, yellow supports, and red appears only where you need warning or strong emphasis.
Scheme B: Orange × green × violet (campaign pages, illustration, marketing material)
When to use triadic
💡 Accessibility note: Triadic schemes often include both red and green. Red-green color vision deficiency is the most common type, so if a chart distinguishes categories by hue alone, those readers cannot tell them apart. Give each category an additional distinguishing dimension — a lightness difference, pattern, shape, or text label. Never rely on color alone.
Split-Complementary Colors: 150° and 210°
How to calculate
Take the two neighbors of the complement and skip the one directly opposite:
Using #7C3AED (hsl(262, 83%, 58%)) again, you get hsl(52, 83%, 58%) (golden yellow) and hsl(112, 83%, 58%) (green). They sit 30° to either side of the complement at 82°.
Why it works better than complementary
Split-complementary keeps the tension of a complementary scheme — both supporting colors sit close to the complementary position, so the contrast is still there — but because no color faces the dominant one head-on, simultaneous contrast is much weaker and the image does not vibrate. It is the safe version of complementary.
It also has more variation than analogous: the three hues span 120°, so the hierarchy is clear. When complementary feels too hard and analogous too soft, split-complementary is usually the most reliable answer, and of the four schemes it has the highest tolerance for error.
How to use it
- Dominant color covers the large areas (60%–70%): background, cards, main blocks
- The hue farther from the dominant becomes the accent (usually under 10%): buttons and key numbers
- The other becomes the secondary (20%–30%): secondary information, icons, dividers
- Separate the lightness: if all three sit at similar lightness, the hierarchy disappears
Palettes you can use directly
Scheme A: Violet × golden yellow × green (creative tools, content platforms)
Violet is dominant, golden yellow is accent only (buttons, highlights), and green carries secondary information.
Scheme B: Blue × amber × orange (marketing and campaign landing pages)
When to use split-complementary
The Four Schemes Compared
Work through it in this order: decide how much contrast the image needs, then pick the setting that matches — rather than choosing a scheme that looks good and forcing the content into it.
Common Mistakes
- Triadic split three ways, all highly saturated: the classic failure, and it reads as cheap.
- Using triadic in charts with hue as the only difference: red-green combinations are unfriendly to readers with color vision deficiency. Add a lightness difference or labels.
- Treating both supporting colors in a split-complementary scheme as accents: there can be only one accent, or the focus disappears.
- Three colors at similar lightness: the hues differ but the hierarchy never appears, and from a distance it blurs.
- Laying a high-saturation triadic scheme straight onto a light background: without a neutral in between, it feels restless.
Checklist
- Set the dominant color: fix H, S, and L, and decide its role.
- Choose the relationship: ±30°–60° (analogous), 150°/210° (split-complementary), 120° × 3 (triadic), 180° (complementary).
- Allocate area: one dominant, one secondary, one accent, roughly 70-20-10.
- Control saturation: do not keep all three highly saturated.
- Separate lightness: at least 20% between adjacent steps.
- Add neutrals: leave room for background and whitespace.
- Check contrast: body text against background needs WCAG AA, 4.5:1.
- Run a color vision check: key information must not be carried by hue alone.
"Choosing a color scheme is really choosing a contrast level. Decide whether the image should be quiet or should shout, and the scheme follows — what remains is area and lightness."
That completes the four basic schemes you can derive from wheel distance. The next article moves to a different dimension: warm and cool colors and their psychological effects. Two blues can read very differently, one cold and one friendly. Getting the scheme right is one thing; getting the temperature right is another.
Recommended Related Tools
Put the color knowledge from this article into practice with these free tools: