Build a split complementary palette

Generate three HSL colours using one base hue and two split-opposite offsets.

freeworks offlinenothing uploaded
ToolSplit Complementary
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

The input becomes HSL, then hues at 0°, 150°, and 210° are converted back to RGB and hex while saturation and lightness stay constant. This is a geometric hue-wheel relationship.

  • The offsets define the named harmony.
  • No contrast or print-gamut optimization is added.

Worked example

Build a split complementary palette
Find split complementary colors for red
Input
											#FF0000
Output
												#FF0000
#00FF80
#007FFF

When to use this

Brand palettes explore accents, UI themes choose supporting colours, and colour lessons compare hue harmonies.

Edge cases

  • Achromatic input has no visible hue complement.
  • RGB rounding can change a channel by one byte.
  • HSL harmony does not guarantee WCAG contrast.

References