Contact us on 07805 772748 or suehodgetts@essential-websites.com
Tel: 07805 772748   Email: suehodgetts@essential-websites.com

How do I choose my website colours?

How do I choose my website colours?
4th July 2016 The Website Woman
How to choose website colours

When looking at a website, you get an instant feel for the style of the company by the colours and images used. If you are starting out with your first website though, how do you know which colours are going to work for you? If you have a logo for your company already, then that has to be taken into consideration, but if not there are lots of ways to find inspiration.

1.  Look at existing websites in your line of business

Here are some typical examples

http://www.w3schools.com/colors/colors_brands.asp – colours used in some familiar websites

http://www.johnlewis.com – shopping website – white, mainly photos

https://www.ownersdirect.co.uk – holiday website – orange (bright, sunny) plus colourful photos

http://www.mumsnet.com – children & babies website – primary colours

http://www.petsathome.com – pets website – green (outdoors)

http://www.lawsociety.org.uk – official website – mainly white with understated colour

http://www.nhs.uk/pages/home.aspx – health website – blue and white (clean)

Look at websites in the same field as yours and see what appeals to you about their colour combinations. What works and what doesn’t? How do they fit in with your current logo if you have one?

 


 

2. Find the colour codes of an image or a web page

Hex Colour Numbers

The colours that you choose must be in the format of hex numbers – these are distinct 6 figure numbers allocated to each colour, based on their individual combination of red, green and blue. They are preceded by a hash symbol and you will need to use them in the Dashboard of your website.

Examples:
green = #009900
blue = #0000ff
lilac = #cc99ff

hex colours

 

WordPress Dashboard

In the WordPress Dashboard, go to Appearances > Customise and you will find your theme gives you options here to add in your hex values wherever there is the need for colour.

hex-values-for-text

 


 

3. How can I find out the hex value of a colour?

Use the ‘eye dropper’ tool in Photoshop (or equivalent program)

Using an image processing program is the most convenient way to find image colours, by opening the image that you like and using the eye dropper tool to find out what the hex number of any colour is. You can always save the file with the colours as colour blocks for future reference.

Use an online colour picker website to find the colours in an image

If you don’t have Photoshop or an equivalent image processing program, then there are plenty of websites that tell you the hex colours of an image or a web page.

I like colourcodepicker.com because it actually picks out the dominant colours of an image for you – you can then see what sort of colour palette they make together.

If you want to use a colour picker tool to find exact colours within an image, html-color-does.info works better than most.

How can I find the colours of a web page?

You can do the same thing as above by creating a screen shot of a web page and uploading it as an image.

Or, if you use Chrome, you can download this eye dropper extension and do your own colour picking from any webpage that you visit. It will give you an eye dropper tool in your toolbar.


 

4. How do I know if the colours I’ve chosen for my website will look good?

 

Colour Theory & Colour Wheels

htmlcolorcodes.com is the best website I’ve found for a quick lesson in colour theory. This basically gives you the combinations of what colours work well together and why. Scroll down the page to find out all you need to know about harmonious colours, colour triads, analogous colours etc. Once you have chosen the key colours for your site, go back to this page to check that they are going to work together well.

 

Colour Palette Websites

There are lots of websites out there that will give you colour combinations, or palettes, of colours that work well together.

canva.com
color.adobe.com
coolors.co
w3schools.com

Adobe Colors CC

 


 

So there you have it, many ways to get the creative ideas flowing. And always remember – if your colours don’t work, or you get fed up with them, you only have to change a few numbers to change the whole look of your site!

 

 

The Website Woman
Hi, I'm Sue and I've been running Essential Websites since 2011. Initially working in Wells, Somerset, I now live in Lyme Regis in Dorset and work from home where I have a (little) view of the sea.