Triadic colors

A triadic scheme uses three hues spaced 120° apart on the color wheel. It balances vibrancy with structure — classic for playful brands and illustrations.

Generate triadic palettes

Triadic harmony

Lock colors you like, then regenerate the rest.

Base

Pick

#7c3aed

hsl(262, 83%, 58%)

Pick

#ed7c3a

hsl(22, 83%, 58%)

Pick

#eaa37a

hsl(22, 73%, 70%)

Pick

#3aed7c

hsl(142, 83%, 58%)

Pick

#22dc67

hsl(142, 73%, 50%)

CSS variables

:root {
  --color-1: #7c3aed;
  --color-2: #ed7c3a;
  --color-3: #eaa37a;
  --color-4: #3aed7c;
  --color-5: #22dc67;
}

Tailwind snippet

// tailwind.config — theme.extend.colors
brand: {
        100: "#7c3aed",
        200: "#ed7c3a",
        300: "#eaa37a",
        400: "#3aed7c",
        500: "#22dc67",
}

Triadic vs complementary

Complementary pairs are maximum contrast. Triads spread energy across three poles, so you can assign roles: primary brand, secondary accent, and highlight. Lower saturation on two of the three if the UI feels noisy.

Practical tips

Let one color dominate (~60%), another support (~30%), third accent (~10%)
Keep neutrals separate so text stays readable
Validate interactive states with the contrast checker

Generate a triad

Jump into the palette generator, select Triadic, and export CSS variables or a Tailwind snippet for your design system.