What is a complementary color?

The color directly opposite another on the color wheel, 180 degrees round. Put a pair side by side and each makes the other look more vivid, which is why the relationship is reached for whenever something has to stand out. Mix them instead and they cancel, heading toward gray.

What is the complementary color of red?

On a screen it is cyan, #00FFFF. In paint it is green. Both answers are correct for their own color model: screens mix light, where red and cyan cancel to white, and paint mixes pigment on the older red-yellow-blue wheel, where red and green cancel to mud. If you are choosing a color for a website, the screen answer is the one that applies.

Why does my art teacher say red and green, not red and cyan?

Because the RYB wheel taught in art rooms was built for pigment, centuries before anyone mixed light. It is not wrong, it is a different model with different primaries. Design software, CSS and every color picker on this site use RGB, so the opposite of red comes out cyan rather than green.

How do I actually use a complementary pair?

Let one color dominate and use the other sparingly, as an accent. Two fully saturated complements at equal area fight each other, and along a shared edge they can appear to shimmer. Knocking the saturation off one, or separating them with a neutral, keeps the contrast without the noise.

What is a split complementary scheme?

The base color plus the two colors either side of its complement, rather than the complement itself. It keeps most of the contrast and is considerably easier to balance, which makes it the safer choice when a straight complementary pair feels too loud.

Complementary colors

A complementary color is the one directly opposite another on the color wheel, 180 degrees round. Side by side, each makes the other look more vivid. Mixed together, they cancel toward gray. On a screen the complement of red is cyan, which is not the green most people were taught, and the reason for that difference is worth two minutes.

Color scheme

Two colors from opposite sides of the wheel. They make each other look more vivid, which is why the pairing is used for anything that needs to stand out.

Start from a color

Saturation 64%

Brightness 100%

Drag the wheel or use the arrow keys on the marked handle. Hue 251°.

Check contrast

The complement of every common color

Computed by rotating the hue 180 degrees, the same calculation behind the wheel above and the schemes on all 131 color pages. Click a code to copy it.

Why your screen disagrees with your art teacher

Both answers are right, for different color models. Paint mixes pigment and subtracts light, on the red-yellow-blue wheel that predates anyone mixing light at all. A screen adds light, on the red-green-blue wheel. Same word, different geometry, different opposite.

Red
Art teaching says green. Your screen gives #00FFFF, because that is the value that cancels red back to white when the two are added as light.
Blue
Art teaching says orange. Your screen gives #FFFF00, because that is the value that cancels blue back to white when the two are added as light.
Yellow
Art teaching says purple. Your screen gives #0000FF, because that is the value that cancels yellow back to white when the two are added as light.

Neither model is a better description of color. They answer different questions, and the one that applies is whichever medium you are working in. For anything that will be looked at on a display, that is RGB.

Using a pair without it shouting

Give one of them the job

Two complements at equal area and equal saturation compete, and the eye cannot settle on either. Let one carry the design and keep the other for the thing you want clicked. The pair is a contrast device rather than a split.

Take the saturation off one

Most complementary pairs that work in practice are not both at full strength. Muting one keeps the hue relationship, which is what gives the vividness, while removing the fight. The shade and tint ramps on any color page are the quickest way to find that version.

Watch the shared edge

Saturated complements meeting along a border can appear to shimmer, an artefact of how the eye handles equal-brightness edges. A neutral between them, or a difference in lightness, removes it. This is also why complementary text on a complementary background usually fails contrast even when it looks striking.

Common questions

What is a complementary color?: The color directly opposite another on the color wheel, 180 degrees round. Put a pair side by side and each makes the other look more vivid, which is why the relationship is reached for whenever something has to stand out. Mix them instead and they cancel, heading toward gray.
What is the complementary color of red?: On a screen it is cyan, #00FFFF. In paint it is green. Both answers are correct for their own color model: screens mix light, where red and cyan cancel to white, and paint mixes pigment on the older red-yellow-blue wheel, where red and green cancel to mud. If you are choosing a color for a website, the screen answer is the one that applies.
Why does my art teacher say red and green, not red and cyan?: Because the RYB wheel taught in art rooms was built for pigment, centuries before anyone mixed light. It is not wrong, it is a different model with different primaries. Design software, CSS and every color picker on this site use RGB, so the opposite of red comes out cyan rather than green.
How do I actually use a complementary pair?: Let one color dominate and use the other sparingly, as an accent. Two fully saturated complements at equal area fight each other, and along a shared edge they can appear to shimmer. Knocking the saturation off one, or separating them with a neutral, keeps the contrast without the noise.
What is a split complementary scheme?: The base color plus the two colors either side of its complement, rather than the complement itself. It keeps most of the contrast and is considerably easier to balance, which makes it the safer choice when a straight complementary pair feels too loud.