Triadic Colors: The Bold, Balanced Scheme

Triadic colors are three hues sitting exactly 120° apart on a color wheel — split the circle into equal thirds and whatever lands on those three points is your triad. Red, yellow and blue is the most familiar triadic color scheme, but any base hue works the same way: pick one, rotate it 120° twice, and the three results read as balanced because none of them sits closer to the other two than it should.

That part — the geometry — takes one sentence to explain and about five seconds to build in Harmony's Triadic tab. What actually separates a triadic palette that looks confident from one that looks like a toy box tipped over is what happens after you have the three hues: whether all three fight for the same amount of attention, or one of them is clearly in charge.

Triadic Colors on the Wheel: The Same Math, Two Different Wheels

A complementary pair sits 180° apart, straight across the wheel — the maximum-contrast relationship between two hues. A triad asks for that same kind of even spacing among three points instead of two: an equilateral triangle dropped onto the wheel, touching it at 0°, 120° and 240° from wherever the first point lands.

On the hue wheel Harmony actually draws — HSL, the same hue-saturation-lightness model behind CSS hsl() colors — hue 0° is pure red, #FF0000. Rotate 120° and land on pure green, #00FF00. Rotate another 120° and it's pure blue, #0000FF. Three exact, checkable hex values: about as clean a triadic color scheme example as the geometry gets, with nothing softened by paint or perception.

That is not the red-yellow-blue most people learned with a paint set. The classroom wheel comes from pigment mixing — red, yellow and blue as primaries — and places those three hues 120° apart from each other by teaching convention, not by the channel math HSL runs on. Green sits at 120° in HSL; yellow does not. Both wheels agree that a triad is three evenly spaced points. They disagree about which actual color sits at each point. Harmony computes the HSL version, so that's the one its hue ring hands you — which matters if you go looking for a literal orange or a literal violet and land on a different hue at that same angle instead.

Why a Perfectly Balanced Triad Can Still Look Like a Circus

Even spacing does not guarantee even manners. Because each hue in a triad sits the same rotational distance from its two neighbors, building all three at matching saturation and lightness gives them matching visual weight, too — nothing recedes, nothing leads, nothing volunteers to be the background. On a poster or a single illustration, that reads as energy: the whole point is that there's no single focal point. On an interface, it's a liability: something has to be the page behind everything else, something has to be the one button that matters, and something has to be the badge that only shows up twice a screen.

Take a base hue of 205° — an ordinary, workable blue — and rotate twice: 205°, 325°, 85°. Push all three to the same 82% saturation and 52% lightness and the hex values come out to #2095E9, #E92095 and #95E920: a blue, a hot pink and a yellow-green, all shouting at the same volume. Run any of those through Contrast checker against body text and the options run out fast — white on #E92095 lands at 4.11:1, dark text on the same swatch at 4.23:1, both short of the 4.5:1 minimum for regular text. Equal lightness across all three means none of them has spare headroom for text. They were built to be looked at, not written on.

Equal weight isn't always the wrong call. A dashboard with three plan tiers, a chart with three data categories, a row of tags where no single one should outrank the others — all of those want a triad that stays close to equal, because the whole point is telling three options apart without implying a ranking. The circus problem above is specific to layouts that need a hero: a landing page, a hero banner, a form with one primary action. Categorical UI and hero UI want opposite treatments from the exact same three hues.

How to Use Triadic Colors: One Dominant Hue, Two Accents

The fix isn't a different set of hues. It's a different job description for each one. Give one hue — usually whichever you started rotating from — most of the palette's real estate: backgrounds, large surfaces, the color a visitor sees first. Let the other two show up in smaller, specific roles instead of matching thirds: an accent button, a tag, a hover state, an icon that only appears in one corner. It's the same logic the 60-30-10 rule applies to any palette, just aimed at three hues that happen to sit 120° apart instead of wherever they were originally picked from.

33/33/33 is the instinct that feels fair and reads as chaos. A page built on that split has no color a viewer's eye settles on first, because all three are asking for the same amount of it. One hue carrying 60-plus percent of the interface, with the other two dividing what's left between an accent and a rarer highlight, is what actually reads as intentional instead of random.

A starting split that tends to hold up: roughly 70% dominant across backgrounds and body copy, 20% on one accent for the action that matters most, and the remaining 10% held back for the second accent — a notification dot, a single badge, a rare highlight that stays rare because it only means something if it doesn't show up everywhere.

Primary, Secondary or Tertiary Triad: Which Register Fits

The classroom pigment wheel actually holds four triads, not one, and all four use the identical 120° spacing — they just start at a different point in its twelve-hue sequence. These are the standard triadic color scheme examples every art-class wheel produces:

• Primary triad: red, yellow, blue.
• Secondary triad: orange, green, violet.
• Tertiary triad A: red-orange, yellow-green, blue-violet.
• Tertiary triad B: yellow-orange, blue-green, red-violet.

None of the four is more balanced than the others in any structural sense — same 120° split, four different starting points on the same twelve-hue wheel. What differs is how familiar the result feels. A primary triad reads as the most literal and the most playful, since red, yellow and blue are the three hues every crayon box leads with. A secondary triad keeps the same energy while feeling a little more deliberate, mostly because orange, green and violet aren't colors most people named before they could read. A tertiary triad tends to read as the most designed of the four — compound names like blue-violet or yellow-green already sound like a choice rather than a default.

None of that changes what Harmony does under the hood. Pick any base hue and its Triadic tab rotates 120° twice from there, regardless of which of the four families the result ends up closest to.

Taming the Accents: The Actual Saturation Move

Here's the same 205°/325°/85° triad again, built the way it would actually ship. The dominant hue keeps a real saturation instead of the maxed-out version above: #2580C1 (205°, 68% saturation, 45% lightness) reads as an ordinary, confident blue — and even that calmer version needs its own check before it carries text. White on #2580C1 lands at 4.25:1, just under the 4.5:1 paragraph-text minimum, better suited to a large button label than a block of copy.

The two accents move further: #D39CBC (325°, 38% saturation, 72% lightness) and #B2C992 (85°, 34% saturation, 68% lightness). Dark text at #1a1a1a clears 7.7:1 on the first and 9.7:1 on the second, both comfortably past the AAA threshold — a lighter, less saturated swatch is what actually gives text somewhere to sit.

:root{
  --triad-dominant: #2580C1;
  --triad-accent-1: #D39CBC;
  --triad-accent-2: #B2C992;
}

That specific jump — roughly a third to half the saturation, twenty to thirty points more lightness — is a starting ratio for this particular base hue, not a formula to paste onto every triad. Check the real pair every time — the wheel can tell you the hue relationship, not the contrast ratio.

Put the Triad Through Its Paces

Everything above is checkable in a few minutes, in roughly the order it actually gets built: settle the geometry first, assign the roles second, then verify the one number a wheel was never going to show you.

Open Harmony and switch to the Triadic tab. Drag the hue ring to your base color and copy the three hex codes it generates — that's the geometry half of the job finished.

Head to Palettes and generate a batch in a style close to your mood. Click into the one whose neutrals fit, then swap its accent slots for your triad's exact hex values before exporting — the structure comes from the generator, the hues come from you.

Before any of it ships, run every text-on-color pairing through Contrast checker, including the dominant hue. A scheme built on “balance” can still fail 4.5:1 more often than the name suggests.