Triadic, square, and split-complementary: multi-color schemes

Short answer

Triadic, square, and split-complementary schemes place a regular geometric shape on the color wheel and pick the hues at its corners; three or four distinct hues give a livelier, richer palette than monochrome harmonies do. But following a scheme rule doesn't guarantee a beautiful palette: the rule only selects hues, it doesn't say anything about lightness, saturation, or how much area each one gets, and it produces completely different colors depending on which wheel it's applied to. A scheme is a starting point; what actually builds the palette is choosing a dominant color and separating the lightnesses.

The logic of geometric selection

In DT-04, you saw how the color wheel was invented; in DT-08, complementary pairs; and in DT-09, harmonies built from neighboring colors. Multi-color schemes take this idea one step further: choosing three or four hues that sit far apart on the wheel, within a specific geometry.

The triadic scheme consists of three hues placed at equal intervals around the wheel, 120 degrees apart from each other. On painters' red-yellow-blue wheel, this is red, yellow, and blue themselves, or the trio of orange, green, and purple.

The square scheme consists of four hues placed at equal intervals, 90 degrees apart, around the wheel. A more flexible version of this is the rectangle scheme: two complementary pairs placed at unequal angles to each other. In both cases, the palette carries four distinct hues and includes complementary pairs.

The split-complementary scheme combines not a color's complement itself but the complement's two neighbors. For example, instead of the orange across from a blue, you choose the red-orange and yellow-orange on either side of that orange. This keeps the tension of the complementary pair but softens it somewhat.

The same scheme, different wheels

The first problem with these schemes is that they depend on which wheel they're applied to. Each wheel arranges hues its own way; DT-04 told the history behind that difference. That's why what's called a "triadic scheme" produces completely different colors depending on the wheel.

You can see this with numbers. The trio made from the screen's primary colors — red (#FF0000), green (#00FF00), and blue (#0000FF) — forms a perfect triadic scheme on the screen's color wheel. The red, yellow, and blue trio built on painters' wheel, for example #D32F2F, #FBC02D, and #1976D2, is likewise a perfect triangle on that wheel. But when you measure these colors' hues in OKLab, a space arranged according to the eye's perception, the picture changes. The screen trio's hue angles are 29, 142, and 264 degrees; the angles between them are 113, 122, and 125 degrees — close to equal. The painters' trio's hue angles, meanwhile, are 26, 84, and 253 degrees; there are only 58 degrees between red and yellow, and 169 degrees between yellow and blue. The painters' triangle isn't a triangle among the hues the eye actually sees.

This isn't a flaw, it's a reminder: a scheme's geometry is the geometry of the wheel it's built on. Before you build a scheme, you need to know which wheel you're working with — paint or screen.

Why isn't a rule a guarantee?

The question on the lesson card gets answered here: why doesn't following a scheme rule guarantee a beautiful palette?

The first reason is that the rule selects only hue. A color is its hue together with its lightness and saturation. The same three hues can build very different palettes. If you choose three colors with hue angles of 30, 150, and 270 degrees in OKLCh — a perfect triangle — at the same lightness and the same saturation, you get #D76A5A, #43A65F, and #6E89E4: three vivid colors, equal in weight, competing with each other. If you choose the same three hues at different lightnesses and saturations, you get a dark navy (#27356E), a medium coral (#ED7665), and a very light, pale mint green (#CEEFD3). Both are the same triadic scheme; but the second one easily splits the roles of heading, accent, and background on a page, while the first looks as noisy as a carnival poster.

The second reason is that the rule doesn't specify area proportions. When three or four colors are used in equal areas, the eye doesn't know where to look. In most harmonious palettes, one color dominates, one supports it, and one is a small accent.

The third reason is that harmony judgments depend on factors beyond hue. In a study published in 2006, Li-Chen Ou and Ronnier Luo had observers evaluate 1,431 color pairs built from 54 colors systematically selected from the CIELAB space, and developed a quantitative harmony model that predicts two-color harmony. Models of this kind take as input not just a color's hue but also its lightness and chroma; in other words, position on the wheel is only part of harmony.

A detail from the preference experiment in DT-09 is useful here. Judged as a whole, color pairs whose hues sit farthest apart aren't liked very much; but a small colored shape is liked more the farther its hue sits from the background behind it. Opposite hues work well for a small accent, not for an entire palette.

Building a multi-color scheme step by step

The first step is choosing the wheel you're working with: painters' wheel for paint and print, the screen wheel for screens, or a space like OKLCh that distributes hues according to perception.

The second step is choosing the dominant color. One of the scheme's corners becomes the color that carries the brand's or the work's identity, and it takes up more than half the area.

