Web Colors 101

March 29, 2018

Color is shown 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...

A person writing "User Testing" on a wall

Color is shown 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 ecommerce 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 ecommerce, 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.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Recent in blog

October 20, 2024

Still Hooked on UX After 23 Years

Reflecting on the excitement of working closely with clients in UX design after 23 years in the industry.
Read More
October 14, 2024

Interview with Safety Detectives

My Interview with Safety Detectives: Talking Ethical UX Design and the Future of User Experience
Read More