Web Colors 101

Color is known to be a significant determinant for both website trust and satisfaction. Color has the potential to communicate meaning to the user and influence their perception through the priming effect, how the exposure to one stimulus influences the way we will respond to another stimulus. In that way the exposure to a certain color can influence the visitor’s reaction towards the site in a carryover effect, meaning that the emotional reaction towards a color can be translated into a positive or negative interaction with the website.

Color Psychology

Perhaps you think the color of your website should reflect your personality. But if you don’t take color psychology into account, you’re missing a valuable opportunity to brand your e-commerce store effectively and drive customer engagement. Here’s the (generalized) psychology breakdown of the color spectrum, ROYGBIV, plus a few bonus colors thrown in:

• Red signals: attention, excitement, anger, love, warmth, comfort, life
• Orange signals: enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement
• Yellow signals: adventure, happiness, competence, enthusiasm, wealth, sophistication.
• Green signals: Balance, good taste, health, money, harmony
• Indigo/blue signals: Honesty, corporate, high-quality, masculinity, competence, loyalty, trust, reliability
• Violet and purple signal: Creativity, authority, rower, royalty, respect, mystery
• Pink signals: Love, compassion, sophistication, sincerity, romance, gentleness
• Brown signals: Friendliness, ruggedness, sadness, comfort, organic, natural
• Black signals: Grief, sophistication, expensive, intelligent, slimming
• White signals: Simplicity, order, innocence, purity, cleanliness and neutrality
• Gray and silver signals: Timelessness, practicality, neutrality, refinement and the quality of being contemporary

Now that you’ve got the colors’ message under your belt, next think about your ideal customer and the brand message you want to convey.

For instance, if you have an extreme sports e-commerce, you’ll probably want to stay away from pink…

But I love pink…

All that being said, sometimes the specific color used isn’t as important as the context with which it’s being presented.

One of our retail clients ran an A/B test to learn about the effectiveness of one color compared to the other. The results were conclusive: A blue CTA increased the conversion rate by 20 percent. These results might lead most designers to conclude that a blue CTA leads to higher conversion rate compared with the red one and to implement this knowledge in other websites.

However. a deeper look at “mouse move” heatmaps uncovered that the difference in conversion was due to the buyer state of mind, rather than due to the CTA color. Visitors that did not convert show a different pattern of behavior. They were more details oriented, spending a longer time on every piece of information, and their engagement time was significantly higher.

On the other hand, visitors who converted tended to be more impulse buyers and spent less time on the page and were less focused on the details.

The only thing we can say is that the red CTA button is more appropriate to the “impulsive buyer” than the blue one. Thus, color alone can’t explain the variance in the visitors’ behavior. The attractiveness of a certain color is determined by its context and not by a visitor’s preference to specific color.

Sound confusing? That’s why you hire a skilled UX/UI design team to guide you through the process. We will help you identify your contextual needs and offer you the best color choices for your user goals.