Split-Complementary Colors
The contrast of a complementary pair with the tension dialed down: your color plus the two neighbors of its opposite. Computed in OKLCH so all three share one visual weight. Free and 100% in your browser.
Complementary energy, negotiable terms
A split-complementary scheme starts like a complementary one — your color looks across the wheel at its opposite — but instead of taking the opposite itself, it takes the two hues flanking it, 150° and 210° from the base. The result keeps the across-the-wheel energy (warm still faces cool, light still faces dark temperamentally) while the exact-opposite collision never happens. Where a pure complement vibrates at the boundary, a split hums.
Why beginners should start here
The pure complementary pair is the Formula 1 car of color schemes — maximum output, unforgiving handling. The split is the same engine with stability control. Its two contrast colors are close enough to each other to act as a family (they are, in fact, analogous neighbors), so the scheme self-organizes: base color as the lead, the flanking pair as a coordinated supporting cast. It is genuinely hard to make a split scheme look wrong, and genuinely easy to make it look considered.
Assigning the three roles
- The base takes the surface: backgrounds, large fields, brand presence — about 60%.
- One flank becomes the working accent: buttons, links, highlights — around 30%. Choose whichever flank sits further from the base in lightness; readability comes free.
- The other flank stays rare: hovers, secondary badges, illustrative touches — the final 10%. Using both flanks at equal strength is the one way to break the scheme.
Split versus triadic — the two three-color schemes
Both use three hues, but their geometry gives them different characters. A triad spreads evenly (120° everywhere) and feels balanced, playful, democratic. A split clusters two hues opposite the third (0/150/210) and feels directional — there is clearly a protagonist and a response. Pick the triad when no color should dominate; pick the split when your brand color must lead and simply wants interesting company. Because this page rotates hues in OKLCH, all three members keep your base color's perceived lightness and vividness — the balance survives the math. Save the trio to My colors, check text pairs in the contrast checker, and give the lead a realistic audition in the color tester. Everything runs 100% in your browser.
Frequently asked questions
What is a split-complementary color scheme?
Your base color plus the two colors adjacent to its complement — hues at 150° and 210° from the base. It keeps complementary contrast while avoiding the harsh exact-opposite pairing.
When should I choose split-complementary over complementary?
Whenever you want across-the-wheel energy but the pure pair feels aggressive — which is most of the time. The split adds a third working color and removes the boundary vibration.
Which of the two flanking colors should be my accent?
The one further from your base in lightness — the built-in lightness gap makes buttons and links readable with less adjustment. The other flank stays as a rare secondary accent.
Is split-complementary the same as triadic?
No. Triadic spaces three hues evenly at 120°; split-complementary clusters two hues opposite the third. Triads feel balanced, splits feel directional with a clear lead color.
Do these three colors work for text on each other?
Only when the lightness gap is large enough — hue contrast alone does not create readability. Verify any text/background pair in a WCAG contrast checker before shipping.