Get the complementary color of any color — the hue directly opposite on the wheel. Choose the classic HSL wheel (the 180° rotation designers expect) or the perceptual OKLCH wheel, see both hues side by side, and check whether the pair has enough contrast to ever carry text.
Settings
Generated locally in your browser — your settings and results never leave this page.
Opposition as a design tool
The complementary pair is color theory’s highest-contrast relationship: hues 180° apart, each making the other look more like itself. Blue never looks bluer than beside orange. That mutual amplification is why complements dominate wherever attention is fought for — team sports, film posters, call-to-action buttons — and why they exhaust when overused. The finder computes the pair precisely and, just as important, reports whether it can do more than decorate.
Two wheels, two answers
On the HSL wheel — the one from art class — opposition is arithmetic: hue + 180°. On the perceptual OKLCH wheel, hues are spaced by appearance, so the “opposite” can land meaningfully elsewhere, most visibly around blue-greens. Neither answer is wrong: HSL matches theory and expectation; OKLCH matches perception and keeps the complement’s lightness honest. The toggle exists because the disagreement is real and occasionally decisive.
The contrast reality check
The finder prints the pair’s WCAG ratio because hue opposition and luminance contrast are independent axes — and text needs the second. Red on its cyan complement can measure under 2:1: maximally colorful, minimally readable. When the printed ratio clears 4.5:1 the pair can carry text; when it does not (the usual case at equal lightness), the complement’s role is accent, border, illustration — anything but prose.
Softening the collision
Full-strength complements are a strong spice. The standard tempering moves: shift one side to a tint or tone (dusty orange against navy — the film-poster recipe); use the 80/20 area split; or step to split-complementary, trading the head-on pair for the two flanking hues. The Complementary Palette Generator and its split sibling build those tempered structures directly from this finder’s output.
Complements in the wild
Once you know to look, the pattern is everywhere: orange life vests photographed against blue water, teal-and-orange cinema grading, violet packaging with yellow price tags, red sale banners on green-tinted marketplaces. Each is the same perceptual mechanism — opponent hues amplifying each other — deployed commercially. The finder gives you the exact partner for any starting color, which is the first half of borrowing the technique; the restraint sections above are the second half.
A small professional habit: before finalizing any accent color, check what its complement is. Even when you do not use the complement, knowing it explains the accent’s behavior — why it vibrates near certain photos, why it pops on certain surfaces — because those surroundings were approximating the complement all along.
How to use the Complementary Color Finder
- Pick your base color.
- Choose the wheel: classic HSL or perceptual OKLCH.
- Read both hues, the pair preview, and the honest contrast note.
- Copy the pair or its CSS variables.
Frequently asked questions
What is a complementary color, precisely?
The hue 180° across the color wheel – the color that, mixed with yours as light, would neutralize toward gray. Blue's complement is orange, red's is cyan. Complementaries maximize hue contrast, which is why they dominate sports branding and movie posters.
Why does the tool offer two different wheels?
Because "opposite" depends on the wheel's geometry. HSL's wheel is the classic one your art teacher used; OKLCH's is perceptually spaced, so its 180° often lands on a slightly different – arguably truer – opposite. Compare both; they disagree most in the blue-green region.
Is a complementary pair safe to use as text on background?
Usually not – hue contrast is not luminance contrast. Red text on green may scream visually yet measure 1.3:1 and be unreadable. The tool prints the pair's real WCAG ratio so you use complements as accents unless the number clears 4.5:1.
How do I actually apply a complementary scheme without it clashing?
The old 80/20 rule: let one color dominate and use its complement sparingly for the few things that must pop – CTAs, badges, highlights. Equal amounts fight. The Complementary Palette Generator builds this weighted structure with tints included.
What if the complement looks muddy or harsh?
Shift to the neighbors: split-complementary (the two hues flanking the direct opposite) keeps the tension with less harshness, and adjusting lightness/chroma of the complement in OKLCH tames it without losing the relationship.
Does the complement keep my color's lightness?
On the HSL wheel, H rotates while S and L stay – but perceived lightness can still shift because HSL lies about lightness. The OKLCH wheel holds perceptual lightness genuinely constant, one more reason to try both.
Where does the "complementary" idea come from?
Opponent-process color vision: our visual system encodes red-vs-green and blue-vs-yellow channels, and afterimages reveal the pairings – stare at red, look away, see cyan. The wheel formalizes that physiology into geometry.
