Split Complementary Colors: A Softer Way to Use Contrast

A split complementary scheme uses a base color and the two colors on either side of its opposite. Instead of pairing blue with its direct complement, you pair it with the two hues just beside that complement. You keep the warm and cool contrast that makes complementary colors exciting, but the result is gentler and much easier to balance.

Understanding Color Harmony: 7 Ways to Combine Colors gives split complementary a short section. This guide looks at how the scheme is built, why it behaves better than a straight complementary pair, and how to decide which of its three colors should lead.

How the scheme is formed on the wheel

Start with a base hue and find its complement by adding 180 degrees. Then, instead of using that complement, step 30 degrees to each side of it. The two hues you land on are the split complements. In degrees, they sit at the base plus 150 and the base plus 210.

Drawn on the wheel, the three hues form a tall, narrow Y or an isosceles triangle pointing at the base. That's the pattern the ColorOverflow generator and Color Wheel Explorer use. Some other tools let you change the width of the split, which is worth understanding because it shows where this scheme sits among the others.

• A very narrow split, such as 10 or 15 degrees either side, behaves almost like a complementary pair.
• A 30-degree split, the common default, gives two clearly different accents that still feel related.
• A 60-degree split puts the hues at the base plus 120 and plus 240, which is exactly a triadic scheme.

So split complementary sits between complementary and triadic. It has more variety than a pair and less spread than a triad.

Why it's easier to balance than complementary

A direct complementary pair puts two hues with nothing in common in head-to-head competition. When they're both vivid and similar in lightness, the edges seem to vibrate. Our guide to complementary colors explains that effect and how to manage it. Split complementary avoids much of the problem for three reasons.

1. Neither accent sits directly opposite the base, so the clash at the edges is softer.
2. The two split colors are only 60 degrees apart, so they relate to each other like analogous colors and work as a team against the base.
3. With three hues you can spread the contrast: one accent for calls to action, the other for highlights or illustrations, without overusing either.

Choosing the base and the split colors

The base is the color that defines the design. In most schemes it's also the dominant one, with the split colors as smaller accents. That arrangement is natural because the base is on its own side of the wheel and the two splits share the other.

• Base as lead: use the base for most colored areas, and the two splits for accents. This is the most balanced setup.
• One split as lead: let one split color dominate, keep the base as a secondary color and the other split as a rare accent. This works when your brand color happens to be one of the splits.
• Splits together: the two split colors can share a large area, like a warm gradient, with the base as a small, sharp contrast.

Temperature helps you decide. If the base is cool, the splits are usually warm, and warm colors pull attention. A cool base with warm accents tends to feel calm with energy at the edges. A warm base with cool splits feels lively, with the cool accents acting as resting places.

Example palettes

Each palette below is what the generator returns for its base. The rule takes the base and the first split in two steps each (the color and a lighter tint) and the second split as one color.

Teal with plum and rust

• White text on the teal #0d9488: 3.74:1. Fine for large text, but not for body copy.
• Near-black #111827 on the same teal: 4.73:1, passes AA.
• White text on plum #940d5d: 8.48:1, and on rust #94440d: 6.79:1.
• Plum on rust: only 1.24:1. The two splits are similar in lightness, so separate them with space or a neutral.

This palette suits a café, a wellness brand or an editorial site. The teal is fresh, and the plum and rust add warmth without fighting it.

Blue with red-orange and lime

• White text on the blue: 5.16:1, passes AA.
• White on the red-orange: 3.79:1, large text only. Near-black on it: 4.67:1, passes AA.
• Near-black on the lime #c6eb25: 12.93:1.
• Red-orange on blue: just 1.36:1. Hue contrast is strong, lightness contrast almost none.

This is a bold, sporty palette for apps, events or campaigns. Let the blue lead, use the red-orange for the main action and keep the lime for small highlights such as badges or a progress bar.

Violet with yellow and green

White on the violet reaches 5.69:1, and near-black on the yellow reaches 11.97:1. Yellow and green at full strength are loud, so this palette is best for playful products, games or children's brands, with plenty of white space around it.

From swatches to a finished palette

A raw harmony needs a few adjustments before you can build with it. Here the teal example is finished for a website: the base moves to a deeper shade of the same hue so it can carry white text, and a warm off-white and a near-black are added for backgrounds and body text.

• White text on the deeper teal #0f766e: 5.47:1. On the off-white page it measures 4.95:1, so it also works for links.
• Plum #940d5d on the off-white #f7f3ee: 7.68:1, good for headings or pull quotes.
• Rust #94440d on the off-white: 6.14:1, good for tags and small labels.
• Near-black #111827 body text on the off-white: 16.05:1.

The teal leads in the header, buttons and links. Plum and rust appear in small, deliberate places, such as category tags and illustrations, so the page feels warm without losing its calm base.

Common mistakes

• Using all three hues at full saturation in equal amounts.
• Setting text in one hue on another. Red-orange on blue looks striking but measures 1.36:1.
• Forgetting neutrals, so every surface is one of the three hues.
• Making the two splits compete. Choose one for the main accent and keep the other rarer.
• Assuming the scheme guarantees contrast. It sets hues; lightness still needs checking.

Try it on the wheel

Open the Color Wheel Explorer, choose split complementary and drag the base around. Watch how the two splits move together on the far side, and switch to complementary and triadic to see where this scheme sits between them.