Generate three-hue palettes with hues spaced evenly 120° apart. Triadic schemes are vivid but balanced — every hue family is represented without any two colors clashing head-on. Tint variants per hue make the set practical for real interfaces, not just color theory diagrams.
Settings
Generated locally in your browser — your settings and results never leave this page.
Three equal voices
The triad is the wheel’s democratic scheme: three hues at maximum mutual distance, no pair in direct opposition, every color family represented. The result is vivid but structurally balanced — nothing dominates by geometry, nothing clashes by geometry. It is the scheme of playfulness with discipline: board games, children’s brands, learning products, and any dashboard where three categories deserve equal visual citizenship.
Managing the energy
Full-chroma triads shout — three maximally-separated hues at full voice is a carnival. The professional deployments mute the democracy in execution while keeping it in structure: one hue leads at strength, the other two step back into tints (the generator’s variant rows exist for this), or all three drop chroma together for a “sophisticated triad” — the muted-primaries look that reads as heritage and craft. Structure survives muting; garishness does not.
Rotation as a design decision
The classic triads have personalities: primaries (red/yellow/blue) read as elementary and bold; secondaries (orange/green/violet) as retro warmth; the shifted triads in between escape both associations. Because the generator recomputes from any base, rotating your seed a few degrees auditions neighboring triads instantly — often the difference between “kindergarten” and “considered” is fifteen degrees.
The CVD check that triads specifically need
Triadic geometry regularly lands one pair near red/green territory, and 120° of hue separation does not guarantee survival under deuteranopia — lightness separation does. Run the trio through the Color Blindness Simulator; where the hardest pair scores low, stagger the lightness of those two members (the variant tints make this natural) and the triad becomes robust without losing its geometry.
Three classic triads, valued
The named triads designers reference constantly, computed at full strength on the HSL wheel:
| Triad | Hue 1 | Hue 2 | Hue 3 |
|---|---|---|---|
| Primaries (0°) | #ff0000 | #00ff00 | #0000ff |
| Secondaries (30°) | #ff8000 | #00ff80 | #8000ff |
| Jewel (15°) | #d44211 | #11d442 | #4211d4 |
| Muted (45°) | #cbac4d | #4dcbac | #ac4dcb |
Rows three and four are the practical lesson: dropping saturation and shifting the anchor by a few degrees turns the kindergarten primaries into palettes with names like “jewel” and “heritage”. Your own triad above responds to the same two edits — rotate the seed, then mute the two supporting hues.
How to use the Triadic Palette Generator
- Pick the base; two more hues land 120° apart each.
- Optional tints per hue soften the set.
- Export the trio.
Frequently asked questions
What character does a triadic scheme have?
Vivid balance: three hues evenly spaced means every color family is represented but none opposes another head-on. It is the scheme of playfulness done professionally – children's brands, games, education – and of dashboards needing three equal categories.
The three pure hues feel garish together – is that normal?
At full chroma, yes – equally-spaced full-strength hues shout. The craft is dropping two to tints/tones and letting one lead (the generator's variants exist for this), or reducing everyone's chroma a notch in OKLCH. Triadic structure with muted execution is a very sophisticated look.
How do I assign the three hues to UI roles?
Lead with the one matching your brand temperament; assign the most attention-grabbing (usually the warmest) to primary actions; the third takes secondary accents and illustration. Equal usage is the beginner mistake triads invite – resist.
Are triadic hues distinguishable under color blindness?
120° spacing helps but does not guarantee – a red/green/blue triad still collapses partially under deutan/protan vision. Run the trio through the Color Blindness Simulator; often rotating the whole triangle 15-20° fixes the worst pair at no aesthetic cost.
Why 120° exactly – what breaks at 110°?
Nothing snaps – the wheel is continuous – but even spacing is what delivers the "balanced" read; drift far enough and you have an analogous pair plus an accent, a different (also legitimate) structure. The Harmony Generator lets you compare the strict geometries.
Which classic combinations are triadic?
The primaries red/yellow/blue (pre-school energy), the secondaries orange/green/violet (retro warmth), and the screen primaries red/green/blue themselves. Comic-book coloring is essentially triadic doctrine, and fast-food branding leans hard on the red/yellow two-thirds of that first triad.
Can I build a full interface from one triad?
Yes: one hue supplies the neutral-adjacent structure (via heavy tinting), the second interactivity, the third highlights – each expanded by Shades and Tints. Add measured text colors from the Contrast Checker and the triad covers everything.
