Triadic color scheme for UI: three colors that stay distinct

Summary

A triadic color scheme uses three hues spaced evenly around the color wheel, 120° apart, so they form an equilateral triangle. Red, yellow and blue is the textbook example; so is orange, green and violet. The three colors are as different from each other as three colors can be while still being balanced, which is why the scheme is the natural choice for anything that needs three distinguishable signals — chart series, categories, status states — and a poor choice for a page that needs one thing to stand out. This guide covers the theory in a section, then the part that matters for interfaces: which hue leads, how to keep the other two from fighting it, how to check the trio for color-vision deficiency, and what changes in dark mode. The palette generator builds a triadic set from any seed if you want to follow along.

• Triadic means three hues at 120° intervals — the seed, seed + 120°, seed + 240°.
• In UI, one hue is the primary; the other two are signals, not co-equal brand colors.
• The scheme's real strength is distinguishability: three triadic hues separate even for most color-blind readers.
• Use it for data and categories; use complementary or split-complementary for emphasis.

What is a triadic color scheme?

On the HSL color wheel that CSS and every design tool use, a triadic scheme is the seed hue plus the two hues 120° and 240° away. Because the three points are equidistant, no pair is closer than any other: every color in the trio contrasts with the other two by the same amount. That symmetry is the scheme's whole character. A complementary pair has one relationship (opposition); a triad has three equal ones.

The classic triads are the primaries — red, yellow, blue on the painter's wheel — and the secondaries, orange, green and violet. In HSL those are approximately 0°/120°/240° (red, green, blue — the additive primaries, which is what a screen actually mixes) and 30°/150°/270°. Any rotation works: a teal seed at 180° gives a triad of teal, red-violet and yellow-orange.

Two clarifications, as with any wheel scheme.

First, the wheel matters. The artists' wheel puts yellow opposite violet; the RGB/HSL wheel puts yellow opposite blue. Generators, including Nodlume's, work in HSL, so a "triadic" set from a tool is a 120° rotation in HSL. The types of color schemes guide has the full list of rules and their angles.

Second, a triad is three hues, not a palette. An interface also needs a background, a surface, a text color, a muted tone and a border, and none of those should be a fourth hue. They should be near-neutrals tinted toward the primary, which is what keeps a three-hue interface from looking like a flag. The semantic palette guide covers the eight roles; the short version is that a triadic UI palette is three hues and five grays that lean toward the first one.

Where triadic schemes belong in an interface

Triadic is the data-visualization scheme. Three hues 120° apart read as three genuinely different categories — not "blue and slightly different blue" — and that is exactly what a chart legend, a kanban board, a tag system or a set of status pills needs. If an interface has three things that must never be confused, a triad is the safest way to color them.

It is a poor scheme for emphasis. On a marketing page, three equally weighted, equally saturated hues cancel each other: nothing is the accent because everything is. The eye has no hierarchy to follow. Products that want one button to jump want a complementary or split-complementary scheme, where the contrast is concentrated in one place.

The useful middle ground, and the one most product interfaces land on, is a triad used as a hierarchy: one hue is the brand primary across buttons, links and focus rings; the second is a secondary or "success" signal; the third is a warning or highlight. The scheme supplies the distinctness; the weighting supplies the emphasis.

Choosing the primary

If the brand is decided, the brand color is the primary and the triad is built from it. If not, the same tests as for any scheme apply, with one triad-specific addition.

Which one reads as a surface? Cooler, darker hues — blue, teal, violet — sit behind content; warm saturated hues want to be objects. A blue-led triad (blue, red-orange, yellow-green) gives you a calm primary and two loud signals, which is the right way round. A yellow-led triad gives you a primary that fails contrast on white and two accents that both look more important than it.

Which one has room for states? The primary needs hover, pressed, disabled and focus variants that still read as the same color. Blue, teal, violet and most greens have the lightness range; yellow and cyan do not.

Which two are free for status? This is the triad-specific test. If your triad contains a red and a green, they are your error and success colors whether you like it or not, because users have learned that mapping. Choose a primary whose two partners are a usable red-ish and green-ish — a blue or violet seed does this naturally — or accept that status colors must come from outside the triad and be kept visually quieter than the three brand hues.

Weighting three colors: 60/30/10

The rule of thumb for a triad in an interface is 60/30/10 by area among the colored elements, with the neutrals making up most of the screen regardless.

• Primary (60% of the color) takes the main call to action, links, active navigation, focus rings, and the first chart series.
• Secondary (30%) takes supporting actions, the second chart series, selected states in secondary controls, informational badges.
• Accent (10%) takes one thing per screen: the promotional chip, the highest-priority alert, the third series when a chart has three.

At those weights the trio reads as a designed system with a clear hierarchy. At 33/33/33 it reads as a toy.

The palette generator encodes this: the seed becomes primary, the +120° hue becomes secondary, and the +240° hue becomes accent, with the accent's lightness lifted a little so it reads as a highlight rather than a second surface. Rotate the assignment if your brand color should be the scarce one — the wheel lets you drag any anchor — but keep the weights uneven.

