Split complementary colors: contrast with less clash

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

   Find its complement

   Add 180 degrees. Teal's complement is a coral red at about 355 degrees.

3. 3

   Step 30 degrees either side

   Go 30 degrees each way from the complement: about 325 degrees (pink) and 25 degrees (orange).

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

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

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.

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

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.

: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%);
}

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.