The Importance of Colour in Web Design

Colour in Web DesignJust like in physical art, the beauty of digital art (i.e., websites) is heavily influenced by the use of colour. But more than mere aesthetic taste is at stake with the web; often the quality of the web page will determine the difference between a visitor who converts and one who doesn’t.

Let’s take a deeper look at the intricacies of colour in web design.

Start from the Beginning: Colour Theory

Basic colour theory teaches that colours can be categorized. You are probably familiar with the colour wheel. Primary colours take up 3 places on the colour wheel. Secondary colours double that number. Tertiary colours double that number once again. So however finely you want to make your distinctions, the colour wheel can accommodate you.

Colour theory says that based on these categorizations, you can figure out which colours go with what other colours by formulas. The two most common formulas are the analogous formula and the complementary formula.

The analogous formula says that colours close to each other are harmonious. For instance, you could have a colour scheme with light green, green, and dark green. These colours are close on the colour wheel, they are analogous, so they go together.

The complementary formula takes the opposite approach. It says that colours opposite each other on the colour wheel are harmonious. So instead of pairing colours that are close together, you match colours that are as different as possible.

Colour Interactions

Have you ever noticed how a shirt can look one colour sometimes yet at other times it can look very different? This has to do with what designers call colour context, and it affects more than your shirt colour.

In the world of web design, colour context informs the user what to do next and draws her attention to certain areas of the page.

Imagine a page with a white background and a red button in the centre. That red button would stand out because of the white context around it.

Now imagine a maroon background with the same red button. The button would be much less obvious.

This little example starts bringing us around to the point: How important is colour in web design.

Website Aesthetics

While arguably not the most significant characteristic of colour in web design, the aesthetics of a website are certainly affected by colour choices. It’s true that it’s not a requirement to have a good looking site to be successful online. There are plenty of examples of this. (Craigslist, Wikipedia, and Google immediately come to mind.)

But it’s important to realize that these sites are the exception. They most likely succeeded despite their blandness.

So, for all the rest of us, we do need to think about aesthetics when it comes to our website design.

An aesthetically pleasing website is important for at least two reasons.

  1. It looks professional
  2. Users will enjoy your site more (and stick around longer)

Choosing a harmonious colour scheme is a huge part of having an attractive site.

Colours Change Behaviour

You might think it a bit absurd, but changing colours on a website (even just a very minor change) can have a tremendous impact on user behaviour. If you have a website that’s making you money based on user behaviour, this is a very big deal.

It’s such a big deal, in fact, that there are communities of internet marketers who obsess over every little detail of a website, trying to find the best combination and layout of elements on a web page to get the highest conversion rate. This is where the concept of A/B testing or multivariate testing comes into web design.

In this way, web design isn’t too far removed from direct response copywriting.

So keep this in mind when your considering your site’s web design. Colour can make a big difference.

Image credit: tanakawho

2 thoughts on “The Importance of Colour in Web Design”

  1. Hi, Cara.

    This is a very good analysis of color in web design. I’ll have to remember this when I design my next website!

    1. Hey, there!

      I’m glad this article helped you. Thanks for sharing that!

      If you’d like us to check out your next website, feel free to leave a link in the comments. :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>