Split-Complementary Colors
A split-complementary scheme takes a base color and, instead of its direct complement, uses the two hues on either side of it. You keep most of the punch of a complementary pair with less tension, which makes it one of the easiest schemes for beginners.
Drag the large handle. The angle between handles is the rule: 150° / 210°.
Split-Complementary Colors generator
| Color | HEX | RGB | HSL |
|---|---|---|---|
| #2F6FDE | rgb(47, 111, 222) | hsl(218 73% 53%) | |
| #DE462F | rgb(222, 70, 47) | hsl(8 73% 53%) | |
| #C7DE2F | rgb(199, 222, 47) | hsl(68 73% 53%) |
How to find split-complementary colors
Add 150° and 210° to the base hue (the complement at 180°, then 30° either side).
When to use it
- Marketing pages that need a strong accent without clashing.
- Illustrations with a clear subject and a supporting background.
- Brand systems that need two accent colors.
Watch out for
The two split hues are close to each other; if both are saturated they can look muddy next to the base. Vary their lightness. Hue relationships say nothing about readability, so run your text colors through the WCAG contrast checker.
Example palette
Frequently asked questions
What is a split-complementary color scheme?
A base hue plus the two hues adjacent to its complement, at roughly 150° and 210° around the wheel.
Why use split-complementary instead of complementary?
It keeps strong contrast but softens the vibrating edge you get from two exact opposites, and it gives you two accent colors instead of one.
What is the split complement of yellow?
On the RGB wheel, yellow (60°) splits to 210° and 270°: a sky blue and a violet.