The basics of complementary colors and how to use them
What are complementary colors?
Complementary colors are pairs of colors that are opposite each other on the color wheel. When complementary colors are used together, they create a strong contrasting effect and can be very visually appealing. This can be a very important tool in marketing when designing websites and advertising campaigns.
The word complementary comes from the Latin word complementum and means complement.
How can complementary colors be used?
Complementary colors can be used to create contrast and visual interest in a design. They can also be used to make a space appear more dynamic or energetic. In marketing, complementary colors can be used to draw attention to a particular product or message. For example, a website button may have a contrasting color to the rest of the web design.
For example, complementary colors can brighten each other when used together, they can be combined to create useful neutral tones, or they can even be used to create shadows. Light-dark contrast is the basic element of the color concept.
Different complementary color circles and color models
There are generally 3 different color models for complementary colors:
- Helmholtz model: colors are arranged according to the CIE system. Most technical systems, such as RGB (red, green, blue) or CMY (cyan, magenta, yellow), follow this pattern.
- Model according to Hering: The Lab, Munsell and NGS systems are based on this approach.
- Model according to Johann von Goethe and Johannes Itten
The RGB/CMY model most commonly used in web design assigns values to individual colors that must complement each other 100%. In 8-bit, for example, this results in FF. Opposite to this is a neutral gray-black with decimal values 00. The subtractive color mixing then results in the complementary color on the mirror axis:
Cyan, Red, Yellow, Blue
#00FFFF, #FF0000, #FFFF00, #0000FF
Thus, red <-> cyan is opposite, and blue <-> yellow.
Complementary color table
Color | Model | ||
Helmholtz | Hering | Goethe/Itten | |
Blue | Yellow | Orange | Orange |
Red | Cyan | Green | Green |
Green | Magenta | Red | Red |
Understanding complementary colors
Complementary hues are the colors on opposite sides of the color wheel. They are a primary hue and the secondary hue is created by mixing the other two primary colors. Purple is a good example of a complementary color, as shown on the color wheel because it is directly opposite yellow.
In addition, a complementary color pair consists of one cool color and one warm color. Orange, red and yellow are the warm colors, while blue, green, and violet belong to the cool color palette. This combination is called simultaneous contrast, which is also the highest contrast level on the color wheel.
Simultaneous contrast is a natural effect that occurs when two coordinated colors are placed next to each other. Both colors then appear brighter and attract the user’s attention.
This is a popular technique among artists. Sunsets with gradients from deep blue to bright orange are stunning because they rely on striking contrasts. If your red hues aren’t bright enough, add some green next to them.
How can marketers apply this knowledge? If your website, thumbnails or ad needs to draw the eye to a call-to-action (CTA), use gradients like artists.
What are some tips for using complementary colors?
Some tips for using complementary colors include.
- Using one color for the bulk of the design and the complementary color as an accent
- Combining light and dark contrasts
- Choosing muted versions of complementary colors
- Using complementary colors as an additional marketing tool. Often landing pages are A/B tested to see how well they convert. In almost all tests, the color of the button is tested sooner or later. For the most part, however, this test has little impact. There will only be an uplift in conversions or clicks if the button had the same, inconspicuous color so far. (By the way, it is important to measure the click of the button).
- Test & Measure: In website optimization, heat maps show where visitors are looking and clicking. Tools like Google Optimize allow for A/B testing of individual pages or sections without creating new web pages. However, it is important that only one variable is tested and isolated at a time. In addition, the same KPIs should be compared. These can be leading SEO metrics like Dwell Time for engagement measurement, but also lagging indicators like generated revenue or Cost per Order from a campaign.
- Using complementary colors is a great way to add interest and contrast to a design. Keep these tips in mind when working with complementary colors to create more interest and generate the desired goal, such as a click or an inquiry
Final words
When using complementary colors, it’s important to use them in moderation. Too much contrast can be overwhelming and it is difficult to look at them for a long period of time. When using complementary colors, it is also important to consider the other colors in the design. The complementary color scheme is not always the best option, but can be a great tool when used correctly.
Next on your Marketing School Curriculum
Sascha is a Lifecycle Marketing Consultant with over 8 years of digital marketing experiences in Silicon Valley, the UK, and Germany.
After leading the demand generation for a 100+ million company, he decided to venture out on himself. He’s now helping clients to attract and convert more leads and customers.
His main focus are SEO, paid media & marketing automation – all with the focus to tie marketing campaigns to revenue.
Sascha has been featured in industry publications.
