Making Good Use of Colour on Your Website

3 Feb, 2007 | Internet TipsTipsTechVfd

Web sites are a predominantly visual medium, though not exclusively sight-biased most are aimed at delivering information using text and images. There are many elements that make up the visual design of a site, from typography to images; colour is simply another aspect of the design. It is, however, just as important as the others and can have a huge impact on the success and perception of a company or site.

Most web designers, whether they realise it or not, have an understanding of colours, they have to. They may know instinctively what is right and what is wrong, or they may have spent time studying the topic. Knowing about colour involves more than just being able to pick a nice one, or knowing which work together, and brings in elements of basic psychology. Reactions to various colours are rooted deep in our subconscious, having been built up from millions of years of evolution.

Red, for example, is well known as a warning colour. That's the reason it's used in traffic lights to signal stop, in danger signs, for fire extinguishers and similar applications. It's not the only use or interpretation of the colour, it's also linked to love, romance and passion amongst other things. Red is useful when you have some important information you want people to be aware of. If someone fails to fill in a required field on an order form for example, you could have the error message display in red. People are instantly aware something is wrong.

The following is a quick overview of colours and how they can be applied to specific tasks on your site.

White and black, though not strictly colours, are the only considerations when it comes to backgrounds. By this I mean the main page colour on your site. If you have a large amount of text, or are trying to present a professional, corporate image, white is the only way to go. For specific purposes, say you have a rock music site, or are trying to be anything but corporate, black may be more appropriate. If you have products to display, white is by far the best colour to use, it allows the products to stand out, gives them a clean, modern look with a neutral setting. Any other colour makes reading hard, displaying images difficult and generally overwhelms, but it can work well if used in small blocks. You can usually get away with an extremely weak pastel for a background (i.e. white but with a hint of colour). Under no circumstances should you use a pattern background to display behind text, always make sure you have a solid colour.

Text colour is a bit more flexible and forgiving. The aim here is to find a colour that is the complete opposite of your background colour to enable it to stand out and be readable without people straining their eyes. If you're using a white background, the natural choice is black text, but any dark colour will work, usually the darker the better. The lighter the colour the harder it is to read, yellow should be avoided completely.

Other than that, things are fairly easy. There are no colours that should never be used, you can always find a good site that uses a colour most people would recommend avoiding, but I'll run through a few colours to give you some idea of how to use them.

Starting with the more popular colours, you may not be surprised to know that blue is the most popular colour on the Internet. It's inoffensive, lends itself well to business and professional sites (especially technology sites, there's a reason IBM, HP, Dell and Microsoft all have blue as their dominant corporate colour) and is versatile. Blue is a safe option. It tends to create a cool, modern feel. It also has links to nature through water and sky, but is considered a masculine colour.

Green, long known as a relaxing colour, has recently been found to be the preferred colour for selling products (offline at least, buy somewhat unscientific means in my opinion). It's a strong colour that tends to stand out, and obviously works well for sites related to nature or wishing to convey a natural image (if you sell free-range foods for example). A bright green also draws parallels with spring and summer, so can be energetic, warm and welcoming.

Yellow and orange are strong, energetic and striking colours. They have plenty of visual impact, but should be used with caution for fear of overpowering any visitor. They also aim towards a younger demographic, with the older generations preferring more sedate colours, though this can also go for content. Yellow is usually used for unisex children's applications where you want to avoid the typical blue for boy and pink for girl, and is often linked with new-borns (possibly due to jaundice being yellow). Bright colours can also be a warning or signifier of danger. Yellow, combined with black, is a good example. Wasps, hornets and bees employ it in nature (amongst others), many warning signs and tape also employ this combination. Orange is used to signify warmth and has links with fire and autumn.

Purple is considered a colour denoting confusion, but it also has a luxurious and regal link. Roman emperors dyed their cloaks purple to signify their importance and position. Mayfair, the most expensive square in monopoly, is purple. It has a very intense colour and can be very overwhelming if used extensively. It is also a colour that holds mystery (incidentally, black is the colour of mystery and enigma).

Pink is often linked with purple, but is a much brighter, sunnier colour, and it shares many traits with the other bright colours, especially with regards to age, but it also has a distinctly feminine bent. Pink is not associated with danger, but has warmth, friendly and is often linked with babies and infants (not just girls).

Turquoise is more of a combined colour, but has links to the sea and jewellery. It too has a brightness and vibrancy, these combine to make it a colour used often to signify foreign locations (especially with regards to holidays).

Grey strikes the middle ground between black and white and is often regarded as a boring colour. It has, more recently (due to the increase in silver as a whole) been linked with technology (especially light greys) and maintains a clean image. It is the colour of ordinary pencil lead and so has artistic links. Light greys suffer when used against a white background as it can be difficult to pick out for visitors with impaired vision. Greys are useful as background colours for box areas.

Brown has different connotations, some linking it to faeces or staid thinking, while it is also the colour of leather, of age, of experience, institution and tradition. It is an autumnal colour, and the colour of earth and so has links with nature. It is also the colour of coffee, chocolate and cooked meat, so has some food related links.

Colours have wide ranging meanings and can be used for a multitude of expressions. Being aware of what they mean to people and how they interact with each other can help you design your site with greater impact. For example, using red to signify warnings, or yellow to grab attention, perhaps purple to signify a luxury item. Colour can have a significant impact on the look, feel and interpretation of your site, so consider it carefully. Take a look at some of the following links for ways to pick colours, schemes and methods.

Colour Theory

Colour Psychology

Picking colour schemes