How to Choose the Perfect Colour Palette for Your Website

By Christina

May 18, 2022

Many customers already have their branding colours sorted out before they come to us for a website design.  But it is something we can advise on.

Here is how you can start the process to find the perfect colours for your brand.

How to choose the perfect colour palette for your website

There are many steps to creating your own business, branding being one of the most important parts.  It's the way others perceive who you are.  First impressions really matter on the internet so getting your colour scheme right is very important.

One of the first steps you can take with your branding is choosing an approachable and relatable colour palette, which you can apply across your marketing materials and your website.

Colours evoke emotions

The colour you love, may not be the right colour for your business.  You have to forget about what you like and do what's best for the success of your company.

Below you will see colours and the emotions they evoke.  Check your colour palette expresses the emotions you want attached to your brand.


Colour Feelings


Experiment with colour palette tools

There are a fair few online colour palette tools available.  You can upload a photo or picture and the tool will list all the colours available.

These tools also allow you to play with the colours and adjust them so you can see what they look like in different shades, and how the colours work together.

Finding Inspiration

Look at other companies websites (within and outside your competition) to see what looks good.  Is there a theme for your industry, as an example Doctors and Dentists tend to have a lot of white with some blue or green in varies shades.

Look at book covers, magazines or even get inspiration from nature.

Choosing your primary colours

You should now be inspired enough to begin choosing your primary colours.  These are the colours you want your audience to recognise as your brand.  You will have these colours on your website, business cards, across advertising and other marketing materials.

You'll need two dominant colours, and two accent colours.

The dominant colours should either complement or contrast well together. 

Accent colours play an important role, especially on a website.  They are used to draw your viewers eyes towards something you want to highlight.

Accent colours will be bolder than your primary colours, so make sure you have a high contrast between the two.  Accent colours are applied to navigation menus, call to actions and other crucial items that you want to stand out.

The 60-30-10 rule

It's a good idea to apply your colour scheme in ratios of 60-30-10 for the page to look balanced.  Your primary colour should make up 60% of your content.  Your secondary colour will be used on 30% and your accent colour will make up the final 10%.

When it comes to a website you have 60% negative space, 30% content, and 10% 'call to action' elements.

Now you've learned some handy tips for picking your colour palette you should be ready to present them to your website designer/developer or marketing consultant.

Read our latest website design tips and tricks to learn how to improve your website's look and ability to turn visitors into paying customers.

Which One is Right for You: Website Design Tool vs Website Designer?
The Ultimate Guide to Choosing the Best Fonts for Your Website
14 Tips for Making a Professional Website in 2022
9 Steps to Creating a Business Website
What Are the Benefits of Having a Business Website?
The Complete Guide To A Landing Page
The 7 Principles Of Design Applied To Websites
How To Create A Professional Service Based Website For Your Business
6 Best Practices For Website Form Layouts
Is Colour Important In Website Design
Step By Step Guide: How To Make A Professional Website In 2020
4 Key Satisfaction Factors Your Website Should Have
Should You Consider The Huge Range Of New Top Level Domains
42 Resources Every Web Designer Needs
Why You Need A Dynamic WebsiteHow To Create A Free Business Website


Website Design and Development

Comments have been switched off for this post!

Bookmark this article

Bookmark this article

Refer back to it when you need to