Design 101: Colour | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Friday, 15th October, 2004

Design 101: Colour

In the first of my series on the basics of good web design I tackled how to handle branding. In this article I want to deal with the more subjective issue of colour. How do you choose the right colour palette?

Design:
The estimated time to read this article is 3 minutes


A subjective decision

The biggest problem with choosing the right colour palette is that it is all down to individual taste. Colour is a matter of opinion and there is no right or wrong answer. As a result you will get as many opinions on your colour palette as people you ask.

Differences in colour

Part of the problem is that we all perceive colour in slightly different ways. Also roughly 1 in 20 people have some form of colour vision deficiency.

However that is just the beginning. In addition to the differences that exist between people in the way we perceive colour, there is also differences in the way our computers show colour.

There are a whole range of factors which affect the way our computers display colour. These include:

  • Monitor type
  • Monitor brightness and contrast settings
  • Graphics card used
  • Operating system being used
  • Colour depth
  • Gamma settings

Colour theory

Because the choice of colour is so subjective and because you cannot guarantee exactly how a colour is going to be finally displayed to the end user it is important to remove the choice of palette from the realms of personal opinion. One way to do this is to use colour theory.

A lot of research has been done in how users respond to colour and what emotional connections they make. We all know the basics like red means danger or blue is cold. However this area of research has gone much further.

An excellent book on the subject is Shigenobu Kobayashi’s book Color Image Scale. This book provides over 1000 colour palettes organised by mood, taste and lifestyle. What this book allows you to do is look up a concept such as "Urban" and find an appropriate colour palette.

I know that many people are skeptical of books like this but I believe they have real value. Kobayashi’s book was based on research done over 3 years involving analysing responses to colour from a large sample audience. Surely this is preferable to a few individuals debating the subject based on personal preference.

Corporate colours

Of course in many situations you don’t have the luxury of starting with a blank palette. Often you will be required to work with an existing corporate colour such as IBM blue. In these cases it is a matter of finding complimentary colours that work well with your corporate colour.

Again, in order to avoid descending into the world of personal opinion, I prefer to use colour theory as a base on which to build.

Fortunately there are some excellent tools out there that will help you build a palette based on a single corporate colour.

Some sites worth experimenting with are:

Color Match 5KColor scheme generator 2

However by far my favourite is a piece of software called Color Schemer Studio. This brilliant tool allows you to create a variety of colour palettes based on long standing colour theory principles. It also exports them in a variety of formats and provides RGB and HEX values. It even helps you ensure high contrast for the best web site readability.

Conclusions

This article just scratches the surface of an enormous subject but hopefully it provides a few useful tips to get you started on creating effective colour palettes while avoiding the squabbles of personal preference. In my next article in the Design 101 series we will look at structure and layout.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.