Complementary Color Finder

What complementary colors are

Complementary colors sit directly across from each other on the color wheel — exactly 180° apart in hue. Spin the wheel from any starting color and the shade you land on at the opposite point is its complement: red pairs with cyan-green, blue with orange, yellow with violet. Because the two hues share no common wavelength bias, placing them side by side makes each one look more intense than it would alone, which is why complementary pairs feel so punchy in logos, sports kits and call-to-action buttons.

This tool finds that opposite for you. Enter a base color as HEX, RGB or HSL — or pick it from the swatch — and it rotates the hue by 180° while keeping the saturation and lightness intact, then reports the result in HEX, RGB and HSL so you can copy whichever format your workflow needs. Working in hue space is what makes the math reliable: a complement is a rotation, not a guess.

Complementary vs split-complementary vs triadic

A straight complementary scheme is just two colors: your base and its single 180° opposite. It is the highest-contrast pairing on the wheel, but two saturated opposites can feel aggressive, so it is often used sparingly — one dominant color with the complement reserved for accents.

A split-complementary scheme softens that tension. Instead of the exact opposite, it takes the two hues that sit on either side of the complement — roughly 150° and 210° from the base. You keep the lively contrast of a complementary pairing but gain a third color and a gentler, more balanced feel that is easier to build a full interface around. A triadic scheme spaces three colors evenly at 120° intervals; it is vibrant and well-balanced but lower-contrast than a true complement. Switch between all three modes above to compare them on your own color.

Using complements without "vibrating"

When two fully-saturated complements meet along a hard edge — think bright red text on a bright green field — the boundary can appear to shimmer or buzz. This optical effect is called vibration, and it makes text painful to read and interfaces tiring to look at. The fix is not to abandon the pairing but to break the tie:

• Desaturate or lighten one side. Drop the complement to a muted or pastel version and use the saturated base as the hero color.
• Change the proportions. Let one color dominate (say 80%) and use the complement only for small accents — buttons, links, badges.
• Add a buffer. A thin white, black or neutral border between the two colors stops the edges from vibrating.

Checking the pair for accessibility

A common myth is that complementary colors automatically have good contrast. They do not. Contrast for readability depends on relative luminance (how light or dark a color is), not on how far apart the hues are. Two complements with similar lightness — a mid-blue and a mid-orange, for example — can sit at a contrast ratio well below the readable threshold even though they look strikingly different.

That is why this finder shows the WCAG contrast ratio of the pair and a pass/fail badge. The guideline for normal body text is a ratio of at least 4.5:1 (3:1 for large text). If the badge says the pair fails, do not use one color as text directly on the other — adjust the lightness of one side, or keep the complement for decorative fills where contrast rules do not apply.

Related tools

Once you have a pair you like, send it to the Contrast Checker to fine-tune readability, expand it into a full scheme with the Palette Generator, or build light and dark variants with the Shade & Tint tool. The Color Format Converter is handy whenever you need a value in a notation this page does not show.

Learn more

For the design theory behind opposite colors, see the Interaction Design Foundation guide to color theory and Adobe's explainer on the color wheel and color harmonies.