Choosing your website colour scheme

One of my favourite parts of the design process is creating the website colour palette. But where do you start?

There are many factors to consider when choosing a color scheme for a website, including the purpose of the site, the target audience, and the overall design aesthetic you want to create. Obviously if you already have a logo, company literature or branding that is familiar to your clients, then this is a great starting point.

You can consider things like the mood certain colours invoke or the impression you’d like to make. For example lots of news sites use red as their main colour to relay a sense of authority or urgency. Whereas a website promoting holistic therapies may use a green palette to create a sense of serenity and calm.

I found a fun quiz here that decides what colour you should use based on what you do. What Color Should Your Branding Be? Give it a go!

Is less more?

If the content of your website speaks for itself it may work to keep the colour palette quite muted. Are you a photographer, a food or travel blogger, do you sell an attractive product? If so you may want your images to tell the story without the distraction of too much colour.

However if you’re selling some kind of service that can’t easily be summed up in an image then you’ll want your content to pop. That’s where a great colour scheme can help.

How to choose you website colour scheme

There are some great online tools that will assist you in creating the perfect colour scheme, here are details of two I find myself returning to again and again.

Adobe Color CC

Adobe has to be the undisputed king of digital design software. So its no surprise that their Adobe Color CC is a great tool to explore.

The wheel can be used to create infinite colour palettes. Try out standard colour theories including; complimentary, compound and triad to see what you come up with.

Browse the hundreds of schemes created by others for inspiration. Of course as its Adobe it integrates perfectly with Photoshop and Illustrator etc..

Adobe colour wheel


Coolor is a fantastic tool to use, you just tap the space bar and a new colour scheme appears. If you only like certain colours, click the lock to keep them, then carry on tapping for more options.

Create a free account and save as many palettes as you like. I have loads saved up with certain business types in mind, just in case. (you never know when a kids play scheme, craft brewer or retro furniture seller will approach you for a website!)

This is a fun tool to use and I highly recommend it.

How many colours do you need for a website?

That depends on the finished look you’re going for, but as a guide 5 including white is a good start.

This is how I used the colours from the above Coolor scheme.

  • White – kind of obvious I know! but as I want the the site to have a clean spacious feel, this will be the main background colour.
  • Charcoal – will be used for body typography, section dividers, maybe the footer. Personally I don’t like to use pure black as I find it too harsh.
  • Silver – as a background for some of the full width containers and areas of text.
  • Purple and Green – these will be the accents colours, used for header typography, graphics, column backgrounds, anywhere I want to inject colour.

You can see how I used these colours HERE

More resources

There are hundreds of great resources if you wanted to learn more about colour theory before you put your website colour scheme together. Here a few that I have found useful;

Basic Colour Theory

Colour Theory: Marketing, Branding, and the Psychology of Colour

Colour Theory for Designers

Contact Tanglefox