Complementary colour finder — the opposite of any colour, three ways

How to use the complementary colour finder

1. Enter your Colour as HEX, rgb(), hsl(), a CSS name or with the picker.
2. Read the four results: Complement (HSL wheel, 180°), Complement (OKLCH, perceptual), RGB complement and Inverse.
3. Compare the original, HSL and OKLCH swatches side by side.
4. Copy the HEX value you prefer.

What it does and when to use it

Complementary colours sit opposite each other on the colour wheel. A complement makes an accent stand out against a main colour: an orange button on a blue page, or a highlight in a chart. This finder gives you the complement in more than one way, because “opposite” depends on the wheel you use, and the results can look very different.

Use the HSL result when you need to match another tool. Use the OKLCH result when you want a partner that looks equally light. If you want more than one partner, the colour harmonies tool shows triadic, split and tetradic sets. For a true channel inversion, use the colour inverter, and to check whether the pair can carry text, use the contrast checker.

How it works

HSL wheel. The colour is converted to hue, saturation and lightness, 180° is added to the hue, and the result is converted back to RGB.

OKLCH wheel. The colour is converted to OKLCH, 180° is added to the hue, and lightness and chroma are kept. If the result is outside the sRGB range, chroma is reduced until it fits (CSS Color 4 gamut mapping).

RGB complement. Each channel c becomes max(R, G, B) + min(R, G, B) − c.

Inverse. Each channel c becomes 255 − c. This is shown for comparison and is not a complement.

Worked examples

These are the tool’s own results.

For blue, the HSL complement is a light orange, while the OKLCH complement is a deeper amber at the blue’s own perceived lightness. For red, the HSL complement and the inverse agree on cyan, but the OKLCH complement is a darker teal.

Limits and tips

• Hue rotation keeps transparency as it is.
• A complement is a starting point. Most designs use it sparingly, for small accents.
• Everything runs in your browser.