Find the complementary color

Find the geometric HSL hue opposite a supplied colour.

freeworks offlinenothing uploaded
ToolComplementary Color
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, its hue advances by 180° modulo 360, and unchanged saturation and lightness convert back to RGB and hex. The result is the opposite point on the HSL hue circle.

  • A 180° offset defines one pair.
  • HSL lightness is preserved rather than perceptual luminance.

Worked example

Complement of Red
Find the complementary color of red (cyan)
Input
											#FF0000
Output
												#FF0000 -> #00FFFF

When to use this

Design checks find accents, chart themes create pairs, and colour lessons demonstrate hue-circle opposites.

Edge cases

  • Gray has no visible hue complement.
  • RGB rounding can prevent byte-for-byte round trips.
  • A geometric complement can fail contrast requirements.

References