Color

Complementary Color Calculator

Enter a HEX color and see its complement — the hue directly opposite on the color wheel — with both swatches and their codes.

Base#4F46E5hsl(243, 75%, 59%)
Complement#DDE548hsl(63, 75%, 59%)

How it works

Two colors are complementary when they sit directly across from each other on the color wheel. To find one, the tool reads your hex, converts it to HSL, spins the hue by 180 degrees, and converts back. Everything else about the color stays put.

Because only the hue rotates, the complement keeps the same saturation and lightness as your original. That's what makes the pairing feel balanced rather than one color washing the other out.

Complementary pairs create strong contrast, which is great for a call-to-action against its background or an accent that has to stand out. Just use them in moderation — a whole page of opposites can feel loud.

Frequently asked questions

How is a complementary color calculated?

The tool converts your color to HSL, adds 180 degrees to the hue, then converts back to hex. Saturation and lightness are left unchanged, so only the hue flips to the opposite side of the wheel.

What is the complement of red?

Red sits at 0 degrees, so adding 180 lands on cyan-green at 180 degrees. Blue's complement is orange, and yellow's is violet. The calculator shows both swatches so you can judge the pairing by eye.

Why do the swatches share saturation and lightness?

Only the hue changes when you rotate 180 degrees; the vividness and brightness carry over. Keeping those steady is what makes the two colors read as a matched pair instead of a random clash.