How to Choose a Colour Scheme For Your Website
“Life is about using the whole box of crayons” – RuPaul
Colour and branding
It is very important to establish a rock-solid brand identity, which is the building block for trust, creating lasting brand advocates and making customers feel at ease.
What speaks for the brand? It’s logo.
Hence, the colour scheme selected is endlessly intertwined with its brand identity. It also has a strong correlation with brand value.
As per research, ‘colours boost brand recognition by 80%.’ It’s only fair to say that colours do play a vital role.
Website Colour Scheme
Similar to the logo, a website too needs a colour scheme, it is equally crucial. You cannot choose a colour scheme randomly or pick colours which look pleasing to you. No doubt, you want wondrous aesthetics which make the website pop but, the colour scheme is crucial and tricky and a lot of thought needs to go into it.
Why is colour so important?
Colour is an element which connects to viewers on an emotional level. Different moods are set by the colours you pick on your website. The colours you choose have to reflect the message that you want to convey about an upcoming product or event etc.
An environment or product is subconsciously judged by people within 90 seconds of initially viewing it. Almost 60-90% of that judgement is based on colour alone. Choosing the right colour scheme will naturally drive you toward your demographic; you’ve already won half the battle there!
Hence, it’s important for the colour scheme of your website to be planned, intended and optimised for conversion.
Here are few quintessential points for picking the perfect website colour
- Choose a dominant colour – Like the red for Coca-Cola, choose a dominant colour as your brand colour. This colour will stir emotions when viewers arrive on your website and it will be the colour they think of when they think of your brand.
To choose this colour, certain other factors need to be considered:
- Overall demographic: Who is your target demographic? Who are you trying to sell to? What are the emotions that you are aiming to arouse? Take into account the personality of the target audience as well. Example: an organic food company would go for green to associate itself with health and nature.
- Gender: Certain companies cater to a particular gender. For those companies, the likes, dislikes, favourite colours etc. need to be studied and implemented.
- Age: An individual’s preference of colour can vary with age hence; make sure you know the target audience’s age group.
- Eliminate competitors colours: Try to eliminate the colour of your competitors from your colour scheme
- Understand how colour affects emotion – Get familiar with how human’s emotions are affected by colour.
The impact that colour has can vary with geographical location. Example: A colour which attracts shoppers in India will not do the same for American shoppers.
Take a look at the picture below and see how brands have used colours to stir emotion.
Note: If you are working with a well-known or an established brand then simply use the colour from their brand identity.
- Choose your accent colours – A single colour throughout your website can get boring and monotonous. To add a bit of zing (but also keeping it professional), accent colours are required. Once you get the dominant colour it’s just pure mixing and matching of colours. There are some colour matching tools which can help you get through this process.
How to use accent colours
Accent colours are useful in making secondary information stand out. They are meant to highlight parts of your website which are attention-worthy like subtitles, quotes or buttons. Content pieces or items which may not be the focal points on the page but still need to stand out can be coloured with accent colours. Limiting accent colours to 1-2 is ideal as too many colours will create multiple focal points which can confuse visitors.
- How many colours to use? – Albeit no hard and fast rule is in place, the more the colours you use, the more arduous it becomes to establish a unified design. A handy tip you can keep in mind and put to use is the 60-30-10 rule. This rule states that in order to create perfect harmony, three colours should be used in varying degrees (60%, 30% and 10%). Here is the breakdown:
- 60% of primary colour for an overall unifying theme of design
- 30% contrast secondary colour – a colour that contrasts with the 60% for a striking effect
- 10% accent colour which completes the 60% and 30% colours
Boiling it down, the ideal number to use is three colours. Again, there is no hard and fast rule but it’s a good number to aim for. Four to five colours works, but more than that will only form inconsistency.
NOTE: Use three colours consistently through the website. In order to create a pleasant experience for visitors, chromatic harmony is a significant criterion.
Pro Tip: In a scenario where you want to use more than five or six colours, instead of going with bold colours, use tints and shades. Not only will this unify the design but the need for another colour will be eliminated.
- A background colour for your website – Choosing a background colour for your website is very similar to that of choosing a wall colour for your house. Just like how a wall colour is chosen to make you feel comfortable, soothe you and not overwhelm you but at the same time it’s not boring. Likewise visitors who come to the site need to feel comfortable and absorb content without being overwhelmed. At the same time, making the website too nonchalant that visitors gaze over all the important content is not a good idea.
How to choose the right background colour?
It’s like choosing a colour for a retail store and your vacation home. The colours depend on what you are offering. A retail store would have bolder colours as opposed to a vacation home which is meant to make you feel relaxed. In simple terms, the colour of the website entirely depends on the purpose of the website.
- Create a contrast between the page background and text – The ideal combination for readability is black text on a white background apart from this, there are other stunning combinations as well. Again, this also depends on what you plan to showcase. For a product, which is the centre of attention, less saturated colours are recommended.
In colouring the whole thing up
Yes, choosing a colour for you website can be quite challenging and scary.
As already established, colour not only improves your website but also enhances your brand identity. Like say when you think of Coca-Cola, what is the first thing that pops up in your mind? Except the extreme quench of thirst and the craving for an ice cold soda, it’s the iconic red coloured Coke logo. The colour is as much as a part of Coke as is the soda. It’s quite impossible to think of Coke without imagining the colour red.
Coke chose to use red intentionally. One of the reasons being that it stands out from competitors and also because it stirs the right emotions of excitement, boldness, passion etc.
In a like manner, when you choose the appropriate colour for your site, you are doing more than making it look appealing – you are in the path to creating a brand that is going to be memorable.
Yes, colour does work like magic and now that you know how it works, put it to use! See the magic unfold!