1001Ferramentas
🔺Generators

Paleta Triádica

Gera 3 cores espaçadas 120° na roda HSL a partir de uma cor base.

3 cores

Triadic palettes: three voices in balance

A triadic palette uses three hues spaced equally — 120° apart — on the color wheel. The HSL math is one step beyond complementary: H1 = X, H2 = (X + 120) mod 360, H3 = (X + 240) mod 360. The result is vibrant and energetic but more balanced than a complementary pair, because no two hues sit in direct opposition. Classic triads include the painters' primaries Red-Yellow-Blue (RYB), the printers' Cyan-Magenta-Yellow (CMY), and the secondary triad Green-Orange-Purple.

Why triads feel alive

Three hues mean three "channels" the eye can track independently — perfect for categorical data visualization (one color per series). The arrangement is also psychologically rich: there is always a warm hue, a cool hue, and a third that mediates. Johannes Itten in his Bauhaus color theory ranked triadic harmony among the most stable: three forces in equilibrium, like a tripod.

Brands that own a triad

  • Google — RYBG logo leans triadic (with green added as a fourth), reading youthful and accessible.
  • Burger King — orange/red/blue, comfort food meets approachability.
  • Toy Story — saturated primaries straight from the RYB triad, signalling childhood joy.
  • Superman — red, blue, yellow on every superhero comic since 1938.

The 60-30-10 rule

Three saturated primaries at full strength look cartoonish — fine for kids, wrong for B2B. Apply the 60-30-10 rule of interior design: 60% dominant color, 30% secondary, 10% accent. Desaturate the two supporting hues, push the dominant one to a sober tone, and the same triad reads as an adult brand. This is how Mondrian's Composition with Red, Blue and Yellow (1930) keeps three primaries from screaming — the white grid acts as the 60% neutral.

Pitfalls

  • Three highly saturated hues at equal weight create visual chaos — modulate at least two.
  • Triads can fail WCAG on individual pairs even when the whole palette looks balanced — test every text/background combination separately.
  • For categorical charts, never rely on color alone; add a shape or pattern, especially for the green/red pair.
  • If you need a sober, B2B-serious tone, a complementary or analogous palette is usually a better fit.

FAQ

Do the three colors need identical saturation and lightness? No — modulate at least one. Pure equal-weight triads look like a kindergarten poster; adult brands desaturate two of the three.

Will the palette pass WCAG? Evaluate each text/background pair separately. A triad can look harmonious overall while a specific yellow-on-white combination fails 4.5:1.

Is triadic right for a serious B2B brand? Usually no. Start with complementary or analogous for fintech, legal, enterprise SaaS. Triadic shines for consumer, kids, entertainment, and education.

How is triadic different from tetradic? Triadic uses three hues 120° apart; tetradic uses four hues forming a rectangle (60°/120° pairs). Tetradic gives more variety but is harder to balance — usually you let one hue dominate.

Related Tools