top of page

Wix Blog

50 Website Color Schemes for Your Inspiration

Guide

Step-by-Step Guide: How to Design a Website

Wix Blog

Top 10 Web Design Trends for 2021

Complementary Colors


 


What are complementary colors?


Complementary colors are two colors located opposite each other on the color wheel. For this reason, they’re also known as “opposite colors.” When placed next to each other, the contrast makes each color appear brighter than it does when standing alone.


There are three basic complementary color sets:


  • Red - Green

  • Blue - Orange

  • Yellow - Purple



How complementary colors are formed


Each pair of the basic complementary colors are composed of one primary color, and the resulting secondary color produced from mixing the two remaining primary colors. Primary colors are: red, blue, and yellow. Hence, in the red-green pairing, red is the primary color, while green is the secondary color derived from the combination of blue and yellow.


In all complementary color sets, there is one warm color and one cool color. Warm colors include orange, reds, and yellows. Blues, greens, and purples are considered cool colors. Placing one of each side-by-side produces the effect called simultaneous contrast, where each hue appears brighter.


 

You may also be interested in:


Color palette generator

Color psychology

Web design

 


When to use complementary colors


Complementary colors are mainly used in graphic design and art, where they are placed next to each other to create greater contrast and emphasis. In today's digital world, it is particularly important to think about complementary colors when designing websites as they can help bring the visitor's eye to a particular focal point.


The right website color scheme can also influence how likely a user might be to convert or buy something. Other times, these opposite colors are mixed with each other to generate shadows, or even to cancel each other out by creating a neutral hue.


Complementary colors also have practical design uses. High contrast is a helpful tool to use to create greater visibility, such as choosing to make life jackets orange so they will stand out against a blue ocean.


It is important to note however, that complementary colors should not be used together for long periods of time as they can become overwhelming and create visual fatigue. To prevent this, complementary colors should be used sparingly and balanced with neutral colors or complementary shades of the same hue to create a more subtle and calming effect.



Complementary color examples


Complementary hues of red and green can be used together to create a high-contrast combination. Complementary colors are often found in nature, such as complementary blues and oranges seen in a sunset sky or complementary reds and greens seen in a forest.


A famous example of complementary colors in the art world is Claude Monet’s Impression, Sunrise (1872). The painting shows a tiny orange sun against a blue background, making each of those colors ‘pop’ off the canvas to catch the viewer’s eye.



Split complementary colors


This refers to using the color wheel to combine different colors that complement each other. It involves combining together in a color scheme more than two colors, and usually involves adding a 3rd or 4th too.


One way to do this is to choose your base color, then look opposite it in the color wheel, and take at the same time the two adjacent colors to this new opposite your base color.


For example, yellow can be found across from purple in the traditional color wheel. Orange and green sit alongside yellow in the wheel. This means that the split complementary colors for purple are - yellow, orange and yellow, green.




Related Term

Vector Art

Related Term

Cascading Style Sheets (CSS)

Ready to create your own website?

The latest trends in business, marketing & web design. Delivered straight to your inbox.

Thanks for submitting!

bottom of page