How to choose colours for your website

Tags: , , , , , &


As a designer you have to make many decisions during a project, some of which will impact it more than others. One such decision is what colours to go with when design or redesign a website. In this article we’ll take you all through our process when it comes down to deciding the colour scheme for a new project.

  1. Sometimes it’s easy
  2. Defining your colours
  3. What! Only 3 colours?
  4. Using your 3 colours
  5. Wrap up

1. Some times it’s easy…

And sometimes its not, it all depends on the clients needs and whether they have established strong brand colours. Obviously if the client already has a style guide then use it to make your colour decision. However we tend to get quite a few companies that don’t have well established band colours. This is usually because they are either a startup or that they rely on the visual part of their logo and not the colours.

2.Defining your colours

For the most part, though there are some exceptions, we tend to stick to 3 major colours when it comes to web design. But what should this 3 colours be? Well the first one should be either the clients primary brand colour. If they have no well defined brand colour then a choose a colour that strongly reflects their brands values and identity. Here are some colours and the values they represent:

  • Red – heat, passion and excitement.
  • Orange – warmth and vitality.
  • Yellow – optimism and creativity.
  • Green – serenity and health.
  • Blue – security, truth and stability.
  • Purple – spirituality, intelligence and wealth.
  • Pink – youthful intensity.
  • Brown – class and durability.
  • Black – power and drama.
  • White – clean and simple.

As for your second colour choice, you’ll be looking for something to contrast with that of the primary one you’ve just picked. For me, a lot of the time I end up going with either black or white. Both those colours will provide a good backdrop for your site. Both black and white contrast well with just about any of the colours mentioned above.

Now on to colour number 3. You want this colour to compliment that of the primary brand colour. Something that can sit alongside it and provide unity that you contrasting colour can not.

3. What! Only 3 colours?

Well the answer to that is both yes, and no. Yes you are only picking 3 strong colours that work well with each other but don’t forget you can use various shades of each colour. So you’re really looking at quite a few more colour options than you may have first anticipated.

4. Using your 3 colours

You have now chosen your 3 colours, so how should they be implemented into the site? how much of what is a good idea? For us this will differ slightly with each site, but as a sort of general rule, 60%, 30%, 10% is good.


For the 60% you have two options. Either you pick your primary brand colour or use the secondary contrasting colour. More often than not if I’ve chosen to use black or white as the contrasting colour I’ll choose to make it the most use colour in on the site.

The 30% colour should then be whichever colour was not chosen to be the dominant colour. for example, if you choose white to be the 60% colour then use the primary branding colour as the one that will colour 30% of the page.

Last and possibly least (see what I did there?), the 10% colour should be the colour that you chose to compliment your primary brand colour. you know, the only one that’s left. This should be either a colour that you would use for your call to action buttons (so think high contrast), or a more muted variation of your 30% colour choice.

5.Wrapping up

And there you have it. You should now have a better understand of the process that we at Zing Design go through when it comes to picking a colour palette for a new project. Don’t forget to check out our other post on web design colour tools & resources.

People who have viewed this post also viewed


Leave a comment

* Required fields


Please enter the CAPTCHA text