The third step is adjusting the lightness and saturation of the other corners relative to the dominant color. The supporting color is chosen noticeably lighter or darker than the dominant color; the accent color becomes the most saturated member and takes up the smallest area.

The fourth step is adding a neutral. Three or four vivid hues tire the eye without a generous neutral background; a broken gray, beige, or cream lets the scheme breathe.

The fifth step is testing the palette in grayscale. If all the scheme's members collapse into the same gray, the lightnesses haven't been separated; no matter how neat the scheme is, the page won't read.

Example — the hidden member of the palette: skin

A sports club picks a split-complementary scheme for its new-season campaign: the dominant color is navy, and across from it sit orange's two neighbors, brick red and mustard yellow. The posters will use large portraits of athletes with different skin tones.

There's something the designer has to account for: human skin, from its lightest to its darkest, sits in the orange slice of the wheel. That means skin is the fourth, invisible member of the scheme in these posters — and it sits right on the complementary side, between brick and mustard. The result can cut both ways. On the positive side, the navy background makes the skin's warmth look more vivid than it is, through simultaneous contrast. On the risky side, if brick and mustard areas are placed right next to faces, the skin gets lost between those two colors and a face can turn into a smear of color.

The solution is to treat skin's position as part of the scheme: keep the dominant navy behind and beside the faces, and use brick and mustard away from the faces, as stripes, text, and small accents. This rule is the same for every skin tone; but each different skin tone blends with brick and mustard to a different degree, so every portrait needs to be checked side by side, individually.

Common misconception

Summary

1. Triadic, square, and split-complementary schemes place a regular geometric shape on the color wheel and select the hues at its corners; these hues differ widely depending on the wheel used.
2. A scheme rule only selects hue; because it says nothing about lightness, saturation, and area proportion, the same scheme can produce either a noisy or a harmonious palette. Experiments show that harmony depends on lightness and chroma as well as hue.
3. A good multi-color scheme is built from a dominant color, a supporting color and an accent color with separated lightnesses, and a generous neutral; in work that features people, skin is accounted for as the palette's hidden member.

Test yourself

1. (Easy) How many degrees apart are the hues in a triadic scheme on the wheel?
2. (Easy) How is a split-complementary scheme built?
3. (Medium) Why doesn't following a scheme rule guarantee a beautiful palette?
4. (Medium) What is the dominant color, and why is it necessary in multi-color schemes?
5. (Hard) What shows up when the triangle built from the painter's wheel's three primary colors is measured in OKLab, and what does that mean?
6. (Hard) Why is skin considered the "hidden member of the palette" in a campaign that uses human portraits, and how does the designer manage this?

Answers

1. 120 degrees; the hues sit at the corners of an equilateral triangle inscribed in the wheel ("The logic of geometric selection").
2. By choosing a color together with the two neighbors of its complement, instead of the complement itself ("The logic of geometric selection").
3. The rule only selects hues; it doesn't specify lightness, saturation, or area proportions, and it gives different colors depending on which wheel it's applied to. The same hues can build a noisy palette at equal lightness and saturation, or a harmonious one with separated lightnesses; harmony judgments also depend on lightness and chroma besides hue ("Why isn't a rule a guarantee?").
4. It's the color that takes up the largest share of the area and sets the mood for the whole; when three or four colors are used in equal areas, the eye doesn't know where to look ("Why isn't a rule a guarantee?").
5. The hue angles come out to 26, 84, and 253 degrees; there are 58 degrees between red and yellow, and 169 degrees between yellow and blue. This shows that the triangle on the painters' wheel isn't equally spaced among the hues the eye perceives, and that a scheme's geometry belongs to the wheel it's built on ("The same scheme, different wheels").
6. Skin, from its lightest to its darkest, sits in the orange slice of the wheel and shows up in portraits as a member of the palette; if hues close to it are placed next to it, it can get lost. The designer keeps the dominant color, which contrasts with skin, around the faces, uses hues close to skin as accents away from the faces, and checks every portrait individually ("Example — the hidden member of the palette: skin").

Sources

• Ou, L.-C. and Luo, M. R., "A colour harmony model for two-colour combinations," Color Research and Application 31(3): 191–204, 2006.
• Schloss, K. B. and Palmer, S. E., "Aesthetic response to color combinations: preference, harmony, and similarity," Attention, Perception, & Psychophysics 73(2): 551–571, 2011.
• Itten, J., Kunst der Farbe, 1961.

Next step

DT-11 asks the same question from the angle of contrast: it separates out the seven distinct types of contrast the eye catches in a palette, from light versus dark and warm versus cool to saturation and quantity, and shows how each one brings a palette to life. DT-12, meanwhile, turns this lesson's dominant-color idea into a proportion: it covers the 60-30-10 rule from interior design, Goethe's quantity balance based on colors' visual weight, and ways to deliberately break that rule.