The Power of Colors: Red vs. Blue

Can you tell which is bigger, the blue square or the red square?

Let me guess: you picked red.
They are both the same size at 120 pixels x 120 pixels. One of the interesting characteristics of the color red is that red objects appear closer to the viewer. If you picked red, this explains why.

What other characteristics are there?

I tried tracing my memories of studying colors. Despite of the fact that I studied design for four years, the only other thing I can remember about red is that red evokes appetite. So, I ran a quick search of color characteristics and found a good resource: Psychological Properties Of Colours:

RED. Physical

Positive: Physical courage, strength, warmth, energy, basic survival, 'fight or flight', stimulation, masculinity, excitement.

Negative: Defiance, aggression, visual impact, strain, alarm.

BLUE. Intellectual

Positive: Intelligence, communication, trust, efficiency, serenity, duty, logic, coolness, reflection, calm.

Negative: Coldness, aloofness, lack of emotion, unfriendliness.

How is this useful?

While I was doing my search on color characteristics, I happened on this great infographic, The Colors of The Top 100 Web Brands. It is slightly outdated as it's from September, 2010, but it presents a good color mapping of the most influential web brands. I have included that below:

Let's take a look at blue and red brands specifically.
The first thing I noticed was there were many more blue brands than red. Perhaps blue’s intellectual quality is not a bad association to have for many companies. Plus, blue is the world’s favorite color– it doesn’t hurt to have the brands associated with the favorite color of the many. (57 % of men and 35% of women chose blue as their favorite color.) If you are interested in more details on color preferences by gender, here’s another fantastic infographic explaining that.

At a glance, I see a couple categorizations of blue brands;

  • Social Media: Facebook, Twitter, LinkedIn, WordPress, and flickr (I know it’s blue and pink, but blue is dominant).
  • Financial: Citibank, Chase, Paypal, and Experian

I can pick out a couple of words, favorable associations to the category, from the blue list above.

Social media is all about communication and coolness. I would pick intelligencetrust and efficiency as good attributes for financial brands.

On the red side, I see some news/media brands: CNN, CNET, ESPN, and BBC (well, BBC’s logo is no longer red…) I find energystimulation and excitement are all good associations to these brands.

Color is only one aspect of the brand, yet it plays a big part in delivering appropriate message, or creating and/or conveying a suitable brand image. Color preference is subjective, yet colors have somewhat universal connotations. Having this knowledge in the back of your head might help you deliver a more appropriate message, and more agreeable results, to your next design project.

How is this applicable in UX Design?

This iOS screen is a good example of two distinctively different types of buttons on a single page: the red “Delete Account” button and the on off light switch style buttons for Mail, Calendar, Notes and Archive Messages. You know the difference. The light switch button next to “Mail” will let you toggle the email on or off. The red “Delete Account” will, by contrast, delete the entire account The delete button has more visual impact on the screen, as it should– without an existing account, on/off buttons wouldn’t exist.

The significance of the delete button is clear because of the combination of size, style, color and location.

How much is color contributing to this? Is it contributing anything at all? To find, out I created a screen with a blue delete button instead of red.

This still clearly shows the significance of the delete button, yet it doesn’t appear as alarmingas the red one. Considering the significance of deleting an account, “alarming” is an appropriate feeling to trigger. This is certainly color’s contribution in this case.

You cannot solve complex UX problems with color alone, but applying appropriate colors based on color psychology can make the experience more intuitive. Intuitive UX requires less thinking, and intuitive UX is always good UX.

I’ll close with a few more pieces of interesting color trivia:

Did you know?

  • Facebook is blue because Mark Zuckerberg is red-green color blind. “Blue is the richest color for me. I can see all of blue,”  – via SFGate
  • A pink room can be good for calming down screaming kids, but not so much for your workout.
  • “Pink with a wavelength of 620 nanometers causes adolescents and children who have been screaming and yelling to calm down in 3 to 4 minutes.”
  • “Looking at this specific pink causes human muscles to weaken.”

If you are interested in this particular shade of that pink, you can find out more here.