Six Colour tips for web design

Added 09.06.11

If you're old enough to remember when we only had black and white televisions, or have ever tried to sit through a long old time movie, you will probably have realised how much more attractive and entertaining colour makes anything! From infancy on, the human eye is fascinated by colour and, throughout our lives; colour can come to gain increased significance as it gathers emotional resonance and cultural significance. From the simple traffic light red 'stop' and green 'go', to blue for boys and pink for girls, or all the different colours identified for occasion bouquets, clothes and anniversaries, colour plays a central role in contemporary society. The symbolic and emotional meanings of colours are also an important consideration in marketing campaigns and advertising, and for this reason, colour is something that you just have to get right in web design. While there may be some occasional exceptions to the rules, here, in no particular order, are six tips to help you make the most of colour in your web design:

  1. Remember the Power of Contrast: When choosing the colour scheme and placement of colour for your web design, you should select a single 'wash' style colour for the background of pages and a contrasting colour for the text to be overlaid. Black text against a white or light grey background will never fail to impress, although other tonal shades can be successful in web design. It is also a good idea to avoid patterned backgrounds behind text which will often render the text illegible.
  2. Don't get Carried Away with Colour: Unless, possibly, you are designing a website for children, the general rule for web design colours is 'less is more'. Colours should be used economically and for maximum impact. A standard web design need not involve more than two or three main colours, with occasional contrasting splashes that may emphasise important elements. Many websites feature neutral tones and different shades of their main colours for variety. For all over colours in backgrounds, muted tones are always a top choice.
  3. Harness the Power of White Space: Think about high end fashion and perfume ads – you'll notice that they use graphics and text sparingly and generally feature a lot of white space with wide margins, headers and footers. This lends a stylish, understated appeal and focuses the eye on the product. A similar approach should be taken in web design where adding white space between blocks of coloured text and around the edges of the page will help to direct the visitor's eye to the key elements.
  4. Be Careful when Using Light Text on Dark Backgrounds: Although contrast is the key when placing coloured text against coloured backgrounds, it is a good idea to place darker text on a lighter background rather than the reverse. However, using white text on a black background for example can be effective for some web design such as the websites of businesses with a Gothic tone. It is however, not recommended for the web design of blog sites and other text-heavy pages.
  5. Use Bold Colours to Emphasise Important Items: This may sound like common sense, but you'd be surprised how many times this rule is not used to advantage in web design. Bold colours such as red, blue and yellow are used to great effect in e-commerce websites such as eBay. Purchase buttons are often red for the reason that the colour provides such a strong emphasis. Fluorescent colours, however, are to be avoided in web design as they can be blinding and turn visitors away.
  6. Make Sure Your Colours Fit the Mood: It is important that each colour used in any place in a web design is in line with the ethos and industry of the company and the mood intended for the website as well as the demographic you intend to target. For example, a heavy duty work wear site that features a design composed from various shades of pink would seem incongruous, whereas the same web design for an online fashion store for baby girls would be completely reasonable.