How To Chose A colour scheme for your website

website colour scheme

Why Choosing The Right Colours For Your Website Is So Important

Colour is a key component in a brands design, and therefore is a crucial component in the website design process. 

Colour can evoke emotions, and can affect the overall look and feel of any website. 

Get the colours wrong and your website may not work the way you want! Get it right and it can make a great first impression and increase conversions!

How To create a website colour Palette?

This will be the collection of colours used for your website.  

One of the most important thing to remember when using colours is consistency & simplicity is key!  Consistency will help with your brand identity, Simplicity will ensure good user experience!

I have listed 6 things to consider when choosing your colour scheme below.

1. Colour psychology

colour psychology

Colour can evoke emotions and your mood,  whilst perceptions are subjective, some colours do have similar effects, Check out colour chart above ( Londonimageinstitute) 

So it does make sense to choose your colour scheme on the emotional experience you want to deliver to your target market! Therefore it is very important you understand your ideal client, personal preference on colour is not advised!  Want some help, try out this colour quiz 

2. Your Branding

If you have branding and a logo set up by a professional then this is a great colour scheme to start with for your website. 

This is always a starting point of mine in creating any project, it ensures your site is on brand and recognisable! 

Of course, sometimes there may be reasons that certain colours can’t be used due to psychology or accessibility.

3. Accessibility

Accessibility is very important to consider for choosing colours, By using colours that have high contrast within your design. Colours with low value contrast may impact people who have colour blindness 

To meet W3C’s minimum AA rating, your background-to-text contrast ratio should be at least 4.5:1. There are many places to check contrast ratio online.

You should also consider not using colour alone in some of the design, eg shapes and bolding might work in some areas .

4. Colour combinations

When choosing a colour scheme you are wanting a good combination of colours that work with each other! Understanding what colours go together is very important for your website.  

This is where colour theory can help! 

According to Adobe the 3 most popular types of colour schemes to create a colour wheel are:

  • Monochromatic. Monochromatic schemes use a single colour, but with variations of tints, shades, and tones of the colour. This scheme is very easy on the eyes; since the colours naturally go well together, they create a soothing effect.
  • Analogous. Analogous colour schemes use a few related colours—one colour is the dominant colour, while others support it. The supportive colours enrich the scheme and make it more visually appealing.
  • Complementary. In their most basic form, complementary schemes consist of only two contrasting colours (for example, a dominant green colour and an accent red colour). This scheme works well if you want to attract attention.
There are other type of schemes, and if you can use Adobe colour palette to match colours, it even has tool to extract from images/logos etc. 

 

5. Contrast

Using colours with good contrast can help set certain elements on your website stand out! for example if you use a lot of one colour on your website, and you use that same colour for your buttons they aren’t going to notice this button right away.

Contrast creates impact and helps important elements stand out! This can help guide your site visitors where you want them to go, but also increases the user experience!

 

WEBSITE COLOUR CONTRAST

6. Visual stimulation

Simplicity and including Neutral colours is also important for any colour scheme to avoid visual stimulation. 

A really busy colour scheme can often confuse the eye, don’t go overboard with colour. you want your site to look unified, you want it to look clean, and ensure your site visitor can find what they need quickly.

Summary

  • Use colours true to your brand, that have good contrast and evoke emotion you want from your potential site visitors.
  • Don’t have branding? you should start with one primary or main colour chosen by colour psychology. then using the likes of Adobe colour wheel to generate the additional colours. 
  • Use maximum of 3 colours if possible to keep clean simple and not go colour overload.
  • Ensure good contrast between 2 colours used together in the design
  • Another tip within your website you should set global colours, to save on code and improve websites performance. In WordPress this can be set within your theme generally, eg setting global colour for background, text, buttons, headings and links.
  • Stuck for how to mix up the colours? you could follow the 60-30-10 rule that interior designers typically use? this can also be used on your website using 60% main, 30% secondary colour and 10% accent.
  • You can also get inspiration from design websites, canva colour palettes or This blog post
I hope you enjoyed reading this post, I hope it helps you decide on ideal colours for your site, I am a web designer based in Belfast, I work with business owners throughout UK & Ireland. If you need help in designing the perfect site please do not hesitate to get in touch. 
 

Want My Top Website Tips Straight
to Your Inbox?

Share this post with your friends