What Are Complementary Colors? Opposites on the Color Wheel and How to Use Them Without Mistakes
Complementary colors are “colors directly opposite each other on the color wheel,” yet some sources say red's complement is cyan and others say it is green. This guide explains why the two answers differ, lists the classic pairs, and covers the area ratios that make complementary colors work in a design.
What complementary colors are
Complementary colors are pairs of colors located directly opposite each other on the color wheel. When mixed, they cancel out each other's saturation and move toward a neutral (gray or white); when placed side by side, they make each other stand out more than any other pair.
Designers value complementary colors precisely because they “bring each other out.” Putting the complement behind the subject you want to highlight in a photo, or making only the button the complement of the body color, draws the eye without cranking up saturation.
- Side by side they stand out: the strongest contrast and the most eye-catching combination
- Mixed they turn muddy: mixing the two paints lowers saturation and moves toward gray
- They appear in afterimages: stare at a color and then look at a white surface, and its complement seems to float there
Why “the opposite of red” is sometimes cyan and sometimes green
Look up complementary colors and you will find explanations saying red's complement is cyan (light blue) and others saying it is green. Neither is wrong; they simply assume different color wheels.
| Color wheel | Where it's used | Complement of red |
|---|---|---|
| RGB / HSV color wheel | Screens, web design, image editing | Cyan (hue rotated 180 degrees) |
| RYB color wheel | Paints, art education, traditional color theory | Green |
| Psychological complement (afterimage) | The color seen as an afterimage | Cyan leaning toward blue-green |
If you work on screen design or process images in apps, the RGB/HSV color wheel is the practical standard. Because colors are handled as numbers, you can find a complement with simple arithmetic: add 180 to the hue (and subtract 360 if it goes over).
Classic complementary color pairs
These are the classic pairs for screen use (RGB/HSV). Hue angles are included so you can enter them directly in a design tool's color picker.
| Color | Hue | Complement | Impression of the pair |
|---|---|---|---|
| Red | 0° | Cyan 180° | Strongly eye-catching; good for warnings and emphasis |
| Orange | 30° | Azure (sky blue) 210° | A classic that looks natural in sunsets and photos |
| Yellow | 60° | Blue 240° | Large lightness difference; very high visibility |
| Green | 120° | Magenta 300° | Very stimulating; needs a careful area balance |
| Cyan | 180° | Red 0° | A contrast of cool and warm |
| Blue | 240° | Yellow 60° | A readable contrast also used on road signs |
Pairs with a large lightness difference, such as yellow and blue, remain readable even for small text. Pairs with similar lightness, such as red and green, are hard to tell apart for people with certain types of color vision, and when their areas are similar they can appear to flicker.
3 tips for using complementary colors in a scheme
Complementary colors are a strong pairing, so splitting them half and half makes a restless design. Keep these three points in mind and you will rarely go wrong.
- 1
Skew the areas heavily
Base 70%, main 25%, accent 5% is the classic ratio. Put the complement in the 5% accent and use it only where you want people to click, such as buttons and links.
- 2
Lower the saturation or lightness of one
Two pure hues clashing is too strong. Mute one, darken it, or lighten it with white, and the contrast remains while the design becomes easier on the eyes.
- 3
Put a neutral between them
A white, gray, or black line or margin at the boundary suppresses vibrating edges (halation). This is especially effective when text and background are complementary.
When two complements are too strong, a split-complementary scheme, which uses the two colors on either side of the complement, keeps the contrast while being easier to handle. For blue, for example, instead of yellow you pair it with an orange-leaning color and a yellow-green-leaning color. How to build the whole scheme beyond complementary colors is covered in How to Choose a Color Scheme.
Common mistakes and how to fix them
| Mistake | What happens | Fix |
|---|---|---|
| Using pure complements half and half | Restless; nobody knows where to look | Limit one to the accent and make the areas very different |
| Setting text in one complement on the other | Edges flicker and text is hard to read | Add a lightness difference, or put a white edge or margin between them |
| Separating information by red and green only | People with different color vision can't tell them apart | Add non-color cues such as shapes, icons, and labels |
| Complementary text on top of a photo | The busy background swallows the text | Lay a semi-transparent band first, then place the text |
| Overusing complements on every page | Emphasis stops working | As a rule, use one complementary accent per screen |
Be especially careful not to separate meanings with a red-green pair alone. Depending on color vision, they can be hard to distinguish, so show important information such as success vs. failure or required vs. optional with symbols or words in addition to color.
Feel “opposite colors” with complementary afterimages
Complementary relationships sink in faster when you see them than when you memorize them. The easiest way is a complementary afterimage. Stare at a color for a few dozen seconds, then move your eyes to a white surface, and the color's complement appears to float there.
- 1
Stare at a color-inverted image
The Color Afterimage Illusion tool automatically inverts a loaded image into its complementary colors and displays it.
- 2
Switch to the black-and-white image
After staring for about 20 seconds, the view switches to black and white, and colors close to the original photo appear even though the image has none. That is the complementary afterimage.
- 3
Compare with the original color image
Comparing the colors you saw with the real ones confirms that the inverted image was exactly the complement.
This happens because the eye adapts to a constant color and lowers its sensitivity to it. A detailed explanation and the steps for making an illusion image from a photo are in the color afterimage article. The longer you stare, the stronger the afterimage, but your eyes also get more tired, so take breaks while you try it.
FAQ
- What are complementary colors, in simple terms?
- They are colors directly opposite each other on the color wheel. Mixed, they cancel each other's saturation and approach a neutral; side by side, they bring each other out more than any other pair. On the RGB color wheel used for screen design, red and cyan, green and magenta, and blue and yellow are the classic pairs.
- Is the complement of red green or cyan?
- Both answers are correct; they just assume different color wheels. On the RYB color wheel used for paint, red's opposite is green; on the RGB/HSV color wheel used for screens, it is cyan, the hue rotated 180 degrees. For web and app design, using cyan matches the numbers in color pickers and is easier to work with.
- Complementary colors make my design too loud. What can I do?
- Skewing the areas is the most effective fix. Aim for base 70%, main 25%, accent 5%, and use the complement only in the 5% accent. If it is still too strong, lower the saturation or lightness of one, put white or gray at the boundary, or switch to a split-complementary scheme that uses the two neighbors of the complement.
- What is a complementary afterimage?
- It is the phenomenon where, after staring at a color for a while, you look at a white surface or a black-and-white image and see that color's complement. It happens because the cells that respond to the color you stared at temporarily lose sensitivity. You can experience it by staring at a color-inverted image and then switching to black and white: you see the original colors in a black-and-white image.
Tools in this article
Related articles
How to Choose a Color Scheme: The 60-30-10 (70-25-5) Rule, Picking 3 Colors, and Tips That Prevent Mistakes
When you build a website, slides, or a flyer, it is easy to end up with “too many colors and a cluttered look,” “something that feels amateurish,” or feedback that “the text is hard to read.” Color is often treated as a matter of taste, but professional designers actually follow a fixed process and numeric guidelines. This guide builds a color scheme around three roles (base, main, and accent) and a 70:25:5 area ratio, then covers color-wheel harmonies, how to match tones (lightness and saturation), the impressions colors give, how to check readability numerically with the contrast ratio, and how to account for different types of color vision, with ready-to-use palette examples that include color codes.
Read article →Color Schemes for Color Vision Diversity: How to Make Documents That Don't Rely on Color Alone
A document that marks “warning” in red and “OK” in green may look like the same color to some readers. Differences in color vision are not rare; about 1 in 20 men are said to have them. This guide covers color pairs that are hard to tell apart and how to add non-color cues so documents and charts can be read by everyone.
Read article →How to Choose a Brand Color: What Logo Colors Communicate and a Step-by-Step Process
You can often guess a famous service's logo from its color alone, even when the shape is blurred. That is because color is remembered as a “marker,” not as a “meaning.” This guide covers the roles a color can play and a process for narrowing your brand color down to one without second-guessing.
Read article →