BYTETOOLS

Split Complementary Color Generator

Build a split-complementary scheme from any base colour, with an adjustable split angle, tint and shade ramps, and copy-ready HEX, RGB and HSL values.

Base colour
30
How far each companion sits from the direct complement. 30° is the classic split-complementary.

Split-complementary scheme

Base
#3b82f6
rgb(59, 130, 246)
hsl(217.2, 91.2%, 59.8%)
Split A (+150°)
#f6523b
rgb(246, 82, 59)
hsl(7.2, 91.2%, 59.8%)
Split B (+210°)
#dff63b
rgb(223, 246, 59)
hsl(67.2, 91.2%, 59.8%)

The base hue sits at 217.2°, and the two companions land at 7.2° and 67.2° — flanking the direct complement instead of hitting it, which keeps the contrast without the vibration a straight complementary pair produces.

Base — tints and shades

Tints (toward white)
Shades (toward black)

Split A (+150°) — tints and shades

Tints (toward white)
Shades (toward black)

Split B (+210°) — tints and shades

Tints (toward white)
Shades (toward black)

Preview

Accent B

A card using the whole scheme

The base carries the layout, split A handles secondary emphasis and split B is saved for the one thing you want clicked.

PrimarySecondary

What is the Split Complementary Color Generator?

A split-complementary scheme takes your base colour and, instead of pairing it with its direct opposite, uses the two hues sitting either side of that opposite — 150° and 210° around the wheel by default.

  • Classic 150° and 210° split, with the angle adjustable from 5° to 80°
  • Four tints and four shades for each of the three members
  • HEX, RGB and HSL for every colour, each with its own copy button
  • Click-to-copy chips on every tint and shade
  • Live card preview showing the scheme on real UI elements
  • CSS custom properties output and fully offline operation

How to use the Split Complementary Color Generator

  1. 1

    Pick your base colour with the swatch or type its hex value.

  2. 2

    Drag the split angle to control how far the two companions sit from the direct complement.

  3. 3

    Copy any member's HEX, RGB or HSL value with the buttons under its swatch.

  4. 4

    Click any tint or shade chip to copy that variation, and check the card preview at the bottom.

About the Split Complementary Color Generator

A split-complementary scheme takes your base colour and, instead of pairing it with its direct opposite, uses the two hues sitting either side of that opposite — 150° and 210° around the wheel by default. You keep the strong contrast a complementary pair gives you, without the harsh vibration that happens when two exact opposites sit next to each other.

It is the scheme to reach for when a straight complementary pair feels too aggressive but an analogous set feels too flat. Because the two companions are close to each other, they naturally read as a supporting pair against the base, which maps neatly onto a primary colour plus two accents.

The split angle is adjustable, so you can slide from a near-complementary pair at 5° out to something approaching a triad at 80°. Each member comes with four tints and four shades, every swatch copies on click, and there is a card preview showing the scheme applied to real interface elements. Nothing is uploaded — it all runs in your browser.

Frequently asked questions

What is a split complementary color scheme?

It uses a base colour plus the two hues adjacent to its direct complement, typically 150° and 210° away. You get most of the contrast of a complementary pairing with far less visual tension, which makes it one of the safest schemes for interface work.

Is split complementary better than complementary?

For interfaces, usually yes. Two exact opposites at full saturation appear to shimmer where they meet, which is distracting in a layout you expect people to read. Splitting the complement removes that effect while keeping the colours clearly distinct.

How should I use the three colors in a design?

Give the base the most area — backgrounds, large surfaces, structure. Use one companion for secondary emphasis, and ration the second companion to the single element you most want clicked. Roughly 60/30/10 by area is a reliable starting split.

What split angle should I choose?

30° is the classic value and works for almost everything. Narrowing towards 10° pulls the scheme back towards a straight complementary pair with more tension; widening past 60° starts to behave like a triadic scheme where all three colours compete.

Do the tints and shades keep the same hue?

Yes. Tints and shades only move HSL lightness towards white or black, leaving hue and saturation untouched, so every variation stays in the same colour family as its parent.

Related tools