Triadic Colors
Three colors, 120° apart, perfectly balanced — the scheme painters call a triad. Enter any base color and get its two partners, computed in OKLCH so all three share the same visual weight. Free and 100% in your browser.
The geometry of a triad
Divide the color wheel into three equal slices and you get a triad: three hues separated by 120°, none dominating the wheel's geometry, each pulling equally against the other two. The most famous triad is the painter's primaries themselves — red, yellow, blue — which is why triadic schemes carry a faint echo of children's books and classic poster art: vivid, legible, fundamentally stable. Rotate the whole triangle and the balance survives at any starting hue.
Balanced hue, balanced weight
Classic wheel tools hand you three hues and quietly ruin the balance: rotated through HSL, one partner glows and another turns to sludge, because hue rotation in HSL scrambles perceived lightness. Here the rotation happens in OKLCH — all three colors inherit your base color's perceptual lightness and chroma, so the triangle is balanced not just in angle but in visual weight. Out-of-range results are gamut-mapped rather than clipped into different-looking colors.
The mute-two rule
Three saturated colors in equal doses is carnival, not composition. The professional pattern: promote one triad member to lead at full or near-full chroma, and demote the other two — mute them with the tones strip in the shades generator, shrink their area, or reserve them for icons and small accents. The scheme keeps its three-way tension while reading as designed rather than random. In interface terms the mapping is natural: lead color for primary actions, second for informational accents, third for highlights and illustrative touches.
Where triads work — and where they don't
- Brands and mascots: playful without chaos; a triad reads as friendly by construction.
- Data visualization: three categorical series with genuinely equal salience — no series accidentally shouts.
- Illustration and editorial: a rotated triad gives instant scene coherence.
- Not for: somber, luxurious or minimal moods — triads are inherently lively; a monochromatic or analogous scheme serves gravity better.
Save the three to My colors, put candidate pairs through the contrast checker before setting text, and see the lead color at work in the realistic color tester. Everything runs 100% in your browser.
Frequently asked questions
What are triadic colors?
Three colors spaced evenly around the color wheel, 120 degrees apart. Red–yellow–blue and orange–green–violet are the classic examples; any base color generates its own triad.
How is a triadic scheme different from split-complementary?
Both use three colors, but a triad spaces them evenly (120°/120°/120°), while split-complementary clusters two of them near the base color’s opposite (0°/150°/210°). Triads feel balanced and playful; splits feel directional and contrast-driven.
Should all three triadic colors be used equally?
No — that is the classic beginner mistake. Pick one lead color and mute or shrink the other two; the 60-30-10 distribution is a reliable starting point.
Do triadic schemes work for websites?
Yes, mapped to roles: lead color for primary buttons and links, the second for informational accents, the third sparingly for highlights. Verify text pairs in a contrast checker as lightness, not hue, decides readability.
Why do these three colors look more even than other generators’ triads?
The rotation runs in the perceptual OKLCH space, so all three keep your base color’s perceived lightness and vividness instead of drifting the way HSL rotations do.