Triad of Colors: What a Triadic Scheme Actually

Updated September 2026 · Written and maintained by the Progression Agency strategy team

A triad is three hues spaced 120 degrees apart on the color wheel — even spacing, maximum separation, equal weight. That is the entire definition, and it is also the reason most triadic palettes look wrong: three colors of equal strength compete rather than cooperate. This page covers the geometry, the primary and secondary triads, how the rule changes between RYB and RGB, and the hierarchy that turns a theoretically correct triad into something usable.

What is a triad of colors?

Three hues spaced evenly around the color wheel, 120 degrees apart. That even spacing is the whole definition — everything else about a triadic scheme follows from it.

Pick any hue, then take the two that sit a third of the way around the wheel in each direction, and you have a triad. Red, yellow and blue is the best-known example because it is the primary triad of the traditional artists’ wheel, but the rule applies from any starting point: yellow-green, red-orange and blue-violet is equally a triad.

The reason designers reach for it is that even spacing produces maximum contrast between three colors while keeping them in balance. No hue is closer to any other, so none of them reads as subordinate. That is also the scheme’s central difficulty, and the reason most triadic palettes in the wild look loud.

The geometry

An equilateral triangle inscribed in the color wheel. Rotate it to any position and the three points it touches are a triad.

Why 120 degrees

Because three colors evenly dividing a 360-degree wheel are 120 degrees apart by definition. There is nothing perceptual about the number; it is arithmetic.

What it guarantees

Maximum hue separation for three colors, and equal visual weight between them if saturation and value are held constant.

What it does not guarantee

Harmony. Three maximally separated hues at full saturation compete rather than cooperate, which is why the scheme needs handling.

Which wheel you are using matters

The RYB artists’ wheel and the RGB screen wheel place hues differently, so the same rule produces different triads on each.

What is the primary triad, and what is the secondary triad?

On the traditional RYB wheel, the primary triad is red, yellow and blue. The secondary triad is the three colors made by mixing adjacent pairs of those: orange, green and violet.

These are the two triads people mean when they use the terms without qualification, and the distinction is straightforward once the wheel is in front of you.

The primary triad is the source set — on the subtractive wheel taught in art education, the three hues that cannot be mixed from others. The secondary triad colors sit exactly between them: orange between red and yellow, green between yellow and blue, violet between blue and red. Because each secondary sits midway between two primaries, the secondary set is itself evenly spaced, which is why it is also a triad rather than merely a group of three colors.

There is a third layer. Mixing a primary with an adjacent secondary produces a tertiary hue, and the six tertiaries form two further triads. That is where the useful, less obvious palettes live.

How is a triadic scheme different from complementary, analogous and split-complementary?

By how many hues it uses and how far apart they sit. Analogous colors are adjacent, complementary are opposite, split-complementary softens the opposition, and triadic spreads three evenly.

The four standard relationships are all just descriptions of position on the wheel, and knowing which one you are using tells you what problem you will have to solve.

Why do most triadic palettes look wrong?

Because all three hues are used at equal saturation and equal quantity. A triad needs one dominant color, one supporting, and one used sparingly as an accent.

This is the single most useful thing to know about the scheme. The wheel tells you which three hues are a triad; it says nothing about how much of each to use, and that is what determines whether the result looks designed or looks like a toy packaging brief.

The convention that works is roughly sixty, thirty, ten — one hue carrying most of the surface, a second doing structural work, and a third appearing only where you want the eye to go. Applied to a triad, that turns three competing colors into a hierarchy.

1. Choose which of the three is dominant before anything else. That decision does more for the result than the choice of triad.
2. Desaturate the two supporting hues, or shift their value, so they sit behind the dominant one rather than beside it.
3. Reserve the third hue for accents — calls to action, highlights, small areas. Its power comes from scarcity.
4. Add neutrals. Almost every successful triadic palette in practice is really two neutrals plus a triad used at varying strength.
5. Vary value as well as hue. Three colors at the same lightness will fight regardless of how they are balanced.
6. Check the palette in grayscale. If the three hues convert to similar grays, the design has no contrast for anyone with reduced color vision and none in a black-and-white context.
7. Test the accent on both light and dark backgrounds, because a hue that pops on white can disappear on charcoal.

