Complementary Color Finder
Find the opposite HSL hue of a HEX color while preserving saturation and lightness, with normalized codes and exact construction angles.
A digital complementary pair has hue directions half a turn apart. Use it to explore an accent against a base color or to check a hue relationship in an existing palette. The output lists the base and related colors in a reproducible order, ready to copy into a digital design. It describes HSL geometry rather than a paint or printing model.
How to use this tool
- Enter an opaque three- or six-digit HEX color, with or without the leading hash.
- Use the fixed angular spacing for this relationship.
- Read the HEX list and the hue-offset table together.
- Test the resulting colors in their actual foreground, background and surrounding layout.
Formula
h₂ = (h + 180) mod 360
Hue wraps at 360 degrees. Saturation and lightness are retained from the original sRGB color before rounding each new RGB channel to the nearest integer from zero to 255. The base HEX is preserved exactly.
Example
Red #FF0000 at hue 0 degrees produces cyan #00FFFF at 180 degrees. Both keep saturation 100% and lightness 50%. For #336699, the HSL complement is #996633, not the channel-inverted color.
Frequently asked questions
Why do all results repeat for gray?
An achromatic color has zero saturation and no defined hue. Rotating its hue cannot introduce color, so gray, black and white produce repeated entries.
Are these colors guaranteed to have good contrast?
No. Equal HSL lightness does not mean equal perceived brightness, and hue separation does not determine text contrast. Check the specific foreground and background pair separately.
Why can two different angles produce the same code?
HEX channels have only 256 values each. At low chroma or very small angular changes, rounding can merge several hue positions. The distinct-color count makes this visible instead of silently removing palette entries.
Sources
Last updated: 2026-10-30