Triadic Colours

What makes a palette triadic

Three colours, each 120 degrees from the next. On the wheel they form an equilateral triangle, which is why the scheme looks so even: every pair has exactly the same hue distance, so none of the three colours is subordinate by geometry. Any hierarchy has to come from you.

Why it feels balanced but energetic

Both qualities come from the same source. The spacing is symmetrical, so the eye finds no tension between pairs — that is the balance. But the hues are far apart, so there is plenty of colour variety on screen at once — that is the energy.

Compare it with complementary, which is also high contrast but lopsided: one colour clearly opposes the other. And with analogous, which is even but has almost no variety. Triadic is the only scheme that is both symmetrical and varied, which is exactly why it reads as playful rather than serious.

Deciding which colour leads

Three colours at equal weight will always look unresolved. The single most useful decision you can make with a triadic palette is which hue is the background, which is the supporting surface, and which is the accent.

A reliable default is 60-30-10: roughly sixty per cent of the area in one hue, thirty per cent in the second, ten per cent in the third. The dominant hue should usually be the one with the lowest saturation, since a large area of a vivid colour is exhausting. The accent should be the one that appears least but carries the most meaning — a button, a badge, a single number.

If you are unsure which should dominate, choose the one that matches the mood you want at the edges of the page rather than the centre. Backgrounds set the tone far more than accents do.

Classic triads

If red, yellow and blue feels childish, try the secondary triad of orange, green and violet. It is the same geometry but the hues sit lower in saturation, so it reads as more grown-up without changing the structure.

Using triadic colours in an interface

Interfaces are where triadic palettes need the most discipline. Three strong hues compete with the content, and a screen full of small text cannot afford that competition.

• Use one hue for the page ground. A very light tint of your dominant hue is usually enough. Keep it under ten per cent saturation.
• Use the second hue for structure. Cards, dividers, navigation. This gives the page a recognisable identity without adding noise.
• Use the third hue for one action per screen. If two buttons on the same screen use the accent colour, the user no longer knows which one matters.
• Keep text neutral. Near-black on a pale tint will beat any combination of the three hues for legibility.

Where triadic belongs

Triadic palettes are at their best where colour itself is part of the message: children’s products, festival and event branding, chart series that must be distinguished at a glance, packaging that needs to stand out on a shelf. They are at their worst in dense professional tooling, long-form reading, and anywhere the interface should disappear.

If you want the variety without the intensity, desaturate all three hues by the same amount. The geometry stays intact and the palette calms down considerably — often enough to use in a product interface.

Try it with your own base colour in the palette generator, then check every text pair with the contrast checker before you commit.