Article Keyword Videos to Watch
Click on the image to start the video.
Images - Links - Articles
What colour combination should I use in my website and how it will help your visitors on the long run
To some people, the more colourful it is the merrier it is. However, in a more general definition of a well balanced website appearance, it is not always the case. Words such as nice, wow or beautiful can be very subjective when it comes to evaluating the appearance of a particular website. For some, a colourful, flashy and bright website can be appealing while a darker theme could be better for others. So the main question now is - how do you go about choosing the right colours for your website?
The biggest and most widely practised concept of web colour implementation is the RYB approach. Being the main three colours, Red (R), Yellow (Y) and Blue (B), hence RYB, these 3 colours are known to have a great impact on how web visitors react and interpret messages on your webpages. You'll realize that most of the links on the web are underlined in a default blue. Error messages are usually in red. Yellow provides a nice light addition which compliments dark backgrounds really well. Orange (red + yellow) texts for example is extremely popular with black backgrounds. Try it and you know why. Take a look at www.microsoft.com for example. It has an excellent application of the primary and secondary colours together with the support of black and white. Apply this technique to your web designs and you'll improve the overall layout appearance significantly, if not greatly.
Different classification of websites require different approach. In most cases, you don't want to have a corporate website with a black or any extremely dark background. Apparently a white background seems to signify formality and a certain level of layout cleanliness. Not that a dark background can't have a clean cut look, it is just a typical mental translation of human observation that the colour white is in fact the cleaner one or simply easier on the eyes. Black background in the other hand, frequently portrays something which is fancy, elegant, playful yet has a reasonable level of seriousness in it.
A majority of designers or rather webpage creators believe the role of emphasization by utilizing light and dark colours. For example, a dark background combined with a light content area, simply attracts visitors to emphasize more in the middle, which happens to be the content area. It simple works too if you have a light coloured background with a dark content area. Alternatively you can add patterns or images into the background to spice things up. Just don't get these additional items to change the original apperance of your colours. The only issue with background with exceptionally large images is that it might kill some of the attention that you want your visitors to have on your main content.
There's nothing wrong with having a website with either a light or dark background, provided that it looks good, and of course if it is nicely presented together with a readable content with a friendly user interface. How do you know if it looks good is simply something that can't be measured by words, but rather by simply looking at it. If you look at it and by some spontaneous self agreement, that you think the colour fits perfectly with everything else, then you've hit the big jackpot. If it works otherwise, and you just feel like there's something wrong, play around with the colours till you have that comforting feeling that you've done a great job.
You might be thinking right now, which colour goes with which colour? You can either browse all over the net, looking at websites and noting down good combination of colours as you go or you can simply go to http://www.colormatch.dk. This website is extremely simple and easy to use, yet very powerful in terms of features. Simple and straightforward, you simply choose one dominant colour for your website and it'll simply chooses for you 6 other colours which compliments your main colour, together with the colour codes. Simple as 1-2-3. Note that colormatch.dk only works in Internet Explorer browsers. Try googling for colormatch and get enhanced and modified versions of the original.
Additionally, always try not to get your website too dark or too bright. You can use either one or both of them at the same time, but not too excessively, and try to find a supporting colour which compliments or enhances your initial choice. Try to balance up usage of colour tones all over your website too. If you think that the upper right of your website is too bright compared to the rest of your page, then either you reduce the brightness to equal the overall layout or simply brighten up the rest of the website, in a controlled manner of course. If you're adventurous, replicate that bright top right area to the bottom right area, making the right area somewhat a "bright coloured zone". The key point here is to maintain the balance of your colour usage. You don't want to drive a car with one of the door being slightly and yet obviously darker or lighter.
Lastly but not least, try to limit the number of colours to a reasonable amount. 2 to 4 are good amount of colours, not counting black and white. Black and white are just simply too important to not to be used. If you really need to use extra colours, try to use a darker or lighter version of your main colours. If your main colour is red, wine red, crimson or even maroon are good alternatives. Even certain tone of brown could actually look like red sometimes. Try to "recolour" your graphics or get some graphics which tally with your overall selection of colours.
Another good concept to follow is to apply a colour scheme according to your logo. If you logo has orange and black for example, try to enhance that colour by applying those same colours as well as the same colours with different tones throughout your whole website. Some designers even select their colours based on the pre selected images they have for their website. Certain images are just tend to be too exceptionally perfect to be omitted, thus explaining such occurrences.
I hope this guide will help you to get your colours right and have a better understanding of what to choose and what not to do in any of your future web design works. Nevertheless, try not to limit your creativity and imagination based solely on this article. Get your ideas flowing and experiment with your ideas constantly. Good luck!
About the Author: John Teh is a full time web designer and developer, who also operates a web template database website at http://www.dead0eye.com