Super Boring Tools

Search tools

Find a tool by name or what it does.

Split Complementary Color Generator

Turn any color into a split complementary palette with an adjustable split angle.

HEX, RGB, or HSL, or pick a color. Everything runs in your browser. Nothing is uploaded.

Palette
Basehue 355°
#e63946 · rgb(230, 57, 70) · hsl(355, 78%, 56%)
Split 1complement -30°
#39e682 · rgb(57, 230, 130) · hsl(145, 78%, 56%)
Split 2complement +30°
#399de6 · rgb(57, 157, 230) · hsl(205, 78%, 56%)

How far each split sits from the exact complement. 30° is the classic scheme; smaller angles get closer to a straight complement, larger ones drift toward a triad.

CSS variables
:root {
  --color-base: #e63946;
  --color-split-1: #39e682;
  --color-split-2: #399de6;
}

How to find split complementary colors online

  1. Enter a base color

    Type a HEX, RGB, or HSL value, or use the picker to choose a color visually.

  2. Read the palette

    The two split complement colors appear instantly next to your base, each with HEX, RGB, and HSL values.

  3. Adjust the split angle

    Drag the angle slider to move the two splits closer to or further from the exact complement.

  4. Copy the colors

    Copy any single HEX value from its row, or copy the whole palette as ready-to-paste CSS variables.

Why use this tool

Adjustable split angle

The classic scheme places the splits 30 degrees either side of the complement. A slider lets you tune the angle from 5 to 75 degrees and watch the palette update live.

Accepts HEX, RGB, and HSL

Paste shorthand or full HEX codes, rgb() with commas or spaces, or hsl() values. A native color picker is there when you would rather point and click.

Three formats per swatch

Every color in the palette shows its HEX, RGB, and HSL values side by side, with a one-click copy for the HEX code.

Ready-to-paste CSS variables

The whole palette is generated as a :root block with named custom properties, so it drops straight into a stylesheet.

Runs entirely in your browser

Colors are computed on your device the moment you type. Nothing is uploaded and no account is needed.

About this tool

A split complementary scheme starts from one base color, finds the hue directly opposite it on the color wheel, then replaces that single complement with the two hues sitting just either side of it. The result keeps the strong contrast of a complementary pair but softens the tension, which makes it one of the most forgiving harmonies for interfaces, branding, and illustration. This tool computes the scheme for any color you give it: type a HEX, RGB, or HSL value, or pick visually, and the two splits appear immediately.

The defining choice in a split complementary palette is how far the splits sit from the exact complement. The textbook answer is 30 degrees, and that is the default here, but the slider lets you set anything from 5 to 75 degrees. Small angles behave almost like a straight complementary pair, while large angles approach a triadic scheme, so one slider covers the whole family of related harmonies. Hue rotation wraps correctly around the wheel, so a red base near 0 degrees produces sensible greens and blues rather than broken values.

Each swatch is listed with its HEX, RGB, and HSL values and a one-click copy button, and the full palette is also assembled as CSS custom properties you can paste into a stylesheet. Greyscale input is handled honestly: a color with no saturation has no meaningful hue, so the tool tells you the splits will match the base instead of inventing color. For browsing hues before you commit to a base, start with the color wheel.

Frequently asked questions

What is a split complementary color scheme?
It is a three-color harmony built from a base color and the two hues adjacent to its exact complement. It keeps most of the contrast of a complementary pair while being easier to balance, because the two accent colors are related to each other.
How are the two split colors calculated?
The base color is converted to hue, saturation, and lightness. The complement sits 180 degrees away on the color wheel, and the two splits are placed at the complement minus and plus the split angle, keeping the original saturation and lightness. The default angle is 30 degrees.
Which color formats can I enter?
HEX codes in 3 or 6 digit form with or without the hash, rgb() values with commas or spaces, and hsl() values. There is also a native color picker if you prefer choosing visually.
What happens with grey, black, or white input?
Colors with zero saturation have no hue, so rotating them around the wheel produces the same grey three times. The tool shows the palette anyway and adds a note suggesting you add a little saturation to see the split.
Is my color data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.
Can I use the output directly in CSS?
Yes. The palette is generated as a :root block with three custom properties, one per color, and every individual HEX value has its own copy button as well.

Related tools