Color Memory Game
By John K.··12 min read

Triadic colors: the triangle, the examples, and why it is never equilateral

What triadic colors are, the classic triads with hex codes, how a triad differs from complementary and analogous schemes, and the measured reason the famous red-yellow-blue triangle is lopsided on every screen.

Triadic colors are three colors spaced evenly around the color wheel, 120 degrees apart, forming a triangle. Red, yellow and blue is the example every guide reaches for. Orange, green and violet is the next one. The promise attached to the scheme is always the same: three colors, maximum variety, still balanced, because the spacing is equal.

The spacing is equal. The balance is not. I dropped the standard triads into the color-difference formula this site uses for scoring, and the triangle that every tutorial draws as equilateral turns out to be scalene almost everywhere on the wheel. In nearly half of all possible triads, one side is under half the length of another. The numbers are below, and once you have seen them the usual advice about picking a dominant color stops sounding like taste and starts sounding like a repair.

What triadic colors are

Take a color wheel. Put a dot anywhere on it. Move 120 degrees around the circle and put a second dot, then another 120 degrees for a third. Those three colors are a triad. Because 120 times three is 360, the third step lands you back where you started, which is what makes the arrangement a closed triangle rather than an arbitrary set of three.

The reason the scheme has a name at all is that it solves a specific problem. Two colors from opposite sides of the wheel give you contrast but no room to move. Three neighbors give you room but no contrast. A triad gives you three clearly different hues that are still related by a rule, so the group reads as deliberate. Johannes Itten formalized the version most people are taught, inscribing an equilateral triangle in his twelve-part color circle so that its points fell on red, yellow and blue.

The definition is geometric, which is why it survives every version of the wheel. Whatever hues your particular wheel puts at the twelve positions, the triad is whichever three sit four positions apart. That portability is also where the trouble starts, because the two wheels in common use do not agree on where the colors go.

The classic triads, with hex codes

These are the sets people are looking for when they search the term. Hex codes are the fully saturated version of each hue, so you can paste them straight into a design tool. If the notation is unfamiliar, how to read hex color codes covers it in a couple of minutes.

  • Primary triad: red, yellow, blue. #ff0000, #ffff00, #0000ff. The one from art class. Bold, slightly childlike, and used deliberately by anyone who wants that association. Superman, LEGO, Mondrian.
  • Secondary triad: orange, green, violet. #ff8000, #00ff00, #8000ff. The primary triad rotated by one step. Less loaded, more usable, and the set I would reach for first in almost any real project.
  • Tertiary triad one: red-orange, yellow-green, blue-violet. #ff4000, #80ff00, #5500ff. Warmer overall, with the blue-violet doing all the cooling.
  • Tertiary triad two: yellow-orange, blue-green, red-violet. #ffbf00, #00ffbf, #bf00ff. The set that looks most modern to my eye, largely because none of its members is a color anyone learned to name as a child.
  • The digital primary triad: red, green, blue. #ff0000, #00ff00, #0000ff. Not usually taught as a triad, because it belongs to a different wheel. It is, however, the only one of these sets that is genuinely 120 degrees apart on the wheel your screen uses.

You are not confined to full saturation. Every one of those sets still counts as a triad after you tint, shade or mute it, because the hue angles have not moved. A triad of dusty rose, sage and slate is the same geometry as red, green and blue, several steps quieter.

The red, yellow and blue problem

Here is the thing that took me a while to notice, and that I have not seen stated plainly anywhere. The most famous triad in the world is not a triad on the wheel most people are actually working in.

There are two wheels in circulation. The artist wheel, RYB, puts red, yellow and blue at the primary positions, and the secondaries land between them. The digital wheel, the one behind the hue slider in every design tool and the HSL and HSV color pickers on the web, is built from red, green and blue light. On that wheel the hues sit at fixed angles: red at 0 degrees, yellow at 60, green at 120, cyan at 180, blue at 240, magenta at 300.

Look at where the classic primary triad falls on that second wheel. Red at 0. Yellow at 60. Blue at 240. The gaps are 60 degrees, 180 degrees, and 120 degrees. That is not an equilateral triangle. It is not even close to one. Red and yellow are practically neighbors, while yellow and blue sit nearly opposite each other.