Does the triad rule work the same on screen as on paper?

No, and this trips people up constantly. RGB and RYB place hues in different positions, so the same 120-degree rule produces different sets.

The wheel taught in art education is a subtractive RYB model, built around how pigments mix. Screens are additive RGB, and print is subtractive CMYK. Their wheels are genuinely different: on an RGB wheel, red, green and blue are 120 degrees apart and form the primary triad; on an RYB wheel, green is a secondary.

Practically, this means a triad picked from an art-education wheel and then entered as hex values will not be evenly spaced in the color space the screen actually uses, and vice versa. Neither is wrong. But you should know which model your tool is using, because most digital color pickers work in HSL or HSB, which are RGB-derived.

How do you build a triadic brand palette that survives contact with reality?

Start from one brand color you are committed to, derive the other two, then immediately break the symmetry by adjusting saturation and value until there is a clear hierarchy.

A brand palette has jobs a color-theory exercise does not: it has to work at 16 pixels and at billboard size, on light and dark backgrounds, in print and on screen, and it has to remain legible for people with color vision deficiency. Those constraints eliminate most theoretically correct palettes.

Anchor to the color you already own

Most brands are not starting from nothing. Take the existing brand color as the fixed point and derive the triad from it.

Derive, then adjust

The mathematically exact triad is a starting position, not an answer. Shifting a hue ten or fifteen degrees to avoid an unwanted association is normal practice.

Assign roles explicitly

Dominant, supporting, accent. Write it down, because without it every designer who touches the brand will make a different assumption.

Build tints and shades

Three hues is not a palette. Each needs a range of values before it can handle interface states, backgrounds and type.

Add true neutrals

A warm or cool gray family derived from the dominant hue will hold the system together far better than pure gray.

Check contrast ratios

Text and interactive elements have accessibility contrast requirements. A beautiful triad that fails them is not usable.

Check color vision deficiency

Red-green triads in particular can collapse for a significant share of viewers. Simulate before committing.

Test in the real contexts

On a phone in daylight, in print on uncoated stock, in a presentation projected badly. Palettes fail in specific places.

Where does a triadic scheme genuinely work well?

Anywhere you need three clearly distinguishable categories, and in brand work where energy and playfulness are the intended signal.

The scheme’s defining property — three maximally separated hues — is exactly what some jobs require. Data visualization with three series, wayfinding with three routes, a product range with three tiers: in all of these, distinguishability is the requirement and a triad delivers it directly.

In brand identity, triads read as energetic, informal and confident. That is why they appear so often in children’s products, sport, food and technology aimed at consumers, and so rarely in law, finance and luxury, where the intended signal is restraint.

• Data visualization with exactly three series that must never be confused.
• Wayfinding and signage with three routes, zones or levels.
• Product ranges where tiers need to be distinguishable at a glance on shelf.
• Interfaces with three parallel states or categories, such as status indicators.
• Brand identities intentionally signalling energy, play or accessibility.
• Editorial design where sections need color coding.
• Educational material, where the primary triad’s familiarity is an advantage rather than a cliche.

Where does it fail?

In categories where restraint is the message, and in any situation where the three hues have to coexist at similar sizes without a hierarchy.

The failure is usually not the palette but the application. Three equally weighted hues on one surface will always feel unresolved, and adding a fourth color to fix it makes it worse rather than better.

Luxury and premium positioning

Restraint is the signal, and a triad is the opposite of restraint. Monochromatic or near-neutral schemes dominate this space for a reason.

Dense information design

Three strong hues across a data-heavy interface produce visual noise. Use one hue with value variation instead.

Anything requiring long reading

Colored surfaces behind body text reduce legibility, and three of them fragment the page.

Small-scale application

At favicon or app-icon size a triad usually reduces to mud. One hue plus a neutral survives the reduction; three do not.

Where accessibility is critical

Some triads collapse under common forms of color vision deficiency. Verify rather than assume.

When it is chosen to look designed

A triad picked because a tool suggested it, with no reason behind the dominant choice, reliably looks arbitrary — because it is.

How do color-picker tools generate triads, and should you trust them?

By rotating the hue value 120 degrees in each direction and holding saturation and lightness constant. That is arithmetically correct and perceptually naive.

