Colour has a huge impact on any website, so choosing and implementing the perfect palette is a central part of your site’s design process.
In this blog post, we answer some basic questions about choosing colours for your design.
How many colours should a website use?
Standard advice is not to go overboard with too many colours, and for good reason. If you include an overabundance of colour in your design, your visitors will not only have trouble in finding information and in maintaining concentration, but your branding could also suffer from a lack of clarity and give out a jumbled message.
Three main colours is usually an effective number to use, in a ratio of 6:3:1 (60% of one colour, 30% of a second colour and 10% of a third). Typically, one of these colours – either the 60% or 30% colour – would be something fairly neutral. The smaller, 10% colour could be a brighter, accent colour.
If you have three colours and really feel that you need to include something else, don’t forget to try shades and transparencies of your existing colour scheme before adding a completely new colour in.
Bright and bold or pale and interesting?
The actual choice of hues for your website will of course be dependent on several factors, including:
- Your audience – Are they young or old? Male or female? Do they come from a specific culture or have a particular profession? Don’t forget that different colours have psychological and cultural effects – do your research.
- Your purpose – What is the purpose of your website? Do you want to inspire? Entertain? Inform? Relax? Motivate?
- Your brand – What is the message you want to get across? Is it important that you use a natural-looking colour palette, for example?
- What is the ‘feel’ of your company? Do you want your visitors to leave feeling calm and serene or passionate and energised?
- Your existing media – Do you have a company logo that needs to be used? Are there certain photographs or illustrations that should be incorporated?
Tints, shades and tones
As well as thinking about the hues themselves, you will also need to bear in mind the saturation and chroma levels of your colours, as well as the use of transparencies, tints, shades and tones.
- Tint – Where white is added to lighten a colour.
- Shades – Where grey is added to soften and deepen a colour.
- Tones – Where black is added to darken a colour.
- Transparency – Where areas of colour are overlaid on other areas of colour, creating new colours, tints, shades or tones.
- Chroma – The purity level of a colour. Avoid using too many colours with a similar chroma level.
- Saturation level – How a colour appears under particular lighting conditions. Using similarly saturated colours can help to add a sense of cohesion to your design, or using contrasting saturation levels can make certain areas stand out.
Are there any rules about combining colours?
Put simply, yes. The study of colour has been around for a long time – the first colour wheel was invented in 1666 by Sir Isaac Newton – and variations of this have been used by artists and designers ever since, who have come up with some basic ‘rules’ of colour theory.
Of course, as long as there are rules, there will be websites who break those rules with breathtaking results. However, you might be best placed to start off considering some of the following:
Analogous palettes
These schemes consist of three colours that can be found next to each other on a colour wheel (e.g. red, red-orange, orange). Bringing a sense of harmony to a website, these palettes are well suited to sites that want to generate a feeling of calm, elegance and refinement.
Complementary palettes
Complementary colours are those which are directly opposite one another on a standard colour wheel, and cancel out each other’s hue to produce a white, grey or black colour, e.g. red and green or violet and yellow.
Because these combinations are so high-contrast, they create a very bright and vibrant effect and so work well in small doses for when you need to draw attention to something on the page. For this reason too, they don’t work well for areas of text.
Triadic palettes
A triadic colour scheme is composed of three colours that are evenly spaced around the standard colour wheel. Because these palettes can be very bright, you might need to use tints or shades to soften the effect, and only use the most vibrant colours in small areas of the page as features or accent colours.
There are plenty of other standard palettes to investigate, such as split-complementary, tetradic, square, monochrome, duetone and so on, each with their own advantages and disadvantages.
Using a tool such as Adobe Kuler is a quick and easy way to play about with these schemes to see what works best for your website. The tool also allows you to save your own colour palettes, share them with others, export them to your design software and see what palettes other people are using.
To conclude
There is no doubt that the use of colour can make or break a website. Some colour combinations will have visitors clicking away at the first opportunity regardless of the product or service you offer (you know the type; the sort with magenta text over a flashing cyan background!). But if you stick to the basics we’ve highlighted above, you’ll find that it’s not too difficult to choose and implement a colour palette that works seamlessly with your branding and company message, creating the look and feel that you want for your visitors.