Tetradic color scheme: four colours in balance

A tetradic color scheme is four hues that form two complementary pairs on the colour wheel. Join them with lines and you draw a rectangle or a square, which is why the two versions are called rectangle and square schemes. Because it contains warm and cool colours on both sides of the wheel, a tetradic palette is the fullest of the classic harmonies. It is also the one most likely to look chaotic, unless you let one colour lead and keep the other three in their place.

Rectangle and square tetradic schemes

Both versions start from a base hue and add its complement, 180 degrees away. They differ in where the second pair sits.

How to build a tetradic colour scheme

1. 1

   Pick the base hue

   Choose the colour your brand or design depends on. Note its hue in degrees, which any colour picker that shows HSL will give you.

2. 2

   Add the complement

   Add 180 degrees. That pair is the backbone of the scheme. Complementary colours explains why opposites work.

3. 3

   Choose rectangle or square

   For a rectangle, add 60 degrees to the base and to the complement. For a square, add 90 degrees to each.

4. 4

   Give each colour a job

   One dominant, one supporting, two accents. Write it down so the roles stay the same across every design.

5. 5

   Tune lightness and saturation

   Darken the dominant colour, soften the support, and keep the accents brightest. Hue sets the harmony; lightness sets the hierarchy.

:root {
  --h: 220; /* base hue */

  /* Rectangle scheme */
  --c1: hsl(var(--h) 65% 30%);
  --c2: hsl(calc(var(--h) + 60) 45% 55%);
  --c3: hsl(calc(var(--h) + 180) 85% 60%);
  --c4: hsl(calc(var(--h) + 240) 40% 55%);

  /* For a square scheme use +90, +180 and +270 instead */
}

Why four colours are hard to balance

With two colours, contrast is simple. With four strong hues, the eye has no idea where to look first, and every colour seems to shout over the others. Most tetradic designs that fail do so because all four colours get roughly equal area and equal saturation. The fix is hierarchy, not fewer colours.

That second figure points to the scheme's real strength. Four colours give you enough variety for a whole series: each post can be led by a different member of the palette while the set still clearly belongs together. That is ideal for carousels, menus and event programmes, where brand consistency matters but sameness gets boring.

Where a tetradic colour scheme works best

Four hues earn their place when a project needs to separate several things clearly without inventing new colours each time. A single poster rarely needs that. A system usually does.

• Category coding: a café menu with drinks, breakfast, lunch and cakes, each with its own colour.
• Event programmes: four stages, tracks or days that visitors need to tell apart at a glance.
• Charts and dashboards: four data series that must stay distinct, ideally checked for colour blindness too.
• Children's and play brands: where the full, bright version of the palette is exactly the point.
• Seasonal campaigns: one hue leading each quarter of the year, with the others in support.

For proportions, start with the 60 30 10 rule and split the final ten percent between the two accents. On a menu, for example, the dominant colour fills the page, the support colour marks headings, and the two accents tag the vegetarian and new dishes.

Making a tetradic palette look sophisticated

Full saturation tetradic palettes look like a children's toy box, which is perfect for a toy shop and wrong for most others. Pull two or three of the colours towards grey or towards dark, and the same hues look considered and grown up.

If four colours feel like too many, step back to three with triadic colours or split complementary colours, both of which keep strong contrast with one fewer hue to manage. Then try the palette on real designs: in Gradiently, colours saved to a brand kit (a Pro feature) show first in every colour picker in the Studio, so each post in a series can take a different lead.