# Tetradic color scheme: four colours in balance

[Canonical HTML page](https://gradiently.design/guide/tetradic-colors)

Four colours is the richest classic harmony and the easiest to get wrong. The secret is not choosing the four hues, which is arithmetic, but deciding which one is in charge.

## The short version

- A tetradic color scheme uses four hues arranged as two complementary pairs on the colour wheel.
- The rectangle version pairs two hues 60 degrees apart with their two opposites; the square version spaces all four hues 90 degrees apart.
- Tetradic palettes are rich and varied but hard to balance, because four hues compete for attention.
- The scheme works when one colour dominates, a second supports, and the remaining two are used as small accents.
- Muting or darkening some of the four hues makes a tetradic palette feel sophisticated rather than loud.

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.

| Version | Hues from the base | Character |
| --- | --- | --- |
| Rectangle, or double complementary | 0, 60, 180 and 240 degrees | Two close neighbours and their opposites; easier to balance |
| Square | 0, 90, 180 and 270 degrees | Perfectly even spacing; the most varied and the boldest |

Rectangle schemes have a natural pair of allies on each side, which is why designers usually start there.

- Cobalt: #1b3c7e
- Amethyst: #9d59c0
- Marigold: #f0b642
- Fern: #7dba5e

A rectangle scheme: cobalt and amethyst, 60 degrees apart, opposite marigold and fern.

- Deep violet: #452277
- Coral red: #e25a66
- Lime leaf: #95c059
- Sea teal: #2e9e95

A square scheme: four hues 90 degrees apart, with the violet deepened so it can act as the ground.

## How to build a tetradic colour scheme

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. **Add the complement** Add 180 degrees. That pair is the backbone of the scheme. [Complementary colours](https://gradiently.design/guide/complementary-colors) explains why opposites work.
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. **Give each colour a job** One dominant, one supporting, two accents. Write it down so the roles stay the same across every design.
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.

```css
: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 */
}
```

The rectangle palette above, generated from one number. HSL hue wraps past 360 on its own, so you never need to subtract.

## 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.

Portrait event post for an open studio weekend with one dominant background colour and small accents

One colour leads the background and the others appear in small places: busy content, calm design.

Portrait list post in the same series, led by a second colour from the four colour scheme

A companion post where a second colour from the set takes the lead, so the series feels related but not repetitive.

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](https://gradiently.design/guide/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](https://gradiently.design/guide/color-blindness-design) 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](https://gradiently.design/guide/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.

- Slate navy: #24324c
- Heather: #a085ad
- Wheat: #dfc590
- Sage: #85a375
- Linen: #f6f2ea

The cobalt rectangle scheme muted: the same hues, now quiet enough for a hotel, a bookshop or a wedding.

- Cobalt to amethyst: `linear-gradient(135deg, #1b3c7e 0%, #9d59c0 100%)`
- Marigold to fern: `linear-gradient(135deg, #f0b642 0%, #7dba5e 100%)`
- Heather on slate: `radial-gradient(circle at 70% 30%, #a085ad 0%, #24324c 55%, #141c2b 100%)`

In a rectangle scheme, blend each 60 degree pair with itself. Blending across to an opposite crosses grey; see [muddy gradients](https://gradiently.design/guide/muddy-gradients).

### Avoid

- Four hues at equal area and equal brightness
- Text in one bright hue set on another
- A gradient that runs through all four
- Adding a fifth hue to fix the balance

### Do

- One dominant colour, roughly 60 percent of the area
- A neutral for text and space
- Two hues muted, two left brighter
- Rotate the lead colour across a series

If four colours feel like too many, step back to three with [triadic colours](https://gradiently.design/guide/triadic-colors) or [split complementary colours](https://gradiently.design/guide/split-complementary-colors), 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.

## FAQ

### What is a tetradic color scheme?

A palette of four hues made of two complementary pairs on the colour wheel, forming a rectangle or a square.

### What is the difference between rectangle and square colour schemes?

A rectangle scheme uses hues at 0, 60, 180 and 240 degrees; a square scheme spaces them evenly at 90 degree intervals. Rectangles are usually easier to balance.

### Is tetradic the same as double complementary?

The rectangle tetradic scheme is often called double complementary, because it is two complementary pairs that sit close together.

### What is an example of a tetradic color scheme?

Cobalt `#1B3C7E`, amethyst `#9D59C0`, marigold `#F0B642` and fern `#7DBA5E` form a rectangle scheme: cobalt and amethyst sit 60 degrees apart, opposite marigold and fern.

### How do you balance a four colour palette?

Let one colour dominate, give one a supporting role and keep the other two as small accents. Mute or darken some of the hues and add a neutral for text.