Why should your website be blue like Facebook, Linkedin and Twitter?

In Customer Experience, Social media by Simon Crompton-ReidLeave a Comment

LinkedIn_IN_Icon_55px

Did you ever ask yourself why do the icons of Facebook, Linkedin,Twitter and even Flickr, Stumble Upon or Digg are all blue? (Post first published on Terrapinn The Followers blog)

In general, the successful social media-related websites seem to be using a lot of blue in their logos, website backgrounds, images etc. By the way, we do too.

So I researched the matter and I came across a number of interesting facts. I wasn't the only one who wondered the same thing. Damir Bucar posted this question on Linkedin and got some very pertinent responses:

Michael Calleia • In colour preference surveys blue consistently comes out on top. If you test for user colour preference, blue will likely win out.

Amanda Ahn • I always thought it was done that way because blue is visually passive (sensation/perception-wise). I know nothing about brand design and next to nothing about design either, so this is just a cognitive psychology student's perspective.
The science: Only 2% of cone receptors are short wavelength (“blue” S) cones, and they exist outside the fovea, which results in reduced acuity for blue colours. (Note that high concentration of cones on the center of the fovea is where the best acuity is, for well-lighted conditions.)
Blue is probably the best colour that is capable of “disappearing into the background”-letting you focus on the content. I think other types of companies-i.e., ones that are not primarily social networking-tend to select from a wide array of colours to best fit their business model. But sites like Twitter and Facebook (which basically want to blend prominently, yet invisibly, naturally, into the fibers of your life) might have chosen blue because it makes the brand disappear and makes you remember the site solely for the content and interaction that you can no longer try to live without.

Slobodan Milosavljevic • Hi Damir, no I don't. :) )) I just wanted to emphasize that selected blue colour has many positive connotations. When I said connotations I thought that colours for different users develop a specific value for particular situation as the predecessors nicely explained.

Lisa Duddington MSc • – Blue is the most preferred colour by both men and women, more strongly by men.
- Blue is the favourite colour of more than half of the world's population, and the least disliked colour by most cultures
- It's calming, relaxing, comforting and friendly
- Easy on the eyes
- Maintains it's character in all its tones (it always stays blue even when lightened and darkened, unlike some other colours, such as red which turns pink when diluted)
- Clean and fresh
- Liked by both young and old
It's my favourite colour too! :)Laurent Gherardi • Great post Amanda. We are starting to see many reasons why blue is preferred in this thread. An additional one is that it has positive influence in all tones mixed with white. White currently being culturally mandatory, it seems (thanks Apple), to instill the sense of ‘clean' interface. Yellows and oranges get lost, red goes pink (not positive with the average American male), purple (see light red), and earth tones like green and brown which are currently un-tech.

Susan J. Michael • I think designers use blue a lot because of the above reasons, but also because it is the most versatile and useful colour range in the hex colour chart. You can see all the colours on wikipedia here: ttp://en.wikipedia.org/wiki/Web_colors

Stefanie Kraus • Blue also appears “trustworthy” to people.

Tom Murphy • Blue is an easier monitor colour – it holds a pleasing hue even if ones monitor is very bright or dark. Same can not be said for reds or greens…

The final answer comes from Steve Whetstone , who said: I am in agreement with Amanda Ahn's earlier biology explanation. I would add. . . Trend analysis for blue?

Recent blue popularity possibly originated because some shades of blue were difficult or impossible to produce with pre-digital technology. See http://en.wikipedia.org/wiki/Blue_pencil_(editing). The new blue opportunities were not widely known which is one of the pre-conditions for a sleeper trend. In pre-industrial history blue has been difficult to manufacture and highly prized as a paint colour for fine art painting. As an analogy the use of Grey for car exteriors follows a similar(although more condensed) trend when durable metallic paint was developed. The new blue colours are a natural choice for associations with new digital technology since they couldn't possibly be associated with analog technology.
I suspect riding on top of the newly possible blue shades sleeper trend there's also some bounce-back effect from the sudden disappearance of all the easily reproduced blue mimeographed copies. seehttp://en.wikipedia.org/wiki/Mimeograph. So in conclusion some colours of blue are now practical to reproduce that were previously avoided and some different shades of blue suddenly disappeared and are missed.
.
The practical result of eye biology as explained by Amanda Ahn's post has a secondary optical illusion effects. In our atmosphere the air is slightly blue resulting in distant mountains and objects becoming blue tinted. “Blue recedes yellow advances” is the Colour and Design class catch phrase (hey cool, I guess the Academy of Art University taught me something useful and the fundamental classes have some value). Fine artist have long observed that visually the eye wants to place blue in the background instead of the foreground of a 3d composition. As an evolutionary adaptation the ability of the eyes to ignore blue or turn it invisible makes sense.
It's been noticed (sorry, can't find my source for this) that the eye has particular trouble focusing on sharp blue edges resulting in the effect that thin blue lines tend to disappear more easily and are more easily ignored than other colours. If you want a “clean” design, but you have to use lines for some purpose, blue is the colour that will look the cleanest. Detailed small text in blue will attract the focus less than other colours (Maybe there's some visual tracking heat maps to support this empirically?). in contrast you'll notice maybe some “loud” advertisements where many elements are competing to appear in the foreground use reds and yellows draw the eye.

ps. an interesting collection http://www.themeflash.com/color-theory-in-web-design-blue-color-scheme/
and consider reading some of Piet Mondrian's books or theories and his artwork if you're interested in training you're eyes to consciously recognize the blue effects.

The facts are extremely compelling and I believe that they're uncovering a key ingredient in a recipe for a successful online business. As Michal Smyk said

• Blue + lots of white + some grey + some black + some fancy logo = your successful UI ? ;)Damn, now I know why my business is growing so slowly!

Jokes aside, that might just be true.

Leave a Comment

Current ye@r *