Triadic and tetradic palettes without the rainbow mess
A worked tutorial on three- and four-hue palettes: when to reach for them, how to keep one hue in charge, and the saturation trick that prevents chaos.
When three hues earn their place
Triadic palettes (three hues evenly spaced on the wheel) suit products that need genuine variety: dashboards with multiple data series, playful consumer brands, illustrations. If your interface is mostly text and forms, you do not need three hues — a complementary or analogous palette will be calmer and easier to keep accessible.
Generate the triadic strategy from your primary and look at the raw output honestly. Three full-saturation hues at equal weight is the rainbow mess everyone fears. The palette is a starting set of directions, not a finished system — the next step is hierarchy.
One hue leads, the rest support
Elect a dominant hue (usually your brand color) and demote the other two to supporting roles: one for secondary accents, one reserved for special states like success or highlights. Then desaturate the supporters by 20–30% relative to the leader. Equal saturation is what makes multi-hue palettes feel chaotic; unequal saturation is what makes them feel designed.
Tetradic (four hues, two complementary pairs) follows the same law with stricter discipline: pick one dominant, one secondary, and let the remaining two appear only as rare highlights. Four equal hues never work in UI — they barely work in flags.
Tip
Convert the palette to grayscale mentally: if the three hues collapse to similar grays, they will also blur together for users with color blindness. Check with a simulator before you commit.
Lock it with neutrals and roles
Multi-hue palettes need stronger neutrals than simple ones, because the hues need somewhere quiet to sit. Define your surfaces, ink, and borders first, then place each hue into named roles: primary actions, secondary accents, data series one through three, status colors. A hue without a role gets deleted — that rule alone prevents rainbow creep as the product grows.
Finally, check text pairs per hue. With three or four hues, at least one will fail white text; plan its dark variant now rather than discovering it in QA.
Related free tools
Want to apply this right now? Open the color palette generator and try it with your own brand color — free, no sign-up.