Choosing the Right Colors for Your Web Site

Do colors influence web site visitors?

Choosing colors for websites

When creating a site, choosing the optimum colors is one of the most difficult tasks that arise in spite of the apparent easiness. Choosing the perfect chromatic palette is important in order to effectively communicate the message, in order to strengthen the idea of a unique entity and to create brand awareness.

How to choose colors?

Researchers agree that colors greatly influence the human state of mind. The color scheme that you use on your web site can entice the visitor to engage in the goal of your site (i.e. make a purchase or request your services) or leave it after the first few seconds. Even if they are not aware of it, your visitors will be greatly influenced in their decision to keep browsing your site or to leave it because of the poor selection of colors and other visual displayed elements.

I have recently come across two articles on smashingmagazine.com that proposed specific color palettes for specific purposes. So far the main fields of activity tackled were traveling and insurance with concrete examples of companies from both domains.

Irrespective of the field of activity, we present you a few tipshere are a few tips that you should consider for any website:

1. Use a natural palette of colors.

They are more pleasing than any of their artificial counterparts. Combine them in order to get the emotional response that you want to get from your visitors. Unnatural colors, such as bright green, blue or red usually cause eye fatigue and chase visitors (i.e. prospects) away. Also you should be aware that primary colors like red, yellow or orange can work well for culinary promotion purposes.

2. Create a strong contrast between a page's background and its text.

The best combination for readability is black text on white background, but there are also other excellent combination. Besides white, other effective web site background colors are dark blue, gray and black. The situation is not the same for product promotions. When the product is the center of attention, desaturated colors are recommended. You can see in the photo below exactly the difference.
Desaturated background recommended for saturated foreground
*While in the first picture the product box might skip out of the attention, in the second photo all the eyes are attracted mainly by the product box.

3. Select an average of 3 different colors and use them consistently throughout the web site.

Chromatic harmony is one of the most important criteria in order to create a pleasant experience for the visitors. It is strongly recommended that a moderate number of colors should be employed; four or five is ok; more than that not only will they create inconsistency, by they will also cause an eye sore for the visitor making him skip important parts of the site.

4. Be sure to take into account people with visual disabilities.

Make sure that the message of your site reaches such people as well. I have recently read a very useful article in this particular respect written by Aries Ardity (a vision science PhD), called Effective color contrast. The most important to-do's and not to-do's were taken from that article and reproduced below. You can see below according to that article the most effective background colors in association with writings of certain colors.
Effective and ineffective colors
Keep in mind that responses to colors vary according to factors such as gender, age or cultural background. You need some serious market research in order to make your site appealing for the exact category you're targeting. Nevertheless, if you are interested in an official piece of recommendation, you should check out Web Content Accessibility Guidelines 1.0.

Old vs. Young People

People of different ages have different reactions to colors. People past a certain age will find web sites with more sober and restrained (and therefore relaxing to the eye) colors more attractive. Youngsters, on the other hand, will appreciate more vivid and brighter colors. Make the distinction between mature and young audience by using the appropriate colors for each category.

This might be regarded as an ordinary factor, judging by the fact that with time people require visual correction. I found a comprehensive graphic on Age-Related Changes in Vision taken from a presentation by Robert W. Bailey, a PhD in computer psychology according to which the age comprised between 30 and 50 is the most probable for the apparition of visual impairments.

Men vs. Women

People also have preferences according to their gender. Thus, men tend to prefer blue and orange to red and yellow, while women prefer red to blue and yellow to orange. Also, remember that it has been proven that women are able to perceive considerably more colors than men; in other words, while men may find peach, teal or peacock as mere notions, women associate these things with colors.

Also, free yourself from prejudices: if you are addressing to women, do not automatically employ pink. While some women may enjoy pink, others may not. I have recently encountered a very interesting study which revealed that blue is the favorite color of 57% of men and of 35% of women, so pay attention.

Nations and Colors

If your website addresses an audience larger than your country of origin or it is meant to attract prospects from a specific country, invest some time in researching the specific meanings of colors. For example, while white is a symbol of purity in Western cultures, it stands for bad luck and unhappiness in China, Japan, and India. While very appreciated in Japan, pink is frowned upon in India and East-European countries, where it is regarded as a 'non-manly' colors.

Purple is associated in certain Arabic cultures with prostitution (the same as red in the European and North-American cultures), and globally, it is generally associated with mysticism and beliefs that are not in keeping with the precepts of Islamism, Judaism and Christianity. Green, if used for the web site of a financial institution from the USA, will support the implication that the institution deals with the 'almighty green dollar', but it may bear no such significance in a country where bills (paper money) are multiple-colored.

