How to use colour on your website to make an emotional connection with your audience

DIY Design Tips, DIY Website Tips

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?

How to use colour on your website to make an emotional connection with your audience - ready made websites

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!

Colour Wheel

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 psychology

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.

For example;


Red for example has the ability to evoke strong emotions and is often associated with passion or danger. Red is often used by retailers when they have a sale. The colour is used to grab a customer’s attention and cue them to take action by making a purchase.

Photo by Tamanna Rumee on Unsplash


Blue gives off a calm, professional vibe and is associated with peace and trust. For this reason, the police and a lot of financial instituions use blue in their brand.

Photo by Jan Antonin Kolar on Unsplash


Green has an instant connection to nature and is associated with health and wellbeing.

Photo by Dose Juice on Unsplash


Orange is a vibrant and energetic colour often associated with energy, excitement and enthusiasm. It brings a feeling of warmth, fun and positivity to a website and brand.

Photo by Dose Juice on Unsplash


Black is a powerful colour, can it give a feel of opulance, elegance and power. It is a very popular colour for fashion and car brands to look cutting edge and. high end.

Photo by Samuele Errico Piccarini on Unsplash


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!

example of high and low contrast in website 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 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 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 and I’d be happy to chat.

Sarah x

Looking to DIY your website?

Just getting started and new a website? Click below to check out my Ready Made Website shop!

empower - Wordpress and Divi ready Made Website for women

Share this post[Sassy_Social_Share]