I remember when I was building my first website, I couldn’t decide on colours and didn’t know how to combine them. I changed the colours on my first website 4 times and still didn’t like it. I decided to dive into the psychology of colours and understand how they have to be used properly. I checked a thousand of websites, I looked at the colours of action buttons, headings, text and used images. I observed my first impression and made notes what emotions I got when visiting a website and if it is easy to navigate thanks to this clear colour balance. Finally, I started to understand what the best colour selection is for each website, how to use it and where.
In this blog post I share my knowledge and experience in a form of a short and clear guide to make it as simple as possible when it comes to colour selection for your website.
Psychology of coulors
There is no one rule for the best colour combination that if I shared with you, your problem was solved. The psychology of colour can help you choose your main basic colour to become aware of the emotion that it’s associated with. I invite you to visit a website where they dive into this topic in detail, here.
This part is to make you aware what every colour means. If you selected your main basic colour (it means that you want to use blue but still don’t know what shade) based on the description included in the link above, we can take the next step.
The goal of using colours is to make it clear for our visitor’s eye where is more important content and where is a call-to-action button.
Can you imagine all websites using just black and white? It won’t be clear, catchy for our eye and wouldn’t create lots of engagement. Because of that we use colours on websites. The interesting part is when scrolling on a website, our brain learns what colour is the action button and what colour is the most important content. This is why, it’s so crucial when it comes to the colour and shape of your action button or headings, they all need to be the same!
Once you went through the colour psychology part and logical colour usage, don’t forget about the whole design. You have your main basic colour, you can find a colour combination now.
How to do it?
For example, by using this website. Select the colour that is your main basic colour (blue, green, red) and check all possible combinations. Don’t use all 4 or 5 suggested colours, concentrate on max 2 colours (main and secondary) and one colour for your font.
Chosen colours for your website
What is your main colour?
What is your secondary colour?
What is your font colour?
Of course, you can use more than 3 colours but at the beginner level it’s always better to keep it limited to have it simple and tidy.