Whether you are working with a professional website designer or DIY-ing your website, every aspect of your site from the copy to the layout and the graphics should be intentional and selected for a reason. This includes the colours you use in your website design which come down to so much more than just aesthetics.
Colour speaks volumes about a brand and can have a huge impact on your marketing. It can evoke emotion and will (hopefully!) attract consumers so it can be particularly important to consider when selecting your site imagery and designing your visual call-to-actions (e.g. buttons).
Using the right colours on your site can generate more traffic and ultimately lead to more sales.
So, how do you decide on the right colours to use?
To work this out, a basic understanding of colour theory is essential. It will help you to create more impactful designs and create a strategic colour scheme that aligns with your brand values and target market. My aim in today’s blog post is to help you understand the basics of colour theory and psychology.
I’m going to break down some of the key elements and how to use them in your site design. Let’s get to it!
The colour wheel
The colour wheel is a collection of 12 colours and a great tool for understanding the basics of colour theory. It breaks colours down into primary (three colours), secondary (three colours) and tertiary (six) colours and can help you to visualise relationships between them (e.g. complimentary ones) in a simplified and illustrative way. Having a basic understanding of the colour wheel and how colours relate to one another can help you to select colours that complement each other and help give your website the vibe you are looking for
Colour can have an extremely powerful impact on our emotions, behaviour and overall well-being. If we dig a little deeper into its psychological effects, colour can be used to influence visitor emotions and draw your target customers in. It can also have fascinating cultural significances – the feelings evoked by certain colours are not necessarily universal.
Colour psychology can be a really useful resource when considering which colours to use on your website.
Whether you’re a web designer or owner of a small business, if you are trying to connect to your target consumer, selecting colours that appeal to and resonate with them is key.
The colour rule
As a general design rule you should choose no more than three colours to use on your website. A main (or primary) colour, a secondary one and an accent colour. Use the 60/30/10 rule to apply these colours in your website design.
According to this rule, 60% of the colour used should be the main colour, 30% as the secondary colour, and 10% as the accent colour. This will ensure the colours you choose work in harmony and means that your design will focus on the primary colour and use the secondary and accent colours to divide elements, create contrast, and highlight important features.
When you nail this rule you will effectively attract and be lead people to your CTAs (Calls-To-Action), simply through the way you’ve chosen to lay out your colours!
Another important aspect of colour in your design to consider is contrast. Contrast has a huge impact on the accessibility of your website.
Generally, combining colours with high contrast (black and white for example) are advised in website design because they have greater legibility. Contrast is great for conveying a mood and heightening emotion in your visitors.
Balancing high and low contrast in web design can be tricky to nail (this is a great site for checking contrast https://colourcontrast.cc/)but in order to create a site that’s inclusive and can be used by as many of your customers as possible, it’s definitely worth taking the time to get it right.
Useful colour picking resources
If you’re feeling a little stuck when it comes to choosing your site colours then https://coolors.co/ is a really useful website that offers a suite of free online tools to help you with your colour selection. As well as allowing you to explore popular palettes and generate your own it can also extract palettes from images, check contrast levels and even change image colours for you.
As always, if you want to chat colours or aren’t sure you’ve chosen the right colours for your website’s call to actions etc.. drop me an email to email@example.com and I’d be happy to chat.