Complementary Colors: The Complete Guide (with Examples)
What are complementary colors? A practical guide to opposite colors on the wheel, real hex pairs, and how to use them without the clash.
On this page▾
Complementary colors are the pairs that sit directly opposite each other on the color wheel — blue and orange, red and cyan, yellow and violet. Pair them well and a layout snaps into focus; pair them carelessly and it vibrates like a stack of highlighters. This guide covers what complementary colors actually are, why "the complement of red" has two different right answers, and how to use opposite colors in real interfaces without the clash.
What are complementary colors?
A complementary color is the one that sits 180° opposite another on a color wheel. Hue runs around the wheel as an angle from 0° to 360°, so finding a complement is a single subtraction:
complement hue = (hue + 180) mod 360
In HSL that means you keep saturation and lightness exactly the same and only spin the hue half a turn. Pure blue is hsl(240, 100%, 50%); rotate the hue 180° and you land on hsl(60, 100%, 50%), which is pure yellow. Nothing else changes.
Two properties make this pairing special. First, complements are the colors that are most unlike each other in hue — there is no third color between them that is "more opposite." Second, when you physically mix a complementary pair, they cancel out: combine them as light and you get white; combine them as pigment and you get a muddy neutral. Mixing a pair of complements in paint is, in fact, one of the most reliable ways to make brown or a desaturated gray.
That neutralizing behavior is the whole reason designers care about complements. Side by side they are maximally vivid; blended together they disappear into neutral. You get to choose how much of that tension to dial in.
RYB vs RGB/CMY: why "the complement of red" depends on the model
Here is the part that trips up most explanations. The complement of a color is not a single universal fact — it depends on which color wheel you are standing on.
| Model | Used for | Primaries | What it answers |
|---|---|---|---|
| RYB | traditional art, paint mixing | red, yellow, blue | the artist's intuition |
| RGB | screens (additive light) | red, green, blue | how monitors actually mix |
| CMY(K) | print (subtractive ink) | cyan, magenta, yellow | how presses actually mix |
On the RYB wheel that has been taught in art classes for two centuries, the famous complementary pairs are red/green, blue/orange, and yellow/violet. On the RGB/HSL wheel that every screen and CSS color uses, the pairs are different: red/cyan, green/magenta, and blue/yellow.
So "what is the complement of red?" is cyan if you mean the digital wheel and green if you mean the painter's wheel. Both answers are correct inside their own model. The reason they disagree is that RYB is a historical, perceptual model of how pigments seemed to behave, while RGB describes how light physically combines. The "true" physics complement — the one where the pair sums to neutral when mixed as light — is the RGB one.
You can watch the models split apart with a simple mixing test:
- Blue light + yellow light → white. These are RGB complements; combined, every channel fires and you get white.
- Blue paint + orange paint → brown. These are RYB complements; combined, the pigments absorb across the spectrum and you get a dark neutral.
Because CSS lives in sRGB, this site's tools all use the RGB/HSL wheel: the complement is an exact 180° hue rotation. Keep that in mind whenever a result surprises your painter's instinct.
The classic complementary pairs (with hex)
These are the exact digital complements — each row is a clean 180° apart in HSL, so you can copy the values straight into CSS.
| Color | HEX | HSL | Complement | HEX | HSL |
|---|---|---|---|---|---|
| Red | #FF0000 | hsl(0, 100%, 50%) | Cyan | #00FFFF | hsl(180, 100%, 50%) |
| Orange | #FF8000 | hsl(30, 100%, 50%) | Azure | #007FFF | hsl(210, 100%, 50%) |
| Yellow | #FFFF00 | hsl(60, 100%, 50%) | Blue | #0000FF | hsl(240, 100%, 50%) |
| Green | #00FF00 | hsl(120, 100%, 50%) | Magenta | #FF00FF | hsl(300, 100%, 50%) |
| Cyan | #00FFFF | hsl(180, 100%, 50%) | Red | #FF0000 | hsl(0, 100%, 50%) |
| Blue | #0000FF | hsl(240, 100%, 50%) | Yellow | #FFFF00 | hsl(60, 100%, 50%) |
The traditional RYB artist's pairs don't map to a clean 180° on the HSL wheel — that mismatch is exactly the point of the previous section — but they're still worth knowing because so much design intuition runs on them:
- Red and green — the Christmas pair, high-energy and festive.
- Blue and orange — the "blockbuster poster" pair (warm skin tones against cool shadows).
- Yellow and violet — the highest natural value contrast, since yellow is light and violet is dark.
Real brand colors rarely sit at pure 100% saturation, so their complements look richer. Tailwind's blue-600 (#2563EB) has the complement #EBAD25, a warm golden amber. Its teal-600 (#0D9488) pairs with a deep crimson #940D19. Same math, more usable colors.
Why complementary pairs pop (simultaneous contrast)
Put two complements next to each other and each one looks more saturated than it does alone. This is simultaneous contrast, first documented by the chemist Michel Eugène Chevreul while managing dye complaints at a tapestry works: a color pushes its neighbors toward its own complement, so a complementary pair reinforces itself in a feedback loop.
There's a physiological echo of this in afterimages. Stare at a saturated red square for fifteen seconds, then look at a white wall, and you'll see a cyan ghost — your eye generates the complement on its own. That built-in pairing is part of why opposite colors feel "made for each other."
The same mechanism is also the source of the clash. When two fully saturated complements of similar lightness meet at a hard edge, the boundary can appear to shimmer or vibrate — the highlighter effect. Bright red text on a bright green background is the textbook offender. The fix is almost always to break the symmetry: change the lightness, drop the saturation on one side, or put a neutral gap between them. That's the whole craft of the next section.
Using complementary colors without the clash
A complementary pair is a seasoning, not a main course. Used 50/50 at full strength it fights itself. The techniques below keep the energy and lose the headache.
Make one dominant, one an accent
The single most important rule: don't split the screen evenly. Pick one color to carry the design and let its complement appear in small, deliberate doses. The classic ratio is 60-30-10 — 60% a dominant color (often a near-neutral tint of your brand hue), 30% a secondary, and 10% the complementary accent on the things you want noticed.
Desaturate or re-light one side
Pure-against-pure is what vibrates. Soften one half of the pair and the tension turns elegant:
- Navy with soft peach instead of royal blue with pure orange.
- A muted sage green with a dusty rose instead of green with red.
- A deep teal with a warm terracotta rather than electric crimson.
Lowering saturation, or pushing one color much lighter or darker, preserves the complementary relationship while removing the glare.
Let neutrals do the spacing
White space, grays, and tints of your dominant color give the eye somewhere to rest, so the two saturated colors never share a hard, equal-value border. Most "tasteful" complementary palettes are really one hue, its complement as a 10% accent, and a lot of neutral in between.
Audition any pairing in the Color Preview tool before you commit — seeing the two colors at realistic proportions on a real layout tells you in seconds whether the balance works. When you're happy with the pair, expand it into a full set of tints and shades with the Color Palette Generator.
Split-complementary and double-complementary
Straight complementary is the two-color version. Two close relatives give you more room to work, and both belong to the same family of color schemes.
Split-complementary
Instead of using a color's exact complement, you use the two colors on either side of it — roughly 150° and 210° from the base. You keep most of the complementary contrast but gain a third color and a much wider margin for error, because the eye no longer has to balance a perfect opposition.
Take a base of #2563EB (blue). Its split-complementary partners are a warm red-orange #EB4A25 and a yellow-green #C6EB25. With pure blue #0000FF, the split lands on orange #FF8000 and chartreuse #80FF00. It's a great default when a full complementary pair feels too aggressive.
Double-complementary (tetradic)
A double-complementary, or tetradic, scheme uses two complementary pairs at once — four colors forming a rectangle on the wheel. From #2563EB that's #2563EB, #EB25C6, #EBAD25, and #25EB4A. It's rich and flexible but genuinely hard to balance: with four strong hues you must still pick one to dominate and let the rest support, or the design tears in four directions.
Complementary colors in UI
Calls to action
This is where complements earn their keep. Make your interface mostly one brand hue and reserve its complement for the one thing you want clicked. A blue product with an amber CTA is a complementary pairing in disguise — blue-600 (#2563EB) sits at hue 221°, so its exact 180° opposite lands at hue 41°, and amber-500 (#F59E0B) sits right beside it at hue 38°.
:root {
--brand: #2563eb; /* blue-600, dominant */
--accent: #f59e0b; /* amber-500, ~complement of the brand */
}
.btn-primary {
background: var(--accent);
color: #1f2937; /* dark text — white fails on amber, see below */
}
Charts and data
For a two-series comparison — actual vs. forecast, gain vs. loss — a complementary pair reads instantly as "two opposites." But prefer blue and orange over red and green: red-green is the most common form of color blindness, while blue/orange stays distinguishable for nearly everyone. Beyond two categories, reach for a broader palette rather than stretching a single complementary pair.
The text-and-background trap
The biggest myth about complements is that opposite means readable. It doesn't. Contrast depends on lightness, not hue — and many complementary pairs sit at nearly the same lightness.
| Pair | Contrast ratio | WCAG AA body text (4.5:1) |
|---|---|---|
Red #FF0000 on cyan #00FFFF | 3.19:1 | Fails |
White on blue-600 #2563EB | 5.17:1 | Passes |
White on amber-500 #F59E0B | 2.15:1 | Fails |
Blue #0000FF on yellow #FFFF00 | 8.00:1 | Passes |
Red on cyan are perfect complements and still fail for body text, because their lightness is almost identical. Blue on yellow passes comfortably — not because they're complementary, but because yellow is light and blue is dark. The lesson: never assume a complementary pair is legible. Run every text/background combination through the Color Contrast Checker before you ship it.
How to find any color complement
You don't have to do the hue math by hand. Drop a color into the Complementary Color Finder and it returns the exact 180° complement plus the split-complementary trio, each in HEX, RGB, and HSL ready to copy.
A reliable workflow:
- Find the complement. Paste your brand color into the finder and grab its opposite (and split-complementary options if a pair feels too tense).
- Build the palette. Send the pair into the Color Palette Generator to create tints, shades, and neutrals so you have a full working system, not just two swatches.
- Check legibility. Run any text-on-color combination through the Color Contrast Checker and adjust lightness until it passes.
- Preview in context. Drop the colors into Color Preview to see the dominant-and-accent balance on a realistic layout before you build.
Frequently asked questions
What is the complementary color of blue?
It depends on the color model. On the RGB and HSL wheel that screens use, blue (#0000FF) sits opposite yellow (#FFFF00). On the traditional RYB artist's wheel, blue's complement is orange. Both are correct for their own model.
Are red and green complementary?
On the traditional RYB color wheel, yes — red and green are the classic complementary pair (think Christmas). On the digital RGB/HSL wheel they are not: red's complement is cyan and green's is magenta, because red and green sit only 120 degrees apart there.
Why do complementary colors look good together?
Because they share no common hue, a complementary pair creates the maximum hue contrast and triggers simultaneous contrast, where each color makes the other look more vivid. Used as a dominant color plus a smaller accent, that tension reads as balanced and energetic.
What is split-complementary?
Split-complementary is a three-color scheme: a base color plus the two colors on either side of its complement, roughly 150 and 210 degrees away. It keeps the punch of a complementary pairing but is easier to balance and less likely to vibrate.
Do complementary colors work for text and background?
Not reliably. Complementary means opposite in hue, not high in contrast — contrast depends on lightness. Red on cyan only scores about 3.2:1 and fails WCAG AA for body text, so always check a pair in a contrast checker before using it for text.