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.
green = #009900
blue = #0000ff
lilac = #cc99ff
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.
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.
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!