Split Complementary Color Theory — Complete Guide

The softer alternative to complementary colors that's easier to balance and more versatile in real design work.

What Are Split Complementary Colors?

A split complementary color scheme uses three colors: one base color, and the two colors that sit on either side of the base's complement. If your base color is at hue 215° (blue), the complement is at 35° (orange), and the split complementary colors are at 5° (yellow-orange) and 65° (red-orange).

This is often called the "compound complementary" scheme. It was popularized by Johannes Itten at the Bauhaus in the early 20th century and remains one of the most useful harmony rules today. Split complementary schemes are especially common in UI design because they provide visual interest without the tension of pure complementary pairs.

How It Differs From Complementary

Pure complementary uses only two colors directly opposite each other (180° apart). The tension is maximum — the eye vibrates at the boundary. This works for accents but is hard to use over large areas.

Split complementary distributes the tension across three colors. The two accent colors are only 60° apart from each other, so they feel related. The base color stands out clearly but the palette feels more harmonious.

Practical consequence: split complementary is easier to use. You can use larger areas of the accent colors without the design feeling like it's shouting.

The Formula

Given a base hue H, split complementary uses:

Base: H
Accent 1: (H + 150°) mod 360
Accent 2: (H + 210°) mod 360

Some designers use ±30° from 180°, which produces the same result mathematically. The exact angle can vary — some systems use ±25° or ±35° — but ±30° is the most common convention.

Real Example: Base Blue #155EEF

Base blue is at hue 215°. The split complementary angles produce:

Base: #155EEF (hue 215°, blue)
Accent 1: #EF155E (hue 5°, red-orange)
Accent 2: #EF9E15 (hue 65°, yellow-orange)

The result is a palette that feels balanced — blue is clearly the base, but the two warm accents feel like a coordinated pair rather than two competing colors.

When to Use Split Complementary

Web Interfaces

Split complementary is one of the most popular schemes in modern UI design. The base color becomes the primary brand color and background. The two accent colors become interactive elements, CTAs and highlights. Because the accents are related, both can be used without one dominating the other.

Product Packaging

Retail shelf impact needs contrast without harshness. Split complementary gives you enough visual tension to grab attention while remaining balanced over a larger surface.

Logos

Logos with split complementary palettes feel modern and design-forward. The base color anchors the identity; the accents add personality without feeling chaotic.

Illustrations

Multi-color illustrations benefit from split complementary because it provides variety without the complexity of tetradic schemes. The palette has enough range to feel interesting but enough coherence to feel intentional.

Editorial Design

Pull quotes, section dividers and drop caps in split complementary accents feel refined. The palette can be used generously without becoming overwhelming.

Best Practices

Assign the Roles Intentionally

Split complementary gives you three colors, but you still need hierarchy. Choose:

One dominant base color (60-70% of visual weight)
One secondary accent (20-30%)
One highlight accent (5-10%)

Without this, three equal-weight colors create visual noise.

Use Neutrals

Split complementary works best with neutral support — white, off-white, charcoal or light gray. The three harmony colors become the highlight; neutrals become the canvas.

Test Accessibility

Split complementary colors often have low contrast when placed directly adjacent. Always verify WCAG 2.2 contrast with a contrast checker before using them as text/background pairs.

Adjust Saturation

If your base color is very saturated, consider slightly desaturating the accents. Two highly saturated accents next to a saturated base is fatiguing. Subtle saturation differences feel more refined.

Generate Split Complementary Palettes

Use our Split Complementary Generator to instantly create a complete palette from any base color. Or use the Split Complementary Palette Generator for a more thorough palette view.