Colour perfection - 10 minutes to the perfect colour scheme

The right colours keep your site on message, in this article we are going to look at why colour is so important and some quick and easy methods for creating a sophisticated colour scheme that sells your online brand.

What you will take away from this article:

  1. Why different colours mean different things and how to use this principle
  2. How your brand already has colours and how to work out which ones are important
  3. Which colours go together
  4. Putting everything together to build a simple scheme

Why different colours mean different things and how to use this principle

Below is the colour wheel, it has the complete spectrum of visible colours from red to violet. They are just colours, they have no intrinsic meaning, so what difference does it make which colours we choose for our website?

Colour Wheel

Colour associations

Think of a sunset, or gentle flickering fire, just imagining these things is enough to make us feel warmer and more relaxed because we can't help but remember all those lovely relaxing sunsets and cosy fires we have experienced.

Now think about a dark stormy day in winter, yellow lifeless plants clinging to the pale warmth of a cold sun, clouds, grey and purple threatening to release their icy downpour and turn the dismal day into a black nightmare.

Now think about the vibrant flowers on a still spring morning, the warmth of the day is breathing life into the busy insects and the dots and dashes of colour in the flower beds are as exciting as a visit to a sweet shop.

Colours have no meaning except that which we give them. If you take a nice tree-green, and earth-brown and a sky-blue and put them together, it will give people an impression of nature.

Demi - Forrest Baby shawn appleton
Demi - Forrest Baby by Shawn Appleton

The above colour scheme has some natural feeling browns, a sky blue and a dark forest green. It also has a vibrant berry red to add a stimulating colour to the gentle mix.

We have looked at how colours can be hot or cold because they remind us of the sun or a winter day and how they can be vibrant and natural because they remind us of vibrant flowers or beautiful natural landscapes.

One last thing about colour associations worth mentioning is that everyone is different, someone who was once lost in a forest might be terrified by the above colour scheme, we can only go on the general concepts and can't make a new scheme based on the psychological profile of each user (ok yes you really could do that if you wanted to put the time in).

How your brand already has colours and how to work out which ones are important

If you are scrolling through colour schemes on the internet already, and as you found this post, you probably are, then stop scrolling now. Your brand already has colours. I'm not talking about the colours in your logo, I'm talking about those associations we mentioned above.

Your business stands for something, whether its cheap products and quick service or small batch quality, it could be innovation or tradition, excitement or relaxation.

If you have a well thought out branding already then you have a short list of phrases and or descriptive words that sum up your brand, if not, they go do this first!

Let's pretend that your company makes whiskey in a micro distillery in the city, you use locally sourced ingredients and traditional processes to make a sophisticated modern drink for the professional city worker to relax with after a hard day.

We have a combination of concepts here, tradition and sophistication, but also the fast-paced city lifestyle.

What colours say traditional? Which say sophistication? What about the city?

City Whiskey
A colour scheme based on whiskey drinking city workers

The above takes the natural colour of whiskey and combines it with some blues and whites which many people will associate with city workers and city buildings. Suits are often blue or grey in professional and financial settings, so that association is simple to make. It is an interesting note that the colour of choice for important and serious institutions is not blue by chance, but because blue is the colour of the sky and the sea, blue is such a fundamental and stable colour in all our lives that we have come to depend on it.

The bank is as secure as the never ending blue sky.

Do the same thing with your brand ideas, take the important elements of your business and find the colours that go with them. You may have to be a little creative, if your company cleans crime scenes or is a sewage works, you don't have to have the colours of disgusting things, but instead you can focus on the end results of your work, like clean and fresh rooms or cool refreshing drinking water instead of human waste and stab wounds.

Putting colours together

What if we sell orange and banana smoothies? put these two colours next to each other and you will see they don't look great as a duo, they are too similar to form a contrast while also too different to be harmonious.

Certain colours go together and certain colours do not. go back to the colour wheel at the start of this post, pick a colour, let's say orange. you can have orange, and only orange as your colour scheme, you could have different shades of orange (lighter or darker) and your scheme would work. Looking at the colour wheel, you can also choose a colour either side of orange, and they will work too, because they are similar enough to go together, we call these colours analogous colours.

This is now a pretty nice colour scheme, we have a few shades of orange, and we have added a little depth and sophistication with analogous colours, but its a little boring isn't it? a little dull. We want to be able to catch the user's attention for important elements such as buttons we want them to click on or headings right?

This is where we release our secret weapon, the complimentary colour, this is opposite our chosen main colour on the colour wheel, we chose orange, so look opposite the orange on the wheel right now, it is blue, this is our opposing colour. It stands out from the orange because it is its opposite. But most importantly it doesn't clash with orange, in fact the two together look great, they compliment each other.

Orange complimantary scheme
Orange and blue complementary colour scheme

There are other ways of combining colours such as picking 3 or 4 colours at equal distances from each other on the wheel, the more colours you have, the more complicated you make things, so it is best to keep things simple and less busy, unless you have a goal of creating vivid excitement or confusion.

Putting everything together to build a simple scheme

If you have read this far you know that colours have meaning, that your brand also has meaning, and therefore your brand already has colours, you have identified what those colours are, and you know how to combine them to compliment each other and avoid jarring your audience.

What do you do with your scheme now you have made it? We have a few simple rules to follow:

  1. Keep it simple
  2. Use colour sparingly
  3. Keep your text a high contrast to your background
  4. Use your complimentary colour only for places of high importance

Keeping it simple

You may have identified 15 great colours that define your brand, great, throw all but 2-5 of them away, as a business you should be well defined in your goals, so let your users know it buy keeping to a limited pallet.

Using colour sparingly

You have your 3(ish) colours, but not everything needs to be one of them, your page is white, so pick elements that benefit from being coloured in, don't go at it like a child with the finger paints, it will look heavy and confusing, use colour here and there to identify different elements of your site. You might have a box on each product page with more information, colour it in, and use that colour only for that single purpose, that way your users know exactly what they box is every time. Keeping it simple means they are more likely to do what you want.

Keep your text a high contrast to your background

Text has to be readable, that means each character must be easily identifiable and your user should not struggle to read it, black and white are opposites, black also absorbs loads of light and white reflects loads of light, these things make text super legible, that's why they are the go-to colours for text and backgrounds.

By all means explore other options, in fact tuning the black text down a notch can make your page look softer and more inviting, but keep that contrast high or your users will go elsewhere.

Use your complimentary colour only for places of high importance

Your complimentary colour is your highlight, the cherry on the cake that draws the eye and makes everything special. Use it for the element on the page that you want to draw people to. It is often used for buttons we want people to click or very important page elements. Don't go splashing it everywhere, it will lose its importance as a directional pointer.

Where do you go from here?

Look at some websites and identify the concepts we have gone through, the colour choices that each site makes will seem pretty obvious and you will notice that serious websites use a lot of bold serious colours whereas fun websites use a lot of happy relaxing or vibrant colours. You can always find website that share your brand ideals and take inspiration from their colour choices.

Most importantly, play with the colours, get some opinions, spend some time thinking about them, then put them away and meditate for a bit, then come back to it and see how you feel. It is a science, but also an art, so let your personality guide you within the confines of the rules we have established.

Take a look at Adobe's great colour scheme picker which has a wheel and lots of simple options to choose from so you can create a foolproof scheme using the techniques we talked about. There are also loads of fantastic colour schemes made by other people on the Adobe site, explore them for inspiration or steal them for your own purposes.

Have fun getting creative with your colour schemes.

Tags

Website
colour scheme
colour
self built sites

Add new comment

CAPTCHA
Answer the below question to help us fight spam

What is 2 + 2?