How To Choose The Perfect Colour Palette For Your Website

How To Choose The Perfect Colour Palette For Your Website

You might be thinking ‘what colours to use in my design’, well, colour is a powerful tool in web design, influencing the emotions – and therefore purchasing decisions – of users. 

In fact, 90% of our assessment of a product is made on colour alone

And, let’s face it, colour is a fun part of web design. 

However, pairing colours can quickly turn into a nightmare when selecting the main hues for your brand and website. 

Have you ever seen two colours that just don’t quite go well together? There’s a bit of science behind it and it’s largely to do with the colour wheel.

Colour Wheel
Colour Wheel by Canva


Two of the simplest ways to colour pair is by picking colours opposite each other on the wheel (complementary) or, next to each other (analogous)

Here’s an example of a complementary colour palette. 

Panic Animation Complementary Colours
Source: Panic

And, here’s an example of an analogous colour scheme.  


Dropbox analogous colour palette
Source: Dropbox

Of course, there are also plenty of other combinations of hues, shades, tints and tones.

Today, we’ve picked out a few of the most popular colour palettes for websites.

Bright pastels.

Pastel colours are perfect for a playful, vibrant brand. You can stick to a couple for a laid back, subtle look, or mix and match contrasting hues to add a distinct energy to your website. 

Take a look at this example below. 

Bright pastels

Muted pastels.

In contrast, muted pastels are ideal for a natural, earthy feel to your website. It’s a popular choice for businesses who pride themselves on being homemade, authentic or eco-friendly. 

There’s something about muted shades that makes us feel cosy and calm. 

Muted pastels in web design

Gradient colours.

A gradient is when two or more colours (usually analogous) are merged together. Gradients help bring flat, 2D design to life, by lifting the web page and making it seem more three dimensional and dynamic. 

If you’ve been paying attention, you’ll have noticed our website and branding uses gradients in several different colours. 

Colours and web designHere’s another example of a gradient in action. This method of blending colours is excellent for overlays on images, so bear this in mind if you wish to add visuals to your web design.

Gradient colours in web design

One bold accent colour.

Adding a pop of colour to an otherwise toned-down palette is a brilliant way of portraying a modern, clean feel in your web design. We particularly like it for companies who wish to stand out in their industries, but still want to retain their professional, corporate image. 

Create impact with a punchy red like this example below. 

Colours primary accent in web design

Primary colour palette.

Get back to basics with a loud primary colour scheme. Bold primary colours are a fantastic choice if you want to be, well, bold. 

Website Primary colour palettes

Monochromatic colour palette.

Monochrome doesn’t have to be black and white, you know. A monochromatic colour palette is where you only use shades, tones and tints of one base colour.

Again, going mono a simple way to ensure your colours match harmoniously, but the scheme can be tricky to stick to, especially when you factor in any images and photos you may want on the website. 

If you did want to get around this, a coloured overlay on top of your images would help to bring everything together.

Monochrome website colour schemes

Wondering ‘what colours to use in my design’ or  want to find the perfect colour palette for your website or brand? Give us a call today and one of our designers will be happy to help