Color Theory in Website Design

We all know that colors affect us. They bring out emotions and they have their own energy. 

Color Theory observes these effects and can thus help us design and market our products effectively by tapping into the consumers’ emotions. This is especially true in website design (where I’ll be focusing on) where a lot of the “selling” in e-marketing occurs, including both e-commerce and just promoting a product! 

 According to Thomas Cannon, Color Theory is the study of “the interaction of colors in a design through complementation, contrast, and vibrancy.” 

Complementation is how colors are viewed in relationship to other colors. One way to use complementation is to use two colors that are on opposite sides of the color wheel. This forces designers to create a way to balance out the colors to we are happy to be looking at the design—not leaving us begging for an aspirin. 

Contrast is used to help cut eyestrain and keep the viewer focused. Using a light background with dark text, and vice versa, is a great example. Another thing to note is that reserving the brightest color for the text cuts eyestrain and focuses the reader’s attention the most. Using complementary colors is not exactly the Golden Rule of contrast though. If one of the colors is too bright compared the other color, eyestrain will still be an issue. Ouch. 

Vibrancy is what controls the emotion that is brought out by colors. Brighter colors bring out energy, while darker colors lead the viewer to feel relaxed. This leads us to color psychology. According to this source, here are the common emotion-to-color relations:

Brown – warmth, coziness

Black – power, sophistication

Grey - somberness, stability

Blue - trust, confidence

Red - excitement, passion

Pink - youthfulness, romance

Purple - luxury, wisdom

Orange - energetic, vibrant

Green - natural, growth

White - purity, simplicity 

Yellow - happiness, joy

Using this colors, and the emotions that come with them, we can convey a distinct image and reputation to the viewers of our websites. 

Examples 

In-N-Out Burger, like many other fast food restaurants, uses red and yellow which bring out excitement and happiness. This conveys the friendly and enthusiastic service of its associates. It also makes the customers excited to be there. 

Skype predominantly uses the color blue for its website to go along with the iconic logo. Blue represents trust, so Skype is sending the message that its communication services can be trusted and dependable. 

 Starbucks emphasizes the naturalness of its products through the use of green and the simplistic design of the website. 

Conclusion

• Using complementary colors will create a balanced color scheme
• Using contrast will focus your viewers' attention and keep their eyes happy
• High vibrancy will bring high energy
• Specific colors entice certain emotions 

With these tools in hand, every color scheme can be attractive, attention-keeping, and an effective e-marketing tool!