This can lead to a complete change of meanings, significances will be changed and negative implications will be at the very least diminished, if not eliminated altogether (e.g. red becomes more powerful when combined with white). It is up to you to obtain creative colors that will be internationally accepted, but you have to do your homework quite well.

Common Colors and Their Most Common Meanings

  • Red: energy, passion, excitement, power; also implies aggression, danger.
  • Blue: coolness, spirituality, freedom, patience, loyalty, peace, trustworthiness; can also imply sadness, depression.
  • Yellow: light, optimism, happiness, brightness, joy.
  • Green: life, naturalness, restfulness, health, wealth, prosperity; in certain contexts, can imply decay, toxicity.
  • Orange: friendliness, warmth, approachability, energy, playfulness, courage.
  • Violet: wisdom, sophistication, celebration.
  • White: purity, cleanliness, youth, freshness, peace.
  • Black: power, elegance, secrecy, mystery.
  • Gray: security, maturity, reliability.
  • Pink: romance a feminine color.
  • Brown: comfort, strength, stability, credibility.

From a psychological point of view, I suggest reading Color Psychology in Online Marketing, an article by Al Martinovic.

Tools to help you choose the best color combination

In order to offer you some concrete examples, we will enumerate below a series of concrete tools to help you select the best combination:

Adobe Kuler is a useful site providing preset colors. The main advantage is the fact that visitors can choose the set of colors that best suit them basing on different criteria like rating, positive comments or even the names of those combinations.

ColourLovers is a resource which aims at influencing chromatic trends. This is a great place to check out the world of color irrespective of the purpose, be it for ad campaigns, product design or architectural design. You can compare palettes, submit news and comments or read articles and interviews.

Red Alt - I Like Your Colors is another important resource if you enjoy a particular website and you would like to employ the same set of colors or at least detect exactly which are the hues employed with their corresponding programming code. You just insert the URL of that site and the colors are extracted.

ColorJack is a very interesting site, very similar to Kuler, providing different color combinations basing on certain algorithms. The main tools offered are Color Galaxy, Color Sphere and Color Studio; if you are not familiar with web design programs, they may seem a bit difficult to use, but you will get easily accustomed.

DeGraeve Color Paletter Generator is similar to the Red Alt tool. What is more interesting about this one is the fact that you can select a photo that you think it best suits your type of business and this instrument will extract the color palette it consists of.

To conclude

Irrespective of the purpose of your website, whether it is for selling or not, the chromatic choice is of utmost importance. Playing with colors might turn out to be really fun, but one should be aware that every chromatic set suggests something else, an emotion, a social meaning; so, choose with care.

View Related Articles

Comments (10)

enfopedia says:
March 16th, 2008 at 8:55 pm

Great article, I will definitely bookmark this page!

sin says:
March 23rd, 2008 at 9:57 pm

good

Joey Boy says:
August 29th, 2008 at 4:49 am

This helps me a lot of escaping trouble of choosing color for the web.

Indianapolis Web Design says:
September 4th, 2008 at 8:34 pm

I have never heard of the range of colors for a web site that you listed (5-7), but that is interesting and something I will keep in mind. Thanks.

Partha Debnath says:
September 8th, 2008 at 9:38 am

Excellent article on color concept. It will help me a lot in my profession.Thanks a lot for such a useful article.

Email Marketing says:
September 20th, 2008 at 1:10 pm

Thanks for sharing the useful information through this article. I m going to redesign my portal and i am sure this will help me to looks my site professional.

nishad sharma says:
September 29th, 2008 at 12:12 am

i've been searching for the right template for my blog, experimenting blindly with the colors. now i've go a guide, gonna give it a paintjob

Iradj Mehrmanesh says:
October 14th, 2008 at 6:36 pm

Excellent article with many beneficial points and references.

Marc says:
May 19th, 2009 at 11:19 am

This is a great help, have been researching colors for web sites, and these indications are a good starting point. I am also using this site to decide on color schemes: http://colorschemedesigner.com/ and been a great help!

Thanks & well done!

Kate says:
July 22nd, 2009 at 10:48 am

great article, very helpful, thanks!

Name *
Mail(will not be published) *
Website *
Message *
Subscribe to comments:
Validation Code *:
Please note: Comment moderation is enabled and may delay your comment.
There is no need to resubmit your comment.
Copyright ® 2016, http://www.avangate.com all rights reserved.
This article may be reproduced in a website, e-zine, CD-ROM, book, magazine, etc. so long as the above information is included in full, including the link back to this website. Please e-mail at articles@avangate.com, before using the article.

Avangate Newsletter

Whether it's news you're looking for or an expert's advice on how to sell software, SaaS or digital goods online, you came to the right place. Find guidance in our latest eBooks, webinars, reports and conversations with industry thought leaders to further increase revenue, maximize the value of every customer, and expand global reach.

Let's Get Started 0

GET STARTED