Color Chat: Complementary Colors

I kept mentioning in previous tutorials that I’d talk about complementary colors in more detail, and I thought I should go ahead and actually do that!

The complementary color scheme is one of the standards in the design world. It’s a simple way to add contrast to any color scheme, and it can lead to a dynamic and lively design.

In the contrast tutorial, I mentioned that complementary colors are how to create hue-based contrast (contrast that focuses on the color alone). This is because complementary colors are opposites of each other. We represent that on the color wheel as being on opposite sides, but there’s actually a bit more to it than that. Complementary colors are actually the negative of each other, in that they’re made up of the colors the other is not.

As an example, when we use the primary colors red, yellow and blue, we can mix red and yellow to get orange. That leaves the primary blue, which is the complement of orange. It’s literally made up of the color that orange is not. Similarly, the complement of red would be made of the other two primaries: yellow and blue, which together create green. This gets more complicated as we move into more complex colors, but you hopefully get the idea.

This matters because when we look at a color long enough, our photoreceptors for that color will get fatigued, and won’t be as strong. However, the receptors for the complementary color are still at full strength and our brain interprets it as actually seeing that complementary color.  That is why things like this optical illusion work. If you stare at the white dot in this flag for 30 seconds to a minute, then look at a white wall, you’ll see the properly-colored US flag.

If you’re interested in reading more about why and how this happens, it’s called the afterimage effect, and the wikipedia article linked there goes into some great details.

So that’s great and all, but other than a party trick, what’s the point? There’s two points. The first is that this means putting complementary colors together make BOTH colors look brighter and more saturated because some photoreceptors get slightly fatigued looking at one color and see the complement more strongly. Our eyes are made up of lots of photoreceptors, so they don’t all get fatigued, which is why it doesn’t just all go black. Fortunately!

I talked about this a bit in the color in context post, but now hopefully it’s a bit more clear why this happens.

In the images above, yellow-green and fuchsia (red-violet) are complements of each other. Both colors seem more vibrant next to each other than they do alone.

The second point is that this effect can actually cause a slight “vibration” at the edges where the two colors meet, which is something to keep in mind while designing. If you want a design that is possibly jarring and attention-getting, then make a long edge where the two complementary colors meet.

If, on the other hand, you want to minimize the vibration effect, there are a few ways to do it. The first is to minimize the amount that the two colors meet. We can do this by adding a neutral, or by choosing one dominant feature color, and using the complementary color as an accent.

Another method is to desaturate one or both the colors, or change the brightness. This is also an effective way to move away from the “Christmas effect.” Christmas colors are red and green (which are complementary) and it’s hard to use those colors without evoking Christmas.

However, by changing to a lighter shade of green and pink, the colors look more like spring, and less like Christmas. And there’s no vibration along the edge, either.

Finally, we don’t have to use perfect complementary colors to gain some of the benefits. Aqua is a blue-green, and it’s complement is a red-orange. You’ll notice even with the fabric, there’s a vibration effect where the two colors meet.

If we pair the aqua with a yellow-orange instead, we’re still on the other side of the color wheel and the colors will play off each other in a dynamic way. However, because they’re no longer perfect complements, it reduces the vibration effect significantly.

So why use complementary colors in your designs? For all the same reasons you would want to add contrast. Complementary colors can be used to help define shapes, and they can be used to lead the eye through a design.

Finally, complementary colors are also great for adding interest. If you ever feel like a color scheme in your design is feeling flat or boring, adding the complementary color is an easy way to give it some visual interest!

Summary

• Complementary colors are colors that exist on opposite sides of the color wheel.
• If the colors feel too strong next to each other, you can use one color less often as an accent, change the saturation and/or brightness of one or both colors, or use a colors that aren’t exact complements.
• Use complementary colors whenever you want to create high-contrast, dynamic designs, or need to add visual interest.

As always, please feel free to ask any questions you might have!