This article explains the use of colour, what colours signify, and how to find colours that fit with each other in your web pages.
In the web design world, one of the main mistakes made by designers is the incorrect usage of colours. Bad colour schemes can make your site look unfriendly, amateurish, and inaccessible.
This article will identify common mistakes with selecting colours, how to create good colour schemes, and accessibility issues that arise from colours.
Colour associations and moods
Colours can be perceived by people as different moods and emotions. When designing a site you should consider what mood you aim to set with your design, with careful use of colour.
These moods can vary from person to person, depending on their life experiences; however in general, these are the following meanings:
Blue - Blue is one of the most used colours on the web, and in most things. This is because it is a safe colour because the moods it conveys are mostly good.
Blue can represent peace, tranquillity, reliability, trust, honesty, cleanliness, clarity. However it can also represent depression. (e.g. feeling blue).
Green - Green has always been associated with nature. It also can represent environment, health, luck, youth. However, in some places it can represent distrust and danger.
Yellow - Yellow is a very happy colour. Yellow can represent joy, happiness, the sun, friendship. Bad moods can be things such as cowardice, and illness. Me personally, i hate pale yellow, it reminds me of vomit and scum, i have no idea why, but it must be a childhood experience i had.
Orange - My favourite colour! Orange can convey warmth and energy. Orange is a good attention grabber when used correctly.
Red - Danger! Caution, blood. Good things include love and warmth. Red is a good attention grabber, maybe because people notice danger and notice the red.
Purple - Purple is a mysterious, creative colour, It can also be associated with royalty, and exotic items. Look at dairy milk chocolate bars, the purple packaging make it look more luxurious.
Pink - A very feminine colour, also associated with babies, and childhood.
Black - Black can convey power, darkness, and evil. However it is a useful colour (like grey) for making things stand out from a page. Black along with red is an example of this. A black page with a red item will make the red stand out more.
White - White represents purity, and goodness. It can also represent coldness and winter.
You now know what colours signify, but how do you know which go togther when making more complicated schemes?
7 - Arin says:
Re-reading my comment, it sounded harsher than I meant. Really, I would highly recommend this as a must-read for anyone new to design (especially web design)! There are a lot of good tips in there.
Comment made on February 9, 2007 at 4:42 pm
8 - Anthony says:
It does make you think about what colors people react to. I know my blog has had mixed reaction to whether or not i have made the pink work.
Comment made on February 9, 2007 at 4:43 pm
9 - Christian James says:
Wonderful article! Simple yet it makes some great points. I do a lot of concert photography and I just wish I could make every lighting director read this article. Sometimes you just need to go back to the basics.
-Chris
Comment made on February 9, 2007 at 4:45 pm
10 - Pat says:
I recommend you cautiously combine Black and red, especially black backgrounds with red letters, if you are targeting a male audience. Many males are colorblind to red and black. the screen will look all black to them with some distortions (your red content).
Comment made on February 9, 2007 at 4:46 pm
11 - smartypants says:
Pat, I’m pretty sure that’s not the way most male’s colorblindness manifests itself… it’s usually an inability to differentiate between red and green… not red and black.
Though perhaps there’s a less common form of color blindness that makes it hard to tell the difference between black and red.
Comment made on February 9, 2007 at 4:49 pm
12 - Mark says:
Good stuff! I’m going for a red color scheme for my next site cause it needs to be attention grabbing
Comment made on February 9, 2007 at 4:50 pm
13 - Tudor says:
I guess a more fundamental question is why do these colours principles seem to work..
There are both psychological and physiological reasons at work here and I want to know more!
Any links?
Comment made on February 9, 2007 at 4:51 pm
14 - Warren says:
smartypants,
Pat is correct people who are red-green colorblind see red as very very dark brown that looks almost black.
Comment made on February 9, 2007 at 4:51 pm
15 - John says:
As someone who is actually colour blind, I can quite definitely say I don’t see certain shades of red as almost-black. Everyone who’s colour blind has slight differences. With me the list of colours I don’t get confused is shorter than list of colours I do smile You need to remember there are different kinds of colur blindness too - here’s a good site that I like to use to explain to people what I actually see : http://www.etre.com/tools/colourblindsimulator/
Comment made on February 9, 2007 at 4:52 pm
16 - Mike J says:
This color schemer has a color blind function, its interactive, try it. http://wellstyled.com/tools/colorscheme2/index-en.html
Comment made on February 9, 2007 at 4:55 pm