Triadic Colors: How to Balance Three Bold Hues

A triadic scheme uses three hues spaced evenly around the color wheel, 120 degrees apart. Because no hue is close to another, every color in the palette is clearly different, and the result is bright, varied and full of energy. Because they're spaced evenly, no single pair dominates, which gives triads a natural sense of balance.

Understanding Color Harmony: 7 Ways to Combine Colors introduces the triadic rule in a few lines. This guide covers how to pick a triad you like, how to stop three bold hues from fighting, and how triads work in three very different settings, with the contrast numbers for text on every color.

Three evenly spaced hues

Take any base hue and add 120 and 240 degrees. The three points form an equilateral triangle on the wheel. Rotate the triangle and you get a different triad, but the relationship between the colors stays the same.

The best-known triads come from the primaries. On the digital wheel used by screens and by ColorOverflow's tools, red, green and blue sit at 0, 120 and 240 degrees, and cyan, magenta and yellow at 180, 300 and 60. On the traditional painter's wheel, the classic triad is red, yellow and blue. Primaries at full strength look childlike and loud, which is why most real triadic palettes rotate away from them or soften them.

How to pick a triad

1. Start from the color you're sure of, such as a brand color, and treat it as the base.
2. Find the other two hues at plus 120 and plus 240 degrees. The generator and the Color Wheel Explorer do this for you.
3. Rotate the base a few degrees at a time and watch the other two move. Small shifts can turn a garish triad into a pleasant one.
4. Decide early which of the three will lead. It's usually the base, but it doesn't have to be.

The generator's triadic rule gives the base and the second hue in two steps each (the color and a lighter tint) and the third hue as a single color. With a blue base it looks like this.

Notice that all three hues have the same HSL saturation and lightness, yet the green looks far brighter than the blue. Hues differ in how light they appear, so a triad straight from the rule is rarely balanced in lightness. That's the first thing to fix.

Keeping a vivid scheme balanced

One lead, two supporting

Three equally loud hues compete for attention. Pick one to lead and give it most of the colored area, then let the other two appear in smaller amounts. A split of roughly 60% neutral, 25% lead color and the rest shared between the two supporting hues works for many layouts.

Muted variants

Keep the lead color vivid and mute the others with lower saturation, or use their tints. The hue relationship stays, so the palette still feels like a triad, but the supporting colors stop shouting.

Different lightness for each role

Give the three hues different jobs by giving them different lightness: a deep version for text and headers, a mid version for buttons and a pale version for backgrounds. This also makes the palette readable in grayscale, which helps people with color vision deficiencies.

Example: a playful brand

Compared with a strict rule at one lightness, the coral and violet have been lightened and the green darkened, so the three feel equally weighted. Coral leads, as the logo and main buttons. Green and violet appear in illustrations, stickers and secondary buttons. It suits toys, learning apps, snacks and events.

• Coral #f5623d: white text 3.13:1 (large text only), near-black #111827 text 5.65:1.
• Green #2e9e44: white text 3.44:1 (large text only), near-black text 5.14:1.
• Violet #6e52e0: white text 5.32:1, passes AA.
• Near-black text on the pale coral #fde0d8: 14.21:1.

Mid-lightness coral and green don't take white body text. Use near-black labels on them, or keep white for large, bold headings only.

Example: illustration

Illustrators often use triads at low saturation. The full spread of hues gives variety for skin, plants, skies and clothing, while the muted values keep the picture cohesive. The violet works as the darkest value for outlines and shadows.

• Terracotta #c07259: white 3.62:1, near-black 4.89:1.
• Sage #509562: white 3.61:1, near-black 4.91:1.
• Violet #574785: white 7.93:1, good for captions on colored panels.
• Near-black text on the blush #eddad4: 13.16:1.

Example: a dashboard

A triad is a good source for three data series, because the hues are as far apart as three hues can be. For a chart on a white background, each color should reach at least 3:1 against white so lines and bars are easy to see. These three do: 5.89:1, 6.38:1 and 4.80:1. All three also carry white text, so they can be used for labels inside bars.

Keep the triad for data and use neutrals for the interface around it, so the charts stand out. Label series directly or add patterns and markers too, because some people can't tell certain hues apart, and color should never be the only way to read a chart.

Triadic or something else?

• If you want contrast but three hues feel like too much, try split complementary. Our guide to split complementary colors explains how it narrows the spread.
• If you need four or more distinct colors, look at tetradic schemes, covered in our guide to tetradic colors.
• If you want calm, a triad is the wrong tool. Analogous or monochromatic palettes are a better fit.

Quick checklist

1. Rotate the base until the three hues feel right together.
2. Choose one lead color and give it the most space.
3. Mute or tint the two supporting hues.
4. Give each hue a different lightness for a different role.
5. Add a neutral background and a dark neutral for text.
6. Check text contrast on every color. Mid-lightness hues often need dark text, not white.

Triads change character a lot between swatches and a real layout. Preview yours on a website, an app or a graphic before you commit.