Making the trio work: saturation and lightness

A triad is a hue relationship. Saturation and lightness are where you tune how loud it is, and they are the controls a 120° rotation does not decide.

Desaturate the two signals, not the primary. Keep the primary at full working saturation and pull the secondary and accent toward gray by 20–40%. They stay distinguishable — the hue difference is enormous — but they stop competing with the primary for attention. Many "sophisticated" three-color palettes are a triad with two muted corners.

Stagger the lightness. Three hues at the same lightness become three identical grays when desaturated, which is the test for color-vision deficiency. Make the primary mid-dark, the secondary mid, and the accent light (or the reverse), so that each pair differs in lightness as well as hue. The staggered set also separates better on a chart, where adjacent bars need an edge.

Never stack two triad hues as foreground and background. Yellow-green text on a blue button, red-orange icons on a green fill: the hues are maximally different but the lightness often is not, and the result vibrates and fails contrast. Put white or near-black text on every colored fill. The theme generator derives a -foreground for every brand role for this reason.

Checking the scheme

Three checks catch nearly every triad problem.

Contrast on every text pairing. Body text needs 4.5:1 and large text 3:1 against the surface it sits on. Check white or dark text against each of the three fills; every colored button needs a passing foreground. If one hue cannot hold a passing foreground at its working lightness, that hue should not be a fill — use it as a border, a dot or a line instead.

Grayscale. Desaturate a screenshot. If any two of the three become the same gray, they differ only in hue and roughly 8% of men will see them as one color. Push their lightness apart until three distinct grays appear.

Simulate deuteranopia. Red-green deficiency is by far the most common. A triad built from blue is robust because blue is preserved and its two partners land on either side of the red-green axis; a triad built from red (red, green, blue) collapses red and green together for these readers. Every browser's dev tools can simulate this — Chrome's rendering panel has it under "Emulate vision deficiencies". If a red-led triad is unavoidable, add a second channel: an icon, a pattern or a label alongside the color.

Triadic schemes in dark mode

On near-black, saturated fills become light sources, and three of them glow harder than two. Two adjustments keep the scheme recognizable.

Lift lightness, hold hue. Each of the three hues needs to move toward 60–70% lightness to reach 4.5:1 as text or as a fill with dark text. Do it uniformly, so the triangle on the wheel does not deform — the hues stay 120° apart, only their lightness changes. Dropping saturation instead produces a washed-out pastel set that no longer reads as the brand.

Cut the accent's area. Bright colors on dark surfaces carry more visual weight, so the 10% accent may want to be 5%. A single badge and one chart series is usually enough.

The theme generator derives the dark side from the light roles rather than asking you to pick it again, which is what keeps a triad the same triad in both modes.

A worked example

Take a seed of #4f46e5, the palette generator's default indigo, at roughly hue 243°. The triad is indigo, plus a hue at 3° (a red) and one at 123° (a green). That is a fortunate triad: the two partners are a natural error red and success green, so status and brand share one system without collision.

Weight it 60/30/10 in reverse of the usual reading: indigo is the primary on buttons, links and the first chart series; the green is the secondary — success states, the second series, confirmations; the red is the 10% accent — errors, destructive actions, the one alert that matters. Desaturate the green by 30% so it does not compete with indigo, keep the red at full saturation because it must be seen, and stagger the lightness so grayscale gives three distinct values. Check white text on all three fills (indigo and red pass; the green needs a darker shade for text on it, so use it as a lighter fill with dark text). In dark mode all three lift together.

That is the whole method. The palette generator produces the eight roles from any seed with the triadic rule, and every page in the CSS color names reference shows the triadic partners of a named color alongside its complement and analogous neighbors.

Q&A

Question: What is a triadic color scheme?

Short answer: Three hues spaced evenly around the color wheel, 120° apart, forming an equilateral triangle — the seed, the seed + 120° and the seed + 240°. Red, yellow and blue is the classic example. The three colors are balanced and maximally distinct from one another.

Question: Are triadic colors good for websites and apps?

Short answer: Yes for anything that needs three distinguishable signals — charts, categories, status — and only with uneven weighting for anything else. Give one hue the primary role, use the second as a supporting signal and the third as a scarce accent, roughly 60/30/10. Three equal colors cancel each other's emphasis.

Question: What is the difference between triadic and split-complementary?

Short answer: Split-complementary is the seed plus the two neighbors of its complement, at 150° and 210°. Its two accents are related to each other and both contrast strongly with the seed, which suits emphasis. Triadic spreads the three hues evenly, so every pair contrasts equally, which suits categories.

Question: Are triadic colors accessible for color-blind users?

Short answer: Usually better than most schemes, because 120° of hue separation keeps the three apart for most deficiencies — provided the lightness is staggered too. A triad containing both a red and a green is the exception: red-green deficiency merges them, so add an icon or label as a second channel.

Question: How do triadic schemes change in dark mode?

Short answer: The hues stay 120° apart; all three lift in lightness to pass contrast on a dark background, and the accent covers less area because bright colors weigh more on dark surfaces. Deriving the dark values from the light roles keeps the triangle intact.