What is a complementary color?
A complementary color is the color directly across the color wheel from the one you start with. The Complementary Color Finder takes a color you already have, as a hex code or an rgb() value, and shows its complement beside it as two big swatches. Each swatch lists its HEX, rgb() and hsl() value, and each value has its own Copy button. Paste #3366CC, a mid blue, and you get #CC9933, a warm gold. No button to press. The pair updates as you type.
Complements matter because they push each other. Put a blue next to its gold and both look stronger than either does alone. That is why designers reach for the complement when they need an accent that stands out: a button, a badge, a highlight on a chart.
There is a catch most people find out the hard way. "Across the wheel" depends on which wheel you mean, and there are two in common use.
On a screen: the RGB wheel
Screens make color by adding red, green and blue light. On that wheel, red sits opposite cyan, green opposite magenta, and blue opposite yellow. If your color ends up on a website, an app or a slide, this is the wheel that describes what the eye actually sees. The Complementary Color Finder opens on this wheel, labeled Screen (RGB).
In paint: the RYB wheel
Painters mix pigment, and the wheel taught in art class is built on red, yellow and blue. On that wheel, red sits opposite green, yellow opposite purple, and blue opposite orange. Switch the toggle to Paint (RYB) and you get the answer your art teacher would give. Neither wheel is wrong. They describe different materials, and the tool keeps one sentence on screen at all times so you never forget which one you're on.
How the Complementary Color Finder works
The screen wheel uses one line of arithmetic. Take the largest of the three RGB channels, add the smallest, and subtract each channel from that sum.
complement channel = max + min − channel. For #CC3333, that's rgb(204, 51, 51). The sum is 204 + 51 = 255, so the complement is rgb(255 − 204, 255 − 51, 255 − 51) = rgb(51, 204, 204), or #33CCCC.
This is the same as turning the hue 180° while keeping saturation and lightness. The difference is that it works on whole numbers, so it never drifts. Run the default color twice and you land back where you started: #3366CC gives #CC9933, and #CC9933 gives #3366CC.
The paint wheel takes more work, because the RYB wheel isn't evenly spaced the way RGB is. Reds, oranges and yellows fill half the paint wheel but only a sixth of the screen one. So the tool reads the color's hue, stretches it onto the RYB wheel, turns it 180°, and maps it back. Saturation and lightness stay as they were. The result: #CC3333 gives #33CC33, a green with the same 60% saturation and 50% lightness as the red you started with.
Here's the full flow, start to finish:
- Paste your color into the field.
#3366CC,3366cc,#36Candrgb(51, 102, 204)all mean the same blue. - Pick the wheel: Screen (RGB) for anything on a display, Paint (RYB) for pigment and art class.
- Click Copy next to the value you need, or Copy both as CSS.
That last button writes two custom properties, ready for a stylesheet:
--color-base: #3366CC;--color-complement: #CC9933;
Complementary colors for common colors
Every row below came straight out of the tool. The middle column is the screen answer. The last column is the paint answer.
| Color | Hex | Screen (RGB) complement | Paint (RYB) complement |
|---|---|---|---|
| Red | #FF0000 | #00FFFF (cyan) | #00FF00 (green) |
| Orange | #FF8000 | #007FFF (azure) | #0100FF (blue) |
| Yellow | #FFFF00 | #0000FF (blue) | #FF00FF (purple) |
| Green | #00FF00 | #FF00FF (magenta) | #FF0000 (red) |
| Cyan | #00FFFF | #FF0000 (red) | #FF4000 (red-orange) |
| Blue | #0000FF | #FFFF00 (yellow) | #FF8000 (orange) |
| Purple | #800080 | #008000 (green) | #808000 (olive) |
| Teal | #008080 | #800000 (maroon) | #802000 (rust) |
| Navy | #000080 | #808000 (olive) | #804000 (brown) |
| Pink | #FFC0CB | #C0FFF4 (mint) | #CBFFC0 (pale green) |
| Saddle brown | #8B4513 | #13598B (steel blue) | #133B8B (deep blue) |
| Brand blue | #3366CC | #CC9933 (gold) | #CC7333 (burnt orange) |
Three patterns stand out. First, the two wheels agree on almost nothing. Only the paint wheel pairs blue with orange, and only the screen wheel pairs blue with yellow. If a tutorial says "blue's complement is orange" and your screen tool says yellow, both are telling the truth about different wheels.
Second, complements keep their lightness. Navy is dark, so its complement is a dark olive, not a bright yellow. Pink is pale, so its complement is a pale mint. The tool turns the hue and leaves everything else alone. If you want a brighter or deeper accent, take the complement first, then adjust it.
Third, warm colors get cool complements on both wheels, but the paint wheel pulls them warmer. A brand blue lands on gold on screen and on burnt orange in paint. Designers who want a more traditional, painterly pairing sometimes use the paint wheel on purpose, even for web work. That's a style choice, and the toggle makes it a one-click one.
When you need a complementary color
Most people land here with a color already in hand. A few real moments:
- A brand color needs an accent. Your logo is
#3366CCand the "Buy" button has to pop. The complement,#CC9933, is the classic starting point. - A chart needs two series that never get confused. Opposite hues are the easiest pair to tell apart at a glance.
- Art homework. "What is the complement of blue?" The class expects orange, so that's the paint wheel. A screen tool that only knows RGB will say yellow and cost you the point.
- Mixing real paint. A dab of a color's complement dulls it toward gray. Painters use this to tone down a color that's too loud, and the paint wheel tells you which tube to reach for.
The Complementary Color Finder works the same whether you're a freelancer on your own brand, a student finishing a project, or someone at a big company squeezing in a side job between meetings. Open it, paste, copy, leave.
That's on purpose. Plenty of color work lives inside software built the other way: a color wheel three menus deep in a design suite you pay for every month, or a palette site that wants an account before it lets you save or export a hex code. A complement is one line of math. It shouldn't come with a login. Here there's nothing to save and nothing to sign up for. The answer is a hex code, and the Copy button is right next to it.
Edge cases and gotchas
Grays, black and white have no complement
A gray has no hue, so there is nothing to turn around the wheel. Paste #808080 and the Complementary Color Finder returns #808080 on both wheels, with a note saying why. Add the smallest hint of color and you get a real pair: #808090, a gray with a touch of blue, gives #909080 on screen, a gray with a touch of yellow.
A complement is not a readable text color
Because complements keep their lightness, the pair is often too close in brightness for text. Blue #3366CC on its gold #CC9933 has a contrast ratio of 2.09:1. The common accessibility guideline for body text asks for 4.5:1. Use the complement for shapes, borders, icons and big buttons. For text, put it on white or a dark neutral.
Quick check: if you squint and the two swatches look like the same gray, don't set one as text on the other. They're made to contrast in hue, not in brightness.
The paint wheel rounds
The screen wheel is exact and always reversible. The paint wheel maps hues back and forth, then rounds each channel to a whole number, so it can land one step off. Orange #FF8000 gives #0100FF, not pure #0000FF. Run #3366CC through the paint wheel twice and you get #3365CC, one digit away from where you started. You won't see the difference, but if you're checking codes against a list, now you know why.
What the field refuses
Channels above 255, like rgb(300, 0, 0), are refused, not quietly clamped to 255. A clamp would answer for a color nobody typed. Eight-digit hex with transparency, like #3366CC80, is refused too: the complement of a see-through color depends on what's behind it. Color names like blue aren't read yet, so use the Color Name Finder or a hex instead. Every refusal shows the same plain message with a format that works. An empty field shows nothing at all, not an error.
Related color tools
The complement is one color. If you need a full set, the Color Palette Generator builds five-color palettes from a picker, with complementary, split-complementary, triadic, analogous and monochromatic modes. Start there when you have no colors yet. Start here when you already have one and need its exact opposite.
Need the same color in another format? The Color Converter moves between HEX, RGB, HSL and HSV, and Hex to RGB does the one conversion most people need. If you're hunting for a starting color, the Hex Color Picker lets you pick one by eye and read off its HEX, RGB and HSL. To check that your pair still works for everyone, run a screenshot through the Color Blindness Simulator. Red and green complements are the pair most likely to collapse into one muddy tone for color-blind viewers.
Frequently asked questions
What is the complementary color of blue?
On a screen, pure blue #0000FF pairs with yellow #FFFF00. On the paint wheel it pairs with orange, #FF8000. Use yellow for web and app work and orange for paint or art class.
What is the complementary color of green?
Pure green #00FF00 pairs with magenta #FF00FF on screen and with red #FF0000 on the paint wheel. The red-and-green pairing you know from art class is the paint wheel's answer.
Is the complement of the complement the original color?
On the screen wheel, always and exactly: #3366CC goes to #CC9933 and back to #3366CC. On the paint wheel it can come back one digit off because of rounding, so #3366CC returns as #3365CC.
Why is the complement of my light color also light?
The complement keeps your color's saturation and lightness and only turns the hue. Pale pink #FFC0CB stays pale and becomes mint #C0FFF4. Want a deeper accent? Paste the complement into the Hex Color Picker and drag it darker.
Can I use complementary colors for text and background?
Usually not. A color and its complement often share the same brightness, so text is hard to read. #3366CC on #CC9933 scores 2.09:1, well under the 4.5:1 that body text needs. Keep complements for accents and keep text on white or near-black.
Does the tool send my colors anywhere?
No. The math runs in your browser as you type. The Complementary Color Finder has no account and saves nothing. The only thing that leaves the page is what you copy.