So when a tutorial tells you to open the color picker and grab three hues 120 degrees apart, and separately tells you that red, yellow and blue is the classic example, it is giving you two instructions that contradict each other. Follow the first and you get red, green and blue. Follow the second and you get a scheme that violates the rule the article just gave you. Both are defensible. They are answers to different wheels, and almost nobody says which one they are on.

My practical position: if you are painting or mixing pigment, use the artist wheel, because it predicts what happens when the colors touch. If you are picking colors in a piece of software, use the hue angles the software gives you, because that is the wheel the tool implements. Mixing the two is how people end up with a palette that follows every rule in the article and still looks wrong. The question of what two colors make has the same split running through it, for the same reason.

Where the triangle stops being equilateral

Equal angles on a wheel are not equal amounts of visible difference. I measured this for adjacent hues in the piece on analogous colors, and the effect is even larger at triad distances, because a triad has three sides to go wrong instead of one.

The measuring tool is CIEDE2000, which turns a pair of colors into a single number for how different they look. Roughly 1.0 is the smallest gap a trained observer can reliably detect. Anything past about 50 is unmistakably two different colors. I walked a fully saturated triad through all 120 distinct rotations and measured the three sides of each triangle.

The average gap between the longest and shortest side of a triad was 36 units. For scale, 36 units is itself a plainly visible color difference. The triangle is not slightly off. It is routinely lopsided by more than the entire distance between two colors you would call distinct.

The most balanced triad on the wheel, at 30, 150 and 270 degrees:

  • Orange #ff8000 to spring green #00ff80: ΔE 62
  • Spring green #00ff80 to violet #8000ff: ΔE 72
  • Violet #8000ff to orange #ff8000: ΔE 63

Sides of 62, 72 and 63. That is close enough to equilateral to deserve the name, and it is essentially the secondary triad. The worst case, at 94, 214 and 334 degrees, is a different animal:

  • Chartreuse #6fff00 to azure #006eff: ΔE 75
  • Azure #006eff to rose #ff006f: ΔE 41
  • Rose #ff006f to chartreuse #6fff00: ΔE 95

One side of that triangle is more than twice the length of another, from three colors that are perfectly, provably 120 degrees apart. The azure and the rose will read as a related pair while the chartreuse shouts from across the room. Nobody looking at the palette will describe it as balanced, and the geometry insists that it is.

Counting across all 120 rotations, 58 of them contain at least one side under ΔE 50 alongside a considerably longer one. Just under half of all triads have a weak leg. Picking one at random and trusting the rule is close to a coin flip.

The classic sets are not exempt. Red, yellow and blue measures 64, 103 and 53, a spread of 50. Red, green and blue measures 87, 83 and 53. Both are visibly scalene, and the red-blue side is the short one in each case, which is why so many red-yellow-blue designs end up leaning on the yellow to do the separating.

The lightness gap nobody mentions

Hue difference is only half the story, and I would argue it is the less important half. The other axis is lightness, and at full saturation the wheel is wildly uneven along it.

Lightness here means CIE L*, a scale from 0 for black to 100 for white, built so that equal steps look like equal steps. Every hue on the wheel has an intrinsic L* at full saturation, and they are not remotely similar:

  • Yellow #ffff00: L* 97, nearly as light as white
  • Cyan #00ffff: L* 91
  • Green #00ff00: L* 88
  • Orange #ff8000: L* 67
  • Red #ff0000: L* 53
  • Violet #8000ff: L* 41
  • Blue #0000ff: L* 32

Pure yellow and pure blue are 65 L* points apart. That is a larger lightness gap than between mid gray and black. Put them at equal area in a layout and the yellow will dominate completely, not because of anything to do with hue relationships but because one of them is three times as light as the other.

Now run the classic triads through that lens. Red, yellow and blue spans 65 L* points. Red-orange, yellow-green and blue-violet spans 54. Even the well-behaved secondary triad spans 41. There is no rotation of the wheel that produces three fully saturated hues of similar lightness, because the light-dark structure of the spectrum does not repeat every 120 degrees. Yellow is light, blue is dark, and no amount of rotating a triangle changes that.

This is, I think, the real explanation for the advice every triad tutorial ends with. You will be told to pick one color to dominate at about 60 percent, one to support at 30, and one accent at 10. It gets presented as a compositional convention, a matter of restraint. It is not. It is a correction for a defect in the scheme. The triad hands you three colors of grossly unequal visual weight, so you compensate by giving the heavy one less area. Sixty-thirty-ten is what you do after the geometry has already failed you.

