5 rules for website colour schemes

5 rules for website colour schemes

First impressions are everything. Especially when it comes to website design. And what’s the most crucial part of your website’s design? The colours, of course!

Whether you realise it or not, colour choice subconsciously influences the buying decisions of the people on your site.

There’s a lot of colours out there. So how do you choose the right ones? What are the rules? Fear not – we’ve broken down 5 rules for website colour schemes.

Why is my website’s colour scheme so important?

Choosing the right colour scheme makes your website real pretty. But it also:

  • Affects how users process information
  • Evokes your visitors’ emotions
  • Influences their moods

All of which will help shape their perception of your brand.

How does it work?

So glad you asked! It’s important to know that colours will change the way people think of your brand, and will create lasting emotions that will drive their purchasing decisions. In fact, there is a whole field of science dedicated to studying this – colour psychology.

Here are the six main colours that create an emotional response:


Red symbolises importance, passion, and aggression


A bright colour associated with energy, playfulness, and low prices


This colour is the sun, happiness, and fun. But it can also evoke anxiety


Lush green reminds us of nature, health, and prosperity


Calming blue inspires trust and safety


A royal colour, purple is linked to elegance, mystery, and creativity.

So now you know why, you can get started with the first rule of website colour schemes.

Rule #1: Choose your primary colour

It may seem like a hard choice, but the work may already be done for you.

Do you have a logo yet? If so, examine the main colour in your design. Congrats! You’ve just discovered the colour your brand will be associated with – your primary brand colour. Don’t have a logo? No stress! Buckle down and do some research. Use sites such as Dribble or Behance for inspiration.

Rule #2: Decide on how many colours (but you should choose 3)

Now that you have your primary colour, it’s time to decide how many other colours to add to the mix.

It’s tempting to make your website as bright as possible, but no one wants a site that looks like a unicorn threw up on it. A triadic colour scheme – three colours spaced out across the colour wheel – is often a good choice.And remember the old designers’ rule of 60-30-10. Don’t use all three colours evenly, but rather in percentages.

Rule #3: Use secondary colours – sometimes

You’ve got your primary colour, and your triadic colour scheme – what do you need a secondary colour for?

If your website is packed with content and landing pages, you will need a simple way to visually separate all that information. Use your secondary colour for headings, sidebars, captions, and buttons.

Don’t want to add another colour to your busy website? Then try a different shade of your main colours.

Rule #4: Add neutral colours like black, white and grey

You might think it’s fun to have yellow for your text. But trust us, it isn’t.

Neutral colours like black, white, and grey give your users a break from all the colour on your page. It also helps them to process information.

Use neutral colours for text, to create contrast for important elements, or as background colours.

Rule #5: Add your primary, secondary and neutral colours to your website

So where should all your new, sparkly colours go?

  • Primary colours are used for ‘hot spots’ – CTA buttons, headlines, benefits icons, download forms. Anything that is important and needs to grab the user’s attention
  • Secondary colours highlight less vital information – such as secondary buttons, subheadings, active menu items and backgrounds.

Neutral colours are for text and background. But use these colours to tone down particularly bright sections of your site.

Building a Website?

Try Gutenize, a simple WordPress 5 page builder. Gutenize was created to make the new WordPress 5 Editor (Gutenberg) awesome! Our Visual WordPress Builder was named Gutenize for this very reason.