# Split complementary colors: contrast with less clash

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

A complementary pair is loud and hard to balance. Split the opposite in two and you keep almost all the contrast while the colours stop fighting. Here is how it works, with palettes to copy.

## The short version

- Split complementary colors are a base colour plus the two colours that sit either side of its complement on the colour wheel.
- On a 360 degree wheel the two partners sit roughly 150 and 210 degrees from the base, about 30 degrees either side of its exact opposite.
- The scheme keeps strong contrast but clashes less than a straight complementary pair, because no two colours are exactly opposite.
- It works best when the base colour dominates and the two split colours are used as smaller accents.
- Painters' wheels and screen wheels place complements differently, so the same base can give slightly different split palettes.

**Split complementary colors** are three colours: a base, plus the two colours either side of the base's complement. Instead of pairing blue with its direct opposite, orange, you pair blue with red orange and yellow orange. You keep the warm against cool contrast that makes complementary schemes lively, but because nothing sits exactly opposite anything else, the result is easier on the eye and much easier to balance in a real design.

## How split complementary colours work

Picture the [colour wheel](https://gradiently.design/guide/color-wheel) as a clock. Your base colour is at twelve. Its complement is at six. A split complementary scheme skips six and takes five and seven instead. In degrees, that means hues about 150 and 210 degrees away from the base.

1. **Choose a base hue** Start with the colour your design is really about: the brand colour, the product, the mood. Say teal, at a hue of 175 degrees.
2. **Find its complement** Add 180 degrees. Teal's complement is a coral red at about 355 degrees.
3. **Step 30 degrees either side** Go 30 degrees each way from the complement: about 325 degrees (pink) and 25 degrees (orange).
4. **Adjust lightness and saturation** The hues set the scheme, but you choose how light, deep or muted each one is. That is where the palette starts to look like yours.

- Teal base: #188b81
- Orchid pink: #e052a5
- Apricot: #f58a3d
- Deep teal: #173633
- Warm paper: #f6f0ea

The worked example: teal with pink and apricot, plus a darker teal and a neutral for text and space.

## Why split complementary clashes less

Exact opposites, such as red and cyan or blue and orange, compete for attention at equal strength. Placed side by side at full saturation they can seem to vibrate, and blended together they turn grey. [Complementary colours](https://gradiently.design/guide/complementary-colors) are powerful for that reason, but they leave little room for error.

In a split scheme, the two partners are 60 degrees apart from each other, which makes them close relatives. They support each other instead of fighting, and together they balance the base. You get contrast with one natural ally on the warm side, or the cool side, depending on where you start.

| Scheme | Colours | Contrast | Ease of balance |
| --- | --- | --- | --- |
| Complementary | 2, exactly opposite | Highest | Hard |
| Split complementary | 3, base plus two near opposites | High | Moderate |
| [Triadic](https://gradiently.design/guide/triadic-colors) | 3, evenly spaced at 120 degrees | High | Moderate to hard |
| [Analogous](https://gradiently.design/guide/analogous-colors) | 3, side by side | Low | Easy |

Split complementary sits between analogous calm and complementary drama.

## Split complementary palette examples

Five palettes built with the steps above. The first colour in each row is the base; the other two are its split partners. Lightness and saturation have been tuned so each set is usable for real work, not just theoretically correct.

| Base | Base hex | Split partners | Feels like |
| --- | --- | --- | --- |
| Teal | `#188b81` | `#e052a5` orchid, `#f58a3d` apricot | Tropical, modern, lively |
| Violet | `#6629a3` | `#f5e63d` lemon, `#3fa648` leaf | Playful, creative, bold |
| Cobalt blue | `#1b4f98` | `#e45e44` vermilion, `#f5d63d` sunflower | Confident, sporty, classic |
| Crimson | `#c32230` | `#318160` jade, `#2970a3` cerulean | Festive, grounded, rich |
| Forest green | `#2a6f41` | `#ab5eba` orchid, `#e4677c` rose | Botanical, romantic, fresh |

Copy the codes straight into your tool. Use the base for most of the area.

- Teal scheme: the two partners: `linear-gradient(135deg, #e052a5 0%, #f58a3d 100%)`
- Cobalt scheme: the two partners: `linear-gradient(135deg, #e45e44 0%, #f5d63d 100%)`
- Teal base as a ground: `radial-gradient(circle at 75% 25%, #188b81 0%, #173633 60%, #0b1a19 100%)`
- Cobalt base as a ground: `radial-gradient(circle at 25% 25%, #2970a3 0%, #1b4f98 45%, #0c1f3d 100%)`

The two split partners are neighbours, so they blend cleanly into each other. Blending the base straight into a partner crosses the wheel and goes muddy, so keep the base as its own ground.

## How to use a split complementary scheme in a design

Three equally loud colours make a design look like a flag. Give them unequal jobs instead. The [60 30 10 rule](https://gradiently.design/guide/60-30-10-rule) is a good starting point: the base covers most of the area, one partner takes a supporting role, and the other appears only where you want the eye to go first.

Muting is your other lever. Darken or grey the base until it behaves almost like a neutral, and the two partners suddenly look intentional instead of loud. This is how split schemes end up feeling sophisticated: a deep teal, a dusty pink and a soft apricot use the same hues as the bright version, but read as a boutique hotel rather than a beach ball.

Portrait summer menu post on a deep teal background with pink and apricot accents

A deep teal ground does most of the work; pink and apricot are kept for the words and one highlight.

### Avoid

- All three hues at full saturation and equal area
- Body text in one partner colour on top of the other
- A single gradient running base to partner across the wheel
- Adding a fourth bright hue on top

### Do

- One dominant base, often deepened or muted
- Partners at different lightness, so one leads
- A neutral for text and breathing room
- Check contrast wherever words sit

## Painter's wheel or screen wheel

There are two common colour wheels. The traditional painter's wheel uses red, yellow and blue as primaries, so red's opposite is green. Screens use red, green and blue light, so on an HSL wheel red's opposite is cyan. Both give valid schemes; just use one wheel consistently. If you work in CSS, the screen wheel is what `hsl()` uses, so you can generate a scheme with a little arithmetic.

```css
:root {
  --h: 175; /* base hue in degrees */
  --base: hsl(var(--h) 70% 32%);
  --split-a: hsl(calc(var(--h) + 150) 70% 60%);
  --split-b: hsl(calc(var(--h) + 210) 90% 60%);
}
```

Change `--h` and the whole split complementary scheme moves with it. More on this model in [hue, saturation and brightness](https://gradiently.design/guide/hue-saturation-brightness).

To see a palette working on real formats, the Designer in Gradiently can lay out a post, story and banner in one go, so you can judge the proportions at every size instead of on a swatch card.

## FAQ

### What are split complementary colors?

A base colour plus the two colours either side of its complement on the colour wheel. For blue, that is red orange and yellow orange.

### How do you find split complementary colours?

Find the base colour's complement by adding 180 degrees to its hue, then take the hues about 30 degrees either side of it.

### Is split complementary better than complementary?

It is easier to balance. You keep most of the contrast, but the colours clash less because none of them are exact opposites.

### What is the split complementary of red?

On the painter's wheel, yellow green and blue green. On a screen HSL wheel, the partners of red are a green cyan and a blue cyan, around 150 and 210 degrees.

### How many colours are in a split complementary scheme?

Three hues, though most real palettes add a dark and a light neutral for text and space.