How-to: Create the perfect website colour scheme

A study by Kissmetrics revealed that colour increases brand recognition by a massive 80%. The use of colour truly affects the first impression visitors have of your website and company. But how do you build a website colour scheme starting from a completely blank canvas? In this post, we show you how to create a simple colour theme with impact from scratch.

Why is colour important?

Colour used well can make a huge impact on user behaviour and conversions. Look at the website below for apartment rental company Rentberry. Notice how colour is applied to make the rental listing button stand out on the page and really drive users to that specific action.

We also know that colours can evoke emotions. Big brands such as Facebook, LinkedIn and Twitter all employ blue for their logo. Blue is often associated with dependability and trustworthiness, which is exactly the feeling these brands want to communicate to their users. Apple meanwhile use white, which conveys a feeling of simplicity and modernity. It’s vital that your colour choices reflect your brand personality and ethos. Think about your own messaging and how your colour scheme will represent your brand.

Creating a colour scheme

We’ve created a palette of five colours in this example. Broken down, we’ve selected a base colour, accent colour, plus three neutrals – a white, dark grey, and light grey. You can see our final palette below. A great tool for creating colour palettes is Coolors, as they provide the hex codes of each colour you select. Hex codes are the six character codes to specify colours in HTML and CSS. You’ll need these when it comes to applying the colours to your website.

The base is the primary colour for your website, so you’ll probably assign this to the main site elements (think header background, imagery and icons). The colour of your logo or a colour used in your current marketing materials is the obvious choice here- but you could always choose something new. As we touched on above, think about your target audience, your message, and the connection between colour and emotion.

Next, select an accent colour. Accent colours can be used to focus attention on important areas of your page, for example links and buttons. These should ideally be the most contrasting, stand-out colours in your palette. 

Finally, choose some neutrals including a white, light grey, and dark grey or black to balance your palette. These will be used for backgrounds and text. Assign the dark grey or black to title text and body text, and the white and light grey for backgrounds. Make sure your selected title and body text colours are legible on your chosen background colours.

So, you’ve created a beautiful colour scheme and understand how to best assign each hue to your website. Next, find out how to apply your theme to your Moonfruit responsive website in a matter of minutes: How-to: Apply colour to your website.

Boost your online presence with a Moonfruit responsive website – get started now with our 14-day free trial.