Colour Schemes in Web Design

3 websites with good colour schemes:

www.cakesweetcake.co.uk - This website uses shades of peach and teal as the main colours. These are complimentary colours and work together very well. There are also some shades of brown and beige, which are warm neutral colours, that bring a feeling of wholesomeness to the design. All of the colours together could be described as an earthy palette, which is good for a bakery, because you want the user to think of natural ingredients and freshly baked goods.

qlpros.com - This website uses four main colours, charcoal grey, light grey, white and yellow. These colours look great together and the site gives great visual impact. The white text on the dark grey background, and the dark grey text on the yellow background are both high contrast, making the site very readable. Shades of light yellow are calming and cheerful. The charcoal grey contrasts give the website a level of professionalism.

stuntbox.com  - This is good because it is black and white and very clean. The link hover state brings a pop of red which works well in keeping the site visually interesting.

 

3 websites with poor colour schemes:

www.abercrombie.co.uk - Abercrombie and Fitch made their website just like their stores ie. really hard to see. They used a colour scheme of grey on grey on grey. There are many parts of the website where there is not nearly enough contrast between the text an background, especially in the footer. They also used grey as a background colour for the products which I think was a big mistake as the products should pop visually.

Multiple shades of grey apparently give a sophisticated, modern feel to a website, but personally I do not think it’s worth sacrificing usability.

www.videosoniclab.com - This website has too many colours, it is very loud despite having a black background, the colours are too bright, it hurts the eyes. I don’t know where to look.

www.rzent.co.nr – This website is just plain ugly, with too many colours trying to grab the focus of the user. The yellow text on red is a bit over the top, and the blue text on the red background is completely unreadable.

References:

http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/

The Principles of Beautiful Web Design – Jason Beird