Complementary colors are the colors that sit opposite to each other on the color wheel. As the name suggests (complementary and not complimentary), these colors help each other stand out. They bring out the best in each other by making their complement more vibrant or noticeable. Complementary colors also work together to elevate the overall visual experience.
When you place complementary colors next to each other, they create high contrast and appear brighter. Alternatively, they cancel each other out when you combine or mix them. This means they lose intensity and produce a neutral color.
Complementary colors sit equally apart on a color wheel. This image illustrates that yellow and purple are complementary colors because they sit on opposite ends.
© Interaction Design Foundation, CC BY-SA 4.0
Here, purple and yellow appear brighter when placed next to each other. On the other hand, they lose intensity when combined.
© Interaction Design Foundation, CC BY-SA 4.0
Foundations of Complementary Colors: The Color Wheel, Color Theory and Design Principles
Color theory studies how colors work together and affect emotions and perceptions. It is a combination of art and science that determines what colors look good together.
In this video, Arielle Eckstut, the author of "What Is Color?” shares the idea that color is a product of our imagination. Our brains play a significant role to process visual information and inform us about the world.
To use colors effectively, designers must have a solid command of color theory and know the color wheel inside out.
There are three primary colors, namely red, yellow, and blue. Mixing them yields three secondary colors (green, orange and violet, shown in the second wheel), and combining secondary colors yields six tertiary colors, presented on the full 12-color wheel.
© Interaction Design Foundation, CC BY-SA 4.0
There are two types of color wheels:
Based on the primary colors of RYB—Red, Yellow, and Blue. RYB are primary colors for subtractive (pigment-based) color theory. In subtractive color theory, mixing colors removes certain wavelengths of light and reflects others. A mixture of all primary colors results in a muddy brown, almost black color.
Based on RGB color—Red, Green, and Blue. RGB are primary colors for additive (light-based) color theory. In the additive color theory, primary colors combine to form new colors. A mixture of all the primary colors creates white light.
Color harmony refers to the relationship between colors. Designers use geometric relationships on the color wheel to create pleasing color combinations. You can use a color wheel to determine the relative positions of different colors. Additionally, you can find color combinations that create a pleasing effect. You must also know about different color schemes other than complementary.
Appropriate color combinations must be combined with sound design principles to guide user attention and enhance user experience. Ensure that your color choices follow the principles of unity, Gestalt, hierarchy, balance, contrast, scale, and dominance.
Complementary Color Combinations
Think of complementary colors as "opposites attract." The classic examples of complementary color combinations are:
Red and green
Orange and blue
Yellow and purple
If you include the variants of these primary colors, red, green, and blue (RGB), you may get another three complementary color examples:
Blue-purple and yellow-orange
Red-purple and yellow-green
Red-orange and blue-green
Using the full 12-color wheel, we get six pairs of complementary colors that you can use to design pleasing experiences. These six color combinations can work wonders if you're designing a website or a digital presentation:
Red and cyan
Green and magenta
Blue and yellow
Orange and azure
Chartreuse green and violet
Spring green and rose
Typically, a pair of complementary colors comprises one warm color and one cool color. For example, yellow is a warm color, and purple is a cool color.
No matter the complementary color combination, one color will always be warm, and the other will be cool. These colors have opposite temperatures. This is the main reason behind the high contrast.
© Interaction Design Foundation, CC BY-SA 4.0
Why Do Complementary Colors Look Good Together?
Visual perception plays an essential role in what we see. The perception of colors results from how our eyes and brain process different wavelengths of light. Color is a perception of energy and specific wavelengths of light that reach our eyes.
Arielle Eckstut explains the significance of color in our perception and how designers use it to convey information effectively.
Our eyes have three types of color receptors. These special cells, known as photoreceptors, respond to color in only three varieties: 'red,' 'green,' and 'blue.' To simplify, here's an exercise to help you learn how complementary colors work in visual perception.
Look at a green light for a while. After 30 seconds, suddenly turn to look at a white wall. You'll see a magenta light on the wall for a split second, which is green's complementary color. (Try it!)
When you look at a green light for a while, the green cells get tired, while the red and blue cells take a break. After 30 seconds, when you look at a white wall, the area with the tired green cells gets lit up by red, green, and blue light. The red and blue cells respond strongly, but the green cells respond weakly. Hence, we mostly see a mix of red and blue, creating a magenta color.
The above phenomenon is also called the afterimage phenomenon. It highlights the importance of color choices. Pleasing combinations attract attention and evoke positive emotions. Similarly, unpleasant combinations can put your users off. This shows how important it is to pick colors carefully. Pleasing color combinations can catch the viewer's eye and evoke certain emotions. Similarly, colors that don't go well together might not look good and could make people lose interest.
Complementary colors look great together because they make each other stand out and look balanced. They do this by stimulating different parts of our eyes equally. It's a natural illusion that adds energy and draws the eye. However, the nature of color is transitory. Our perceptions of color can shift under different lighting conditions. Joann Eckstut, a leading color consultant and interior designer, explains why colors change in this video.
How to Use Complementary Colors?
Complementary colors are perfect to catch the viewer's attention. They can make a composition bolder, prouder, and more charismatic. There is no reason you should not utilize the power of complementary colors in UX design. However, nailing it requires a keen eye.
The key to using complementary colors well is to make one color more dominant.
There are several ways to do this. Let's see how you can use complementary colors in the design:
1. Create Shadows and Gradients
You can create shadows using a color's complementary color. It creates an interesting shadow instead of using black or gray. Complementary colors' gradient effects can add depth and visual interest to your design. This contributes to a more engaging and dynamic user experience.
For instance, let's say you have a weather app with a blue background representing the sky. You have a card that displays current weather conditions, like temperature and forecast. Instead of using a neutral gray, opt for an orange shadow to create a shadow for this card. This can enhance the realism and visual appeal of your app.
2. Grab Attention
Use complementary colors to draw attention to essential elements. This can include alerts, notifications, or CTAs. Using complementary colors can make the information stand out. It ensures users notice critical details.
Take an example of the IxDF website layout. The orange CTA with the primary color blue is an excellent example of contrast in action.
This Interaction Design Foundation website screenshot features the dynamic contrast between orange and cool blue. The intentional complementary color combination of these two colors creates a visually compelling and harmonious design.
© Interaction Design Foundation, CC BY-SA 4.0
3. Create Visual Hierarchy
You can apply complementary colors to different interface elements. The contrast between complementary colors makes certain elements stand out. Hence, you can use it for effective differentiation and emphasis. It helps your users understand the structure of your digital product.
An appropriate example is Agendrix—a staff scheduling and workforce management software. The dark teal color for the main background of their website gives a sense of calm professionalism. They also chose the perfect complementary shade of peach to emphasize key elements. Agendrix uses these two colors to distinguish calls to action to strategically guide users through the website.
An appropriate example is Agendrix—a staff scheduling and workforce management software. The dark teal color for the main background of their website gives a sense of calm professionalism. They also chose the perfect complementary shade of peach to emphasize key elements. Agendrix uses these two colors to distinguish calls to action to strategically guide users through the website.
© Agendrix, Fair Use
4. Background and Foreground
Experiment with complementary colors for background and foreground elements. If the background is in one complementary color, the foreground elements (text or images) can be in its complement. This creates a striking visual effect.
Dollar Shave Club, a personal grooming company, uses deep blue as the background and coral red as its complement. The selective application of coral red as the foreground element makes important elements more noticeable. This combination is aesthetically pleasing and provides users with clear visual cues.
© Dollar Shave Club, Fair Use
Again, you must exercise caution. The contrast you aim to create must be enough to draw attention. At the same time, it should create a clear hierarchy while keeping the design balanced. Put simply, striking the right balance is key.
5. Navigational Guidance
Complementary colors minimize eye fatigue. Hence, they're ideal for a website's navigation menu. Use complementary colors for dropdown menus, text, icons, and hover and active states. For instance, when users hover over or select a menu, the color changes to its complement. This switch gives users quick feedback, indicating the menu's interactive nature. It makes the website more fun and easier to use.
For example, A Short Journey is an interactive one-page website. It uses an orange and blue color website palette. This website uses different shades of orange for the background. This dominant color gives the website more depth. The foreground objects mainly use blue. This contrasting color lets visitors focus on the website’s interactable elements. This makes the navigation more intuitive and enjoyable.
The above screenshot from an interactive one-page website takes users on an animated holiday adventure. It uses a combination of orange and blue to let visitors focus on the website’s interactable elements.
© A Short Journey, Fair Use
Tips to Make Your Complementary Color Combination Stand Out
Complementary colors in design can create visual interest, balance, and harmony. Here are some tips to make your complementary color combination stand out.
1. Understand the Basics
To create excellent combinations, you must understand the following:
Color wheel: A visual representation of colors arranged in a circular format.
Color modes: The different ways designers use colors in digital and print media. Common modes include RGB (Red, Green, Blue) for digital products and CMYK (Cyan, Magenta, Yellow, Black) for print.
Color symbolism: The symbolic meanings and different cultural associations of colors.
Color theory: The principles and guidelines that govern color combinations.
Knowing the fundamentals can help you create compelling and emotionally resonant designs.
2. Consider the Emotional Impact
Think about the mood or emotion you want to convey. Complementary colors can create a strong contrast even when you reduce their intensity. So, decide if you want a vibrant and energetic feel or a more subdued and balanced atmosphere.
Different color combinations resonate differently with various demographics. For instance, a red and green combination can signify the "holidays." But it can also represent energy and rejuvenation. Consider the cultural associations, preferences, and emotions your color combination seeks to elicit.
3. Use a Dominant Color
Choose one color as dominant and the other as an accent. This can help to create emphasis and guide the viewer's focus. The dominant color should align with your main message or theme.
In this video, Joann and Arielle give you their six top tips for picking colors.
4. Selective Application
It is best to use complementary color pairs in specific areas or elements of a design. Instead of using the combination in every design element, identify certain elements critical to the design's message. Selective application ensures the contrast attracts users without overwhelming them.
5. Test for Accessibility
You might be designing a website, an app, or marketing collateral. Making color choices accessible means the broadest possible audience can understand your design. It also makes it more likely that your products or services will comply with equality legislation. Use contrast-checking tools to ensure that text will be legible. You should also use usability testing to confirm your color combinations.
