Triadic Palette Generator

What this generator does

Sits between the two extremes on this site: the complementary generator gives maximum contrast from two colours, the analogous generator gives minimum contrast from three neighbours, and a triad gives strong contrast from three colours that remain balanced. It is the scheme to reach for when two colours are not enough.

How to use this tool

1. Press Generate palette for a random triad.
2. Or set the base hue and let the other two follow.
3. Adjust saturation and lightness for the medium you are working in.
4. Copy the values or the CSS custom properties.

Understanding the controls

Base hue

The first of the three. The other two are always this plus 120° and plus 240°, so moving the base rotates the whole triad round the wheel.

Saturation and lightness

Held constant across all three so the triad reads as one scheme. Lowering saturation is the usual way to make a triad usable in a professional context, where full-strength triads can look garish.

Worked examples

The primary triad

A base of 0 gives 0, 120 and 240 — red, green and blue.

The secondary triad

A base of 60 gives 60, 180 and 300 — yellow, cyan and magenta.

Any rotation

A base of 45 gives 45, 165 and 285, and the same balance applies wherever you start.

Common use cases

• A playful brand palette that needs more than two colours
• Children's illustration or packaging, where triads are conventional
• Charts with three unrelated series that must be told apart
• A poster needing several distinct colours that still belong together
• Board-game or app design with three equal factions or modes

How this generator works

The three hues are the base, the base plus 120° and the base plus 240°, wrapping round the wheel — three points at the corners of an equilateral triangle inscribed in it. Saturation and lightness stay identical across all three, which is what makes them a triad rather than three arbitrary colours.

Randomness and fairness

Only the starting position on the wheel and the saturation and lightness are random. The 120° spacing is fixed, so every generated palette is a genuine triad and only its rotation varies.

For how randomness is produced across the whole site, see how Generate Random works.

Limitations and good to know

• Three fully saturated hues at the same lightness is a lot of colour, and it is the most common way a triadic palette goes wrong. Reduce saturation on two of the three for most real work.
• The even spacing means no colour leads naturally, so the hierarchy has to come from how much of each you use rather than from the palette itself.
• Two of the three may still be hard to distinguish for readers with reduced colour vision, since even spacing on the hue wheel does not guarantee perceptual separation.
• As with every harmony here, the relationship is geometric. HSL does not model perceived brightness, so a triad may need lightness adjusted by eye.

Common mistakes

Using all three at full saturation and in equal amounts

Pick one to lead, and desaturate or use less of the other two. An even three-way split at full strength is the classic garish triad.

Assuming an even hue spacing means even visual distinction

It does not. Check the palette in greyscale and for colour-blind readers before relying on hue to carry meaning.

Practical tips

• Use the 60–30–10 approach: one colour for most of the design, the second for a third of what is left, the third as an accent.
• Desaturate two of the three and keep one at full strength — that is how most professional triadic palettes are actually built.

Privacy and your data

All calculation happens in your browser. Nothing is uploaded or stored, and no colour reaches the page address. Analytics records only that a palette was generated.

Frequently asked questions

What is a triadic colour scheme?

Three hues evenly spaced 120° apart on the colour wheel, forming an equilateral triangle.

Why do triads often look garish?

Because all three are usually left at full saturation and equal weight. Let one lead and soften the others.

What is the difference from a split-complementary scheme?

A triad is evenly spaced. A split-complementary takes the two colours either side of the complement, giving similar contrast with less tension.