Every palette generator does the same simple operation, which is why they all produce similar results from the same input. The limitation is that equal hue rotation in HSL does not produce equal perceived difference, because human sensitivity to hue change is not uniform around the wheel — we discriminate far more finely in some regions than others.

The consequence is that a mathematically perfect triad can contain two colors that look similar and one that looks unrelated. Perceptually uniform color spaces address this, and professional color tools increasingly work in them. For most brand work, the practical answer is simpler: generate the triad, then adjust it by eye, and trust your eye over the arithmetic.

A short glossary, because the terms get used loosely

Hue, saturation, value, tint, shade and tone all mean specific things, and most palette arguments are really vocabulary problems.

Getting these straight makes it much easier to say what is actually wrong with a palette rather than saying it feels off.

• Hue — the position on the color wheel. Red, green, blue-violet. This is what a triad describes and the only thing it describes.
• Saturation — how intense or pure the hue is, from vivid to gray.
• Value or lightness — how light or dark it is, independent of hue.
• Tint — a hue with white added, raising value and usually lowering saturation.
• Shade — a hue with black added, lowering value.
• Tone — a hue with gray added, lowering saturation while holding value.
• Chroma — a more precise term than saturation, used in perceptual color spaces.
• Temperature — the warm or cool reading of a hue, which is perceptual rather than physical.
• Contrast ratio — the measurable luminance relationship between two colors, used for accessibility thresholds.
• Gamut — the range of colors a given device or process can reproduce.

Palette architecture

Dominant, supporting and accent roles assigned explicitly, with tints and shades built out so the system can handle real interfaces. See what branding work costs.

Accessibility verified

Contrast ratios checked against the thresholds, and color vision deficiency simulated rather than assumed.

Cross-medium testing

Screen, print, large format and small. Palettes fail in specific contexts and it is cheaper to find that before launch.

Documentation people follow

A palette nobody can apply consistently is not a palette. Roles, values and usage rules written down.

Identity work end to end

Color is one component. See our branding services for how it fits with the rest.

Secondary colors, and why the answer depends on what you are mixing

The question that brings most people to a color wheel is what the secondary colors are, and the reason the answers online disagree is that there are two correct ones.

The traditional definition comes from pigment. Mix two primaries in roughly equal amounts and you get a secondary: red and yellow give orange, yellow and blue give green, blue and red give purple. That is the wheel taught in art classes and it describes what happens when physical colorants are combined, where each addition absorbs more light.

Screens work the opposite way. Light is additive, the primaries are red, green and blue, and mixing them in pairs produces cyan, magenta and yellow. So the 3 secondary colors on a monitor are not the ones on a paint wheel, and neither source is wrong — they are describing different physical processes. Almost every argument about this is two people using different models without saying so.

The practical consequence for design work is that a secondary colors chart is only usable once you know which wheel it was drawn for. A palette derived from the pigment wheel and then specified in hex values will not sit where you expect, which is a common and avoidable source of brand colors that look right in one medium and muddy in the other.

Define secondary colors by position, not by look

The definition is about origin — a hue made from two primaries — which is why the set changes with the mixing model.

Check which wheel a chart was drawn for

Images of secondary colors circulate without their model attached, and the two sets get combined into charts that are simply wrong.

Expect the print-to-screen shift

A palette built on the pigment wheel and then converted to hex rarely lands where the wheel suggested.

Treat them as a starting relationship

Orange, green and purple are a triad. Used raw they read as primary-school; the relationship is what is useful, not the literal values.

Green screen versus white screen

Two backgrounds that solve different problems.

Green screen vs white screen is a choice about what you intend to do in post. A green screen is for keying: the color is chosen because it is furthest from human skin tones, so the software can separate subject from background cleanly and replace it with anything. A white cyclorama is for a genuinely white background, or for a background that will be lit to a color, with no keying involved.

The practical differences follow. Green requires distance between subject and screen to avoid spill, and even lighting across the screen, which needs space and instruments. White requires more light overall to blow the background clean without lifting the subject, and it produces a cleaner edge on hair and fine detail because nothing is being keyed.

If the background will be replaced with footage, use green. If the background should read as white or as a solid color, light a white cyc: the result is better and there is nothing to fix.

Frequently asked questions