Complementary Colors
Find the exact opposite of any color — computed in the perceptual OKLCH space so the pair keeps matching vividness — and learn how to use maximum contrast without letting it scream. Free and 100% in your browser.
What makes two colors complementary
Complementary colors sit directly opposite each other on the color wheel — a 180° hue rotation. Blue faces warm orange-gold, red faces cyan-green, purple faces yellow-green. The pairing is not arbitrary aesthetics: your visual system encodes color in opponent channels, and opposite hues maximally excite opposite ends of those channels. That is why staring at a red square leaves a cyan afterimage, and why a complement placed next to a color makes it look more saturated — each pushes the other toward its own opposite.
Why this tool's opposites look better than HSL ones
Rotate hue by 180° in ordinary HSL and the "opposite" of a deep elegant blue is a screaming light orange — HSL pretends all hues are equally bright, so the rotation dumps you at a wildly different perceived lightness. This page rotates in OKLCH instead: the complement inherits your color's perceptual lightness and chroma, so a muted navy gets a muted, dignified amber rather than a traffic cone. If the mathematical opposite falls outside what screens can display, it is gamut-mapped by the CSS Color 4 algorithm — pulled to the nearest displayable color of the same character.
Using maximum contrast without the scream
- Break the symmetry. The classic failure is 50/50 — two saturated opposites in equal amounts vibrate at the boundary and exhaust the eye. Aim for roughly 80/20: one color rules, the other punctuates.
- Desaturate one side. A full-chroma accent over a toned-down complement (or vice versa) keeps the energy and loses the noise.
- Never set text in one complement on the other. Equal-lightness opposites have terrible readable contrast despite the hue drama — verify any text pair in the contrast checker.
- Let lightness referee. A dark blue against a light warm gold is a complementary scheme and a readable one; the lightness gap does the readability work while the hue gap does the emotion.
Where complementary schemes earn their keep
Call-to-action buttons against a brand background, sports and gaming identities, food photography (the orange-teal look that dominates movie grading is a complementary scheme), seasonal retail (blue/gold, red/green) and any moment where one element must be unmissable. When the full-blast pair is still too loud, the split-complementary variant swaps the exact opposite for its two neighbors — same direction, less tension. Everything here runs 100% in your browser; save the pair to My colors and test-drive it in the realistic color tester.
Frequently asked questions
What is the complementary color of blue?
A warm orange-gold. The exact value depends on your blue — enter it above and the tool computes the perceptual opposite; for #3564c4 it lands in the amber range rather than pure orange, keeping the same subdued character.
How do I find a complementary color by hand?
On an HSL wheel, add 180 to the hue and wrap at 360. That is the quick approximation; this tool refines it by rotating in OKLCH so the result also matches your color’s perceived lightness and vividness.
Are complementary colors good for text and background?
Usually not by themselves — opposite hues at similar lightness have poor readable contrast and shimmer at edges. Use a large lightness difference and confirm the ratio in a contrast checker.
Why does a complement make my color look stronger?
Simultaneous contrast: the visual system pushes neighboring colors apart along the opponent axes, so each of the pair appears more saturated next to the other than alone.
Complementary or split-complementary — which should I use?
Complementary for maximum punch with careful dosing; split-complementary when you want the same directional contrast but gentler tension and one extra color to work with.