🎨 Complementary Color Finder
Enter a color and get its exact complementary, the hue directly opposite on the wheel, plus nearby split-complementary options.
Complementary
Exact hue rotations on the color wheel, with HEX, HSL and OKLCH codes. 🔒 Computed in your browser.
How the complementary color finder works
The complementary color is the base hue rotated 180° on the color wheel, keeping saturation and lightness. In HSL terms only the hue angle changes: hsl(30, 90%, 50%) (orange) becomes hsl(210, 90%, 50%) (blue). If the base hue is already above 180° the tool subtracts 180° instead of adding it, so the result always lands back inside 0-360°. It computes the complement exactly and also shows the split-complementary pair (+150°/210°) for a softer high-contrast option, each with HEX, HSL and OKLCH.
Complementary pairs give the strongest color contrast, which is why they draw the eye, useful for a call-to-action against a base brand color. For a less intense version, the split-complementary neighbours are shown too.
Frequently asked questions
What is a complementary color?
The color directly opposite on the color wheel, the base hue plus 180°. Blue's complement is orange; red's is cyan-green. Complementary pairs create the highest contrast.
How do I find a complementary color?
Add 180° to the hue. Enter your color and the tool does it exactly, returning the complement in HEX, HSL and OKLCH.
Worked example: what is the complement of a hue-120 green?
Add 180° to hue 120° to get hue 300°, a magenta, keeping the same saturation and lightness. That opposite pairing is why green and magenta read as maximally contrasting.
What is split-complementary?
Instead of the exact opposite, it uses the two hues either side of it (+150° and +210°). This keeps strong contrast but is less harsh, the tool shows these as well.
Do complementary colors always look good together?
They contrast strongly, which is powerful but can vibrate at full saturation. Muting one or using it only as an accent usually reads better, adjust lightness in the OKLCH value shown.
Is a complementary color the same as its inverse (255 minus each channel)?
No. Those are two different operations. A color-wheel complement rotates only the hue 180° and keeps saturation and lightness, so a dark blue stays dark. An RGB inverse (255−R, 255−G, 255−B) also flips lightness, so a dark blue becomes a light orange. This tool gives the true hue complement.
How do I use complementary colors accessibly?
Two complementary hues at the same lightness can clash and fail contrast for text, and red/green complements are hard for color-blind users. Pair them by making one much lighter or darker than the other, and check the pairing in the contrast checker before using it for text on a background.
Is my color uploaded?
No, the computation is entirely in your browser.