Free complementary color finder
The complementary color, and the version that works
Type a color and its opposite appears immediately — three times, because the wheel flip, the perceptual opposite and the browser's own hue-rotate land on three different pixels, and the gap between them is printed in ΔE so the choice is deliberate. Underneath, the same pair is put to work: 268 of the 360 full-saturation flips fall below the 4.5:1 a page needs for body copy, so the tool trims chroma and walks lightness until yours clears it. Free and no signup, with the split complement on a slider from 5° to 70° for when the true opposite is too loud to use.
- 100% free
- No signup
- 3 opposites compared
- ΔE between them
- Rebalanced to 4.5:1
Press Ctrl+V anywhere on the page to drop in the color you want the opposite of — no need to click the field first.
Three opposites, and how far apart they land
Wheel opposite (HSL hue + 180°)
#EBAD25
Saturation and lightness held, hue moved half a turn. This is the textbook answer.
Perceptual opposite (LCH hue + 180°)
#547900ΔE 53.5 from the wheel answer
Same half turn, but measured on the axis the eye uses, so both colors keep the same perceived lightness and colorfulness.
CSS filter: hue-rotate(180deg)
#9A5C00ΔE 35.5 from the wheel answer
The 3×3 matrix a browser actually runs. It is a linear approximation, so it changes saturation as a side effect.
Split complement — stop short of the opposite
base
150°
210°
Why the raw pair fights, and the version that does not
Straight off the wheel
Twelve words of body copy
set in the partner color on the base color.
2.59:1 below 4.5:1
Saturation and lightness matched on both sides, so whatever contrast this has is an accident of where the two hues fall, not of how far apart they are.
#EBAD25
Rebalanced for text
Twelve words of body copy
set in the partner color on the base color.
4.58:1 clears 4.5:1
Same hue, chroma cut to 65%, lightness walked away from the base until the pair reached 4.5:1.
#FFF3A1
The same two hues at 60 / 30 / 10
Sixty percent base, thirty percent neutral, ten percent opposite. The pair that was unusable at 50/50 is the standard way an accent gets used, and nothing about the two colors changed.
How to find a complementary color
One value in, and three defensible answers plus a usable one out.
Enter the color you want the opposite of
Type into the field or paste over it — hex with the hash or without, a CSS keyword such as rebeccapurple, an rgb() triplet or an hsl() value all resolve, and the system picker beside it is there when you would rather point than type. An unreadable string turns the field orange and leaves the results on the last color that parsed, so you never end up reading numbers for black by accident.
Compare the three opposites before you commit
The first block gives the wheel flip, the perceptual opposite and the browser's filter result, each with its hex and each measured in ΔE against the wheel answer. A gap under about 2.3 means the two are indistinguishable side by side and the choice does not matter; a gap in the twenties means you are choosing between visibly different colors and should pick on purpose.
Soften it, or make it carry text
Slide the split angle to back away from the exact opposite — 30° is the conventional stop, giving partners at 150° and 210° — or scroll to the rebalanced pair, where the opposite keeps its hue, loses a third of its chroma and is walked along the lightness axis until the two clear 4.5:1 together. Where the base sits too close to mid luminance for that to be possible the card says so and prints the ceiling instead. The 60/30/10 strip at the bottom shows the untouched pair doing the job it is actually good at.
Technical specifications
| Opposites computed | Three — HSL hue plus 180°, LCH hue plus 180° at constant lightness and chroma, and the Filter Effects hue-rotate matrix at 180° |
|---|---|
| Divergence measure | CIE76 ΔE against the HSL answer, printed per row; below 2.3 no eye separates the pair |
| Worked example | #ff0000 opposes #00ffff by HSL, #00a2f3 by LCH once the out-of-gamut result is clipped into sRGB, and #006d6d through the CSS filter |
| Split complement | Adjustable 5° to 70° off the opposite; the conventional 30° gives 150° and 210° |
| Rebalancing rule | Chroma reduced to 65%, LCH lightness stepped one point at a time in both directions, stopping at the first value that reaches 4.5:1 |
| Contrast of a raw pair | WCAG 2.1 relative luminance; across the 360 full-saturation flips the ratio runs from 1.02:1 to 8.00:1, and 268 of them land under 4.5:1 |
| Accepted input | Three, four, six and eight digit hex with or without the hash, rgb() and hsl() in both syntaxes, and 148 CSS keywords |
| Cost | Nothing — the whole page is three matrix multiplications and a 200-step lightness search, so there is nothing to meter |
Frequently asked questions
Why does CSS hue-rotate(180deg) not give me the complement?
Because hue-rotate is a fixed 3×3 matrix, not a trip through a color wheel. Filter Effects Module 1 defines the shorthand as a linear approximation applied to gamma-encoded sRGB, and a linear operation cannot preserve saturation while turning hue, so the result drifts. Feed it pure red and it returns #006d6d, a muted teal, where the wheel opposite of #ff0000 is #00ffff — the hue is roughly right and roughly two thirds of the saturation has gone. Use the filter when you are genuinely applying a filter to a whole element, and use a computed value when you need a color.
The two colors make the edge between them shimmer. What is that?
Your visual system has no luminance boundary to lock onto, so it never settles. Edge detection in early vision runs almost entirely on luminance, and when two hues happen to sit at nearly the same relative luminance the boundary between them exists only in the chromatic channels, which resolve far less sharply. On top of that the lens refracts short and long wavelengths to slightly different depths, so a saturated blue on a saturated red appears to sit at a different distance — an effect called chromostereopsis. Neither problem is caused by the colors being opposite; both are caused by their luminance matching, which is why the fix is a lightness change and not a hue change.
What is the practical difference between a complement and a split complement?
A split complement keeps the tension and drops the confrontation. Instead of one partner at 180° you take the two hues flanking it, conventionally at 150° and 210°, which gives you a three-color set where nothing is anybody's exact opposite. Nothing sits at the point of maximum hue conflict, so the set tolerates being used at larger areas than a true pair does, and the two flanking hues are close enough to each other to act as one family with the base as the outsider.
Which of the three opposites should I actually ship?
The HSL flip, unless you have a reason to want one of the others. It is what every other tool and every design handbook means by the word, so a hex from it will match what a colleague gets elsewhere. Reach for the LCH opposite when both colors have to feel equally strong — it holds perceived lightness and colorfulness constant, so neither side wins by accident — and reach for the filter value only when you are literally writing a hue-rotate rule and need to know what will come out.
Why is the hex here not the color I see as an afterimage?
Because an afterimage is a fatigue effect in the retina and a wheel opposite is a piece of geometry. Stare at a saturated patch and the cone types responding to it adapt downward, so when you look away the opponent channels rebound and you see something in the vicinity of the complement — but the amount of rebound depends on how long you stared, on how bright the room is and on which cones were loaded. Nothing about that process is committed to landing 180° from where you started, so the two agree in family and disagree in the digits.
Can a grey have a complement?
No, and the tool will hand you the same grey back. Hue is undefined at saturation 0 — every hue produces the same pixel — so rotating it by 180° is arithmetic on a number that does not describe anything, and #808080 flips to #808080. If a near-grey is what you have, the interesting question is usually which hue it is nearly, and a color with even 3% saturation will flip to a visibly different near-grey.
After the rebalancing, is it still the complement?
Yes — the hue is untouched. The rebalanced swatch keeps the same angle on the wheel and moves only along the two axes that carry no hue information: lightness, pushed away from the base half a step at a time until the pair reaches 4.5:1, and chroma, cut to 65% so the two are not competing at equal intensity. Anyone checking your work by rotating the hue of the base will land on the same family; they will just find you had an opinion about how much of it to use.
About opposites, and the reason they fight
The definition worth holding onto is additive: two colors are complementary when the light from them adds up to a neutral. On a screen that is literally true and literally checkable — #ff0000 and #00ffff sum to #ffffff channel by channel, and so do #00ff00 and #ff00ff — which is why the sRGB circle places cyan opposite red and why a hex code has an opposite at all. The same word means something looser once saturation and lightness stop being maximal, because #7f1d1d and its flip do not sum to white; they sum to a mid grey. What survives in every case is the angle, and the angle is the part every tool agrees on. The interactive wheel shows the same relationship as geometry alongside the other five.
What almost nothing tells you is how little the raw pair can be trusted to do. Both colors leave the flip with the same saturation and the same HSL lightness, but HSL lightness is not luminance: the WCAG formula weights green at 0.7152 and blue at 0.0722, so how much contrast an opposition produces is decided by where the two hues sit relative to the green axis, not by the fact they are opposite at all. Blue against its yellow reaches 8.00:1; green against its magenta manages 2.29:1; run all 360 full-saturation flips and 268 of them fall short of body-text contrast. There is also a ceiling nobody mentions — a base near mid luminance such as #e11d48 tops out at 4.74:1 against pure white, so no partner of any hue will ever carry text on it. The remedy is always the same three moves: separate on lightness, cut the chroma of whichever color is playing support, and give the two unequal amounts of the page. If your two colors are already fixed and you only want the verdict, the contrast checker scores them directly, and the scheme generator does the lightness separation across a whole interface rather than one pair.
The common failure in tools that answer this query is stopping at the swatch. A page renders two rectangles, prints two hex codes and leaves the reader to discover in Figma that the combination is unworkable, often while showing a red-yellow-blue wheel graphic beside a calculation done in HSL — an inconsistency nobody notices because the graphic is decoration. The second failure is treating the exact opposite as the goal, when in practice a split complement, a near-complement 20° short of the mark, or the same opposite used at a tenth of the area is what ships. If you are heading toward mixing rather than opposing, the color mixer blends the pair in three different spaces, and if the base color is sitting in a screenshot rather than in a brand guide, lift it with the image color picker first.
Where the opposite is worked out
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The color in the field is state in this tab and nothing more — there is no saved history here and no key written to storage, so a reload puts the page back to #2563eb and the value you were checking is gone.