Split-Complementary Palette Generator

Split-complementary palettes: the contrast of complementary, minus the tension

A split-complementary palette is one of the classical harmonies from color theory. Instead of the two opposite hues of a pure complementary scheme (180° apart), it uses a base color and the two hues immediately adjacent to its complement — typically the base at hue H plus H + 150° and H + 210°. The result keeps the vibrant contrast that makes complementary schemes pop, but replaces some of the visual tension with variation and breathing room.

The classification goes back to Johannes Itten's color wheel at the Bauhaus, which formalised analogous, complementary, triadic, tetradic and split-complementary as canonical relationships. In Adobe Color, Coolors and most modern palette tools you will find "Split Complementary" as a preset mode that does exactly this rotation.

Why designers reach for it

• Rich contrast, less stress — pure complementary (orange + blue) can vibrate; split-complementary softens that vibration while keeping the punch.
• Three usable accents — unlike complementary (which gives you 2), you get a base plus two accents, ideal for primary/secondary/tertiary UI roles.
• Beginner-friendly — it is hard to make a split-complementary scheme look ugly, which is why design teachers recommend it for first projects.
• Color-blind friendlier — because the two accents are not the exact 180° complement, protan/deuteran viewers can usually still distinguish them.

HSL implementation

The math is one line per hue in HSL. Given a base hue H (here we use 220° — a strong blue), the two splits are at (H + 150) mod 360 and (H + 210) mod 360:

:root {
  --base:    hsl(220, 70%, 50%);   /* blue */
  --split-1: hsl(10,  70%, 50%);   /* (220 + 150) mod 360 */
  --split-2: hsl(70,  70%, 50%);   /* (220 + 210) mod 360 */
}

The angle between the two splits is configurable — the default is 60° apart (30° on each side of the complement) but many tools let you tighten or widen this. Narrower splits behave closer to monochromatic complementary; wider splits drift toward a triadic palette.

Applying the 60-30-10 rule

A reliable distribution from interior design that translates perfectly to web UI: 60% of the surface uses the base color (backgrounds, large blocks), 30% uses the first split (secondary surfaces, supporting illustration), and 10% uses the second split as a high-contrast accent for CTAs, links and alerts. The split-complementary palette delivers exactly three roles, which maps one-to-one to this rule.

Where you have already seen this

Hollywood movie posters are saturated with split-complementary palettes — a warm orange skin tone against a desaturated teal and a dark navy is so common that it became a meme ("teal and orange"). Many tech brands lean on base + two accents in their visual systems precisely because it gives data-viz dashboards three categories that read distinctly on a single chart.

FAQ

Why is it better than a pure complementary? Less visual tension. A direct complementary can vibrate uncomfortably at full saturation; the split version keeps the contrast but feels more harmonious.

How many colors does it produce? Always three: the base plus two splits. If you need shades, derive lighter and darker tones of each via lightness (L) variation.

Is it good for beginners? Yes — it is one of the easiest harmonies to balance, far more forgiving than triadic or tetradic schemes.

Does the angle matter? Yes — 30° on each side of the complement is the canonical setting (an "open" 60° split). Smaller angles push the look toward complementary; bigger angles toward triadic.