Contents

When designing websites, people focus a lot on the layout, the content, and the menu structure. All important elements, but they don’t give the same attention to a website colour scheme. This leads to sites being so badly coloured that, as highly visual creatures, we are forced to click off.
If you’re struggling to keep people on your site, we’ve put together a quick guide to pulling off the perfect colour palette:

Keep it simple – Website colour scheme

Let’s not make choosing your site colour as difficult as picking what colour to paint the bedroom walls! Keep it simple. Yes, humans can distinguish 10 million colours but does that mean you need to start finding the most obscure shade of grey? NO! Instead, focus on the basic colour principles that 99% of people find visually appealing and you will notice the difference in bounce rate.

Contrast your colours

Having a one-colour site isn’t bad – as we will discuss later on – however, it can be good to run contrasting colours throughout your website. Why? Well, this opens you up to the opportunity of making parts of your website stand out.

If most people who travel through your page instantly look for the menu (Like people landing on ASOS) or maybe a specific piece of content (Which is easier to find on a highlighted contents list) then it would be best to introduce a colour contrast which instantly grabs the eyes attention and brings the users to the parts of the page they’re most likely looking for.

alex padurariu ZR48YvUpk04 unsplash scaled 1

Colour scheme examples

We know picking colours and colour schemes is something you don’t want to stress about and so we’ve made it simple! Below are 3 key colour schemes that you can easily adopt for your site:

Complementary

Complementary is based on the use of two colours which are directly opposite each other on the colour wheel and (you guessed it) complement each other.

Common uses:

  • Red and Green
  • Blue and Orange
  • Yellow and Purple

Tip: Ensure the shades are right so your 2 colours aren’t a mismatch.

Analogous

Don’t fancy opposites? Analogous colour schemes work by using two colours on the colour wheel that are linked. Whilst you can pick 2 colours here, it works best when you put 3 together as shown below:

Common uses:

  • Yellow, Green, Orange
  • Red, Violet, Blue
  • Yellow, Orange, Red

Tip: Analogous colour schemes create a softer contrast that is more calming to the eye.

Monochromatic

Remember when we said we’d discuss a one-colour site? Well, here we are with Monochromatic. This is where we use one colour with its varied shades across the site.

Common uses:

  • Blues
  • Blacks
  • Greys

Tip: There’s no contrast here but if you’re looking for a clean site, this could be for you!

Bonus Tip: Match Your Brand

Whilst you might now want to run off and pick random colours to create a cool analogous colour scheme, you need to remember that your website should speak your brand.

If your company is modern with an ‘edgy’ grey style then your website needs to reflect that. If you are a nature company, maybe a yellow, green, and orange analogous colour scheme would create the perfect calming natural blend for your brand.

The brand colours are a great starting point when deciding on colour schemes, so make sure you don’t ignore them!

Charlie
Author
Charlie
Get in touch
Let’s talk

hello@regencycreative.co.uk

 

Regency
207 Regent Street
London
W1B 3HH