Which suggests a better order of operations. Rather than picking three hues and then rationing the area, adjust the lightness first. Darken the yellow to an ocher, lift the blue toward a periwinkle, and you have a triad you can use at nearly equal weight because you removed the imbalance instead of hiding it. Munsell separated hue, value and chroma into independent axes over a century ago for precisely this reason: value is a dimension you are allowed to set on purpose, not a property you inherit from your hue choice.

Triadic vs complementary vs analogous

The three schemes are usually presented as equal options. Measured, they are not equal in strength, and the ranking is stable.

Averaged around the whole wheel, a pair of colors 180 degrees apart, a complementary pair, measures ΔE 92. A pair 120 degrees apart, a triad side, measures ΔE 69. Adjacent hues 30 degrees apart average about 20.

So a triad is not three complementary pairs. It is three contrasts of roughly three quarters the strength, arranged so that no two of them can pull directly against each other. That is a genuinely different instrument, and it explains the character of triadic work: busier than a complementary scheme, but never as sharp, because nothing in it is anyone else's true opposite.

  • Complementary is two opposites. Maximum tension, minimum flexibility. Use when one thing must beat another.
  • Analogous is neighbors. Calm, cohesive, prone to going flat and needing lightness to rescue it.
  • Triadic is three way separation. Lively and varied, prone to feeling scattered, and needing area control to rescue it.

The related question people ask next is about tetradic schemes, which use four colors, either as a rectangle or a square on the wheel. Everything above gets worse there. A square tetrad has four sides and two diagonals to keep balanced, and the lightness spread across four saturated hues is at least as bad as across three. If a triad needs a dominant color to work, a tetrad needs one badly enough that most tetradic palettes are really a complementary pair with two colors sitting quietly behind it.

How to build a triad that actually works

Taking the measurements seriously, here is what I would do instead of rotating a triangle and hoping.

  • Start from the secondary triad. Orange, green and violet, at 30, 150 and 270 degrees, is the most perceptually even triad on the wheel. If you want the scheme to do what the scheme promises, start there and adjust, rather than starting from red, yellow and blue and fighting it.
  • Check the weak side before you commit. Of the three pairs in your triad, one will be noticeably closer than the others. Find it. That is the pair you must never place next to each other at similar size, and it is where the palette will look muddy if it looks muddy anywhere.
  • Set lightness deliberately. Decide what L* each of the three should be before you fall in love with the saturated versions. Any color picker offering HSL will get you close enough with the L slider.
  • Then apply sixty-thirty-ten. It is still good advice. It is just the last step, not the first, and once you have fixed the lightness you will find you can push it toward fifty-thirty-twenty without the thing falling apart.
  • Do not mix wheels mid-decision. Pick RYB or the digital wheel at the start and stay on it. Most palettes that follow all the rules and still look wrong are palettes that switched wheels halfway through.

Feeling the distances instead of reading them

Every number above describes something your eye already knows and cannot articulate. The fastest way to convert it into intuition is to put your eye under a little pressure and watch where it fails.

Color Mixer is the most direct exercise for this. You build a target color out of red, green and blue light, which puts you on the digital wheel by force and makes the 120 degree relationships between the three channels concrete rather than diagrammatic. After a few rounds the reason red and blue are the short side of the RGB triad stops being a statistic.

Hue Sort attacks the other end, handing you a gradient with the middle shuffled and asking you to put it back. It is a browser version of the Farnsworth-Munsell chip test, and it will show you personally which arcs of the wheel you have resolution in and which you do not. If your weak region overlaps one side of a triad you are building, that side needs help regardless of what the geometry says. For the general technique, train your eye for color collects the drills that work.

The short version

Triadic colors are three hues 120 degrees apart on the wheel. The classic sets are red-yellow-blue, orange-green-violet, and the two tertiary triads. The scheme gives you variety with a rule attached, and it is genuinely useful.

What it does not give you is balance. The triangle is equilateral on paper and scalene in the eye, by an average of 36 ΔE, with one weak side in half of all triads. Fully saturated hues differ in lightness by up to 65 L* points, which no rotation can fix. The dominant-color rule everyone repeats is the patch for that, applied after the fact. Fix the lightness first and you will need less of the patch.

Then play a few rounds and find out how well you can actually place a hue on the wheel from memory. Most people are worse at it than they expect, and the gap between the wheel you were taught and the wheel you can see is where all of this lives.