Colour In Web Design

When we open a page, colour is the first thing that we see. Colour can evoke a memory, create a mood, grab attention, uplift, scare, excite or soothe us.

So, it is vital when we are designing a website to carefully consider the colour scheme to reflect exactly what you want to portray. In this post as an experienced colour consultant I would like to  share with you how I go about beginning a new colour scheme for a website or blog. 

HTML Colour Codes

Colour design is a creative process so it is always best to have an open mind and a blank page of white. Begin by looking at websites and designs or logo's and brand marketing on sites such Vanderley or Design Inspiration.  This will create ideas and highlight what looks good, what attracts attention, what stands out and also enable you to quickly see what you do and don’t like.

Search out websites that showcase the best designs from the previous year or current trends in design. Think about what works in your view?   Once you have an idea of what you like its time to consider exactly what your target market is going to be.

Who is going to read your site? Are they conservative, radical, traditional, cutting edge or fun?

Also think about the style you are after, is it futuristic, eclectic, technical, eco-friendly, funky or professional? Is it a personal blog or an e-commerce site? Are you after a funky, unique, fresh, vibrant,  dominant,  sleek or soft muted design?  There is a lot to consider but once accomplished it is time to have fun with colour, and the colour wheel.

The Colour Wheel 

The secret in designing any colour scheme is to choose an image from your site and pick out a colour from the image. Then use the colour wheel to choose 3-4 colours based on your first choice. By using colour schemes directly from the colour wheel you can be certain the colour palette will work. Consider; 

Monochromatic - all the same colour in different tones, 
Complementary - opposite each other on the colour wheel.

Analogous  -  next to each other on the colour wheel

Triadic -  evenly spaced around the colour wheel.

Keep it simple and apply a golden design rule of 60 - 30 - 10

Main colour  - 60%  

Contrast colour - 30%

Accent colours - 10%.

There are many web based colour tools that you can use to experiment and trial your colour choices such as Colour Scheme Designer & Colour Schemer Studio 2 Join me in my next post on 'Engaging readership through sound colour choices.'  Diyu 

Attribution Non-Commercial No Derivatives

(With the exception of the Avatar and colour code Images)

© The Avatar image is copyright to Ramneek Narang All Rights Reserved 2013
Many thanks to Ramneek Narang, HTML colour codes and Web Designer Depot for the images on this post.