Split Complementary Colors: The Safer Complementary Scheme

Split complementary colors are a base hue plus the two hues positioned on either side of its direct complement. On a digital color wheel, those two colors sit about 150 degrees and 210 degrees from the base hue. The scheme preserves much of the visual contrast of complementary colors while avoiding a single direct opposite, which makes the three-color combination easier to balance.

What are split complementary colors?

A split complementary color scheme begins with one base color.

Find that color's direct complement on the color wheel. Instead of using the complement itself, select the two colors immediately beside it.

On an HSL hue circle, the relationship looks like this:

• Base hue: 0 degrees
• First split: 150 degrees
• Second split: 210 degrees

The exact visual result depends on saturation and lightness, but the angular relationship stays the same.

You can generate this relationship automatically with the harmonizer.

Split complementary vs complementary colors

A complementary scheme contains two hues 180 degrees apart.

For example, on an RGB/HSL wheel, red and cyan form a direct complementary relationship.

A split complementary scheme replaces cyan with two hues positioned to either side of cyan. The result still contrasts strongly with red, but neither secondary color sits directly opposite it.

This creates three hue families instead of two.

Split complementary vs triadic colors

Triadic and split complementary palettes both contain three main hues, but their spacing is different.

A triadic scheme places all three hues 120 degrees apart. No color is structurally more important than another based purely on its position.

A split complementary scheme starts with a clear base hue. The other two colors are selected specifically because they flank that base color's complement.

This makes split complementary palettes useful when you already have one established brand, background, or product color and want two contrasting colors around it.

Four split complementary palette examples

HEX values can be adjusted considerably while retaining the general hue relationship.

Red, teal, and blue

Red #DC2626, teal #0D9488, blue #0284C7.

Red provides the warm base while teal and blue sit on the cooler side of the palette.

Using red as an accent rather than across large areas produces a calmer result.

Blue, amber, and orange

Blue #2563EB, amber #F59E0B, orange #EA580C.

Blue can dominate backgrounds, navigation, or larger graphic areas while the two warm colors provide contrast.

Because amber and orange are relatively close to each other, they also form a secondary warm group within the palette.

Green, magenta-violet, and rose

Green #16A34A, magenta-violet #C026D3, rose #F43F5E.

The green base is separated from two warm-to-purple hues on the opposite side of the wheel.

Reducing the saturation of one secondary color makes the combination easier to control.

Purple, yellow-green, and amber-orange

Purple #7E22CE, yellow-green #65A30D, amber-orange #D97706.

Purple provides a strong base, while green and orange create two different forms of contrast.

Lighter versions of the secondary colors produce a softer palette while keeping the basic relationship.

Why split complementary colors have less tension

Direct complementary colors oppose each other across the color wheel. When both are highly saturated and used at similar visual strength, the contrast becomes intense.

A split complementary palette moves the two opposing colors away from that exact 180 degree relationship.

You still get substantial hue separation, but the opposition is distributed across two colors. This makes the palette easier to organize than a pair of fully saturated complements.

Saturation and lightness still matter. Three maximum-saturation colors remain visually intense even when their hue relationship is split complementary.

Choosing which flanking color should lead

The base color does not always have to dominate the entire design.

Start by deciding what role each color needs to perform. One of the flanking colors can become the main secondary color while the other appears only in small accents.

For example, a blue interface might use amber frequently for illustrations and selected components while reserving orange for important calls to action.

The 60-30-10 rule helps establish this hierarchy. Use one color heavily, another moderately, and the final color selectively.

You can also vary lightness. A pale version of one flanking color may work as a background while its stronger hue appears only in details.

Using split complementary colors in web design

Split complementary palettes give web interfaces several color families without requiring unrelated colors.

One hue establishes the main visual identity. A second supports cards, illustrations, categories, or secondary controls, while the third highlights selected actions.

Color relationship alone does not determine accessibility. Check important text, button, and background combinations with the contrast checker.

Using split complementary colors in illustration

Illustration benefits from the ability to separate subjects, backgrounds, and details with distinct hues.

A blue environment, for example, could use yellow-orange and red-orange elements to create warmer focal areas. Alternatively, one of those colors can dominate the subject while the other appears only in smaller details.

Changing saturation and lightness helps prevent every part of the illustration from demanding equal attention.

How to generate split complementary colors

Start with a HEX value such as #2563EB.

Enter the color into the harmonizer and select the split complementary relationship. This gives you the two hues flanking the direct complement.

You can also explore the positions manually using the color wheel. On a digital hue circle, look 150 degrees and 210 degrees from your starting hue.

After finding the three hues, adjust saturation and lightness and arrange the final choices with the palette generator.

FAQ

What are split complementary colors?

Split complementary colors consist of one base hue and two hues positioned on either side of its direct complement. On a digital hue circle, the two split colors are about 150 and 210 degrees from the base.

Is split complementary the same as triadic?

No. Triadic colors are spaced 120 degrees apart, while split complementary colors are based on the two hues surrounding a base color's complement.

Why use split complementary instead of complementary colors?

Split complementary schemes provide strong hue contrast without relying on one directly opposing color. This gives you three color families and makes the contrast easier to distribute across a design.

How do I find split complementary colors from a HEX code?

Enter the HEX color into the harmonizer and select split complementary. You can then refine saturation and lightness and organize the colors with the palette generator.