Complementary Color
Pick any color and instantly see its complementary color — the exact opposite on the color wheel — with HEX, RGB and HSL codes. Free, instant and 100% in your browser.
Base color
Complementary color
How to find a complementary color
- Choose your base color. Use the color picker or type a HEX code such as #1E90FF (with or without the #). You can also hit 🎲 Random for inspiration.
- Read the result instantly. The complementary color appears next to your base color the moment you change it, with matching HEX, RGB and HSL codes.
- Copy the codes. Click Copy next to any code, or copy both HEX values at once to paste into your CSS, design tool or document.
About this tool
A complementary color is the color that sits exactly 180° across the color wheel from your starting color — blue pairs with orange, red with cyan, green with magenta. This complementary color finder does the math for you: it converts your color to HSL, rotates the hue by half a turn while keeping the same saturation and lightness, and converts the result back to HEX and RGB. Designers use complementary pairs for high-contrast accents, call-to-action buttons, sports branding and photography color grading.
Everything is calculated locally in your browser with plain JavaScript — no uploads, no accounts and no limits. Once loaded, the page even works offline. If you need more than a single opposite color, try the full Color Scheme Generator for analogous, triadic and tetradic palettes built from the same base color.
Frequently asked questions
What exactly is a complementary color?
It is the color positioned directly opposite yours on the color wheel — a 180° hue rotation. Placed side by side, complementary colors create the strongest possible hue contrast, which is why they are popular for accents and highlights.
Is this the same as inverting the RGB values?
No. RGB inversion (255 minus each channel) also flips the lightness, so a dark red becomes a light cyan. This tool rotates only the hue, keeping the original saturation and lightness, which is what designers usually mean by "complementary".
Why does a gray input return the same gray?
Grays, black and white have zero saturation, so they have no hue to rotate. Their position on the color wheel is the center, and the opposite of the center is still the center — the complement of a neutral is itself.
When should I use complementary colors?
They work best when one color dominates and the other is used sparingly as an accent — for example a blue interface with orange buttons. Avoid setting complementary colors as text on background at full saturation, as the edge can appear to vibrate.