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.
In this post today we talk out choosing the right colours for your website and colour theory for designers.
Do colours influence web site visitors?
When creating a site, choosing the optimum colours 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 colours?
Researchers agree that colours greatly influence the human state of mind. The colour 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 colours and other visual displayed elements.
We 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 tips that you should consider for any website:
1. Use a natural palette of colours.
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 colours, 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 colours 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 colours are dark blue, gray and black. The situation is not the same for product promotions. When the product is the center of attention, desaturated colours are recommended. You can see in the photo below exactly the difference.
3. Select an average of 3 different colours 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 colours should be employed; four or five is okay; 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 colours in association with writings of certain colours.
Keep in mind that responses to colours 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.
If you’re going to use colour effectively in your designs, you’ll need to know some colour concepts and colour theory terminology. A thorough working knowledge of concepts like chroma, value and saturation is key to creating your own awesome colour schemes.
Here, we’ll go over the basics of what affects a given colour, such as adding gray, white or black to the pure hue, and its effect on a design, with examples of course.
Hue is the most basic of colour terms and basically denotes an object’s colour. When we say “blue,” “green” or “red,” we’re talking about hue. The hues you use in your designs convey important messages to your website’s visitors.
The primary hue of the background and some of the typography on the Happy Twitmas website is bright red.
Using a lot of pure hues together can add a fun and playful look to a design, as done in the header and elsewhere on this website.
Pure red is a very popular hue in Web design.
Mix uses a number of pure hues in its header and logo.
Green in its purer forms is seen less often and so stands out more than some other colours.
Chroma refers to the purity of a colour. A hue with high chroma has no black, white or gray in it. Adding white, black or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a colour in comparison to white.
In design, avoid using hues that have a very similar chroma. Opt instead for hues with chromas that are the same or a few steps away from each other.
Cyan has a high chroma and so really stands out against black and white.
Another website with a high chroma blue, though it includes some tints and shades with somewhat lower chromas.
Differences in chroma can make for a visually pleasing gradient.
Saturation refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.
In design, colours with similar saturation levels make for more cohesive-looking designs. As with chroma, colours with similar but not identical saturations can have a jarring effect on visitors.
The saturation levels of many of the different hues used here are similar, adding a sense of unity to the overall design.
Combining colours with similar muted saturation levels creates a soft design, which is emphasized by the watercolour effects.
Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues.
Tones are sometimes easier to use in designs. Tones with more gray can lend a certain vintage feel to websites. Depending on the hues, they can also add a sophisticated or elegant look.
Tones can give websites a sophisticated look while adding some vintage and antique flair.
This website combines blues in a variety of tones, shades and tints.
The tones used in the navigation and background design here give this website a vintage, hand-made feel.
Old vs. Young People
People of different ages have different reactions to colours. People past a certain age will find web sites with more sober and restrained (and therefore relaxing to the eye) colours 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 colours than men; in other words, while men may find peach, teal or peacock as mere notions, women associate these things with colours.
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 Colours
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’ colours.
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 colours that will be internationally accepted, but you have to do your homework quite well.
Common Colours 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.
While you don’t necessarily have to remember all of these technical terms, you should be familiar with the actual concepts. To that end, here’s a cheat sheet to jog your memory:
- Hue is color (blue, green, red, etc.).
- Chroma is the purity of a color (a high chroma has no added black, white or gray).
- Saturation refers to how strong or weak a color is (high saturation being strong).
- Value refers to how light or dark a color is (light having a high value).
- Tones are created by adding gray to a color, making it duller than the original.
- Shades are created by adding black to a color, making it darker than the original.
- Tints are created by adding white to a color, making it lighter than the original.