Website Colour Schemes

So you’re starting a new website, a new company, or a new brand. You need website colour schemes that work for the web, are professional and look great. Here is Kestrel Design’s easy step-by-step tutorial on how to make a colour scheme.

The basics

This first step for creating website colour schemes is easy. Choose white for your background and combinations of grey and black for your text. There are lots of reasons why you should choose this monochromatic scheme for your main colours. We like this article’s explanation of some of those reasons: Psychology of Black and White and What They Mean for Your Business. Black or grey text on white is easy to read, traditional, and professional looking.

Black
White
Grey #7A7A7A

Add your brand colour

Next, add your main brand colour(s). Kestrel Design suggests adding at least two – choose a lighter or darker version of your main brand colour if necessary. In the colour scheme below you can see we have added two shades of teal-blue.

If you don’t yet have a brand colour then why not find a colour using this online colour picker tool. The hex code is the code starting with an ‘#’ sign.

Black
White
Grey #7A7A7A
Teal 2 #84B8B4 (Main brand colour)
Teal 1 #B8E0DE (Main brand colour, lightened)

Add an accent colour or two

Finally, take the complimentary colour from your brand colour. To find the complimentary colour, pick the colour which is opposite to your brand colour from the colour wheel. So the opposite of a blue colour will be orange, the opposite of a red will be green etc. Feel free to move left or right a little to find a colour that feels good to you.

Color Wheel - how to make website colour schemes

In our scheme, that accent colour is orange, and because our teal is quite a muted blue, we have selected a brighter orange to create a highlight. This accent will only be used in very small amounts.

For a second accent, we have chosen a colour that is near to our accent colour on the colour wheel – in this instance a yellow. Again, this colour will only be used in tiny amounts so feel free to make it a bright colour.

Black
White
Grey #7A7A7A
Teal 2 #84B8B4 (Main brand colour)
Teal 1 #B8E0DE (Main brand colour, lightened)
Orange #FA8925 (Opposite colour)
Yellow #F2DEA0 (Opposite colour’s neighbour)

Using your Scheme

Set your background to white, then make your text grey and black. Try grey for paragraphs and black for headings. Make links, highlight backgrounds and banners your main scheme colours. Finally, add small pops of your accent colours – try using them highlighted text, bold text and call to action buttons.

Having a colour scheme designed for you

Kestrel Design will design a colour scheme as part of your branding, but we can also design a colour scheme for you from scratch or based on your current company logo or branding. Please get in touch with us using the form on the homepage, via Facebook or by emailing kim@kestreldesign.co.uk.

Website Colour Schemes – A Tutorial was last modified: March 7th, 2017 by Kim Debling