The use of colour
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?
Colour combinations
To find a good combination of colours you can look at a colour wheel.
The colour wheels below show some different combinations that are available, and are labeled with arrows.
Remember these combinations can also depend on aspects such as brightness and contrast so experiment!
A colour wheel shows the colours in the colour spectrum, and by looking at it you can see what colours will work with others.
Complementary
Split-complementary
Triad
Tetrad
Analogous
Monochromatic – Different shades
Shades of colours
Different shades of colours work well in different situations. For example, using very saturated colours all the time is not always good, by using shades you can make certain things stand out more or less than others. For example, it would be good to have elements in the main content stand out more than in the sidebar, because that is where you want to draw the users eyes to look.
Common sense
When making sites you have to use your common sense when picking colours. For example, if you were making a business site you wouldn’t use bright pink, because this would look childish and unprofessional.
Another example, if you were making a laser eye clinic site, you wouldn’t use red as this would imply danger and blood. Scary.
Web safe/smart
You may or may not be aware that Mac’s display colours differently to PC’s, also browsers render colours differently. Here is a bit of history.
In 1994, Netscape (big players in the browser market at the time) selected a web safe palette that would work on both PC’s and Mac’s by using the current 256 colours (that’s all the pc’s could display at the time, 8bits) and removing the 40 colours that were incompatible. Thus leaving 216 web safe colours.
Using these web safe colours meant that there was greater chance of your site looking the same on different hardware.
These days computers support millions of colours (16bit or 32bit) meaning the compatible colours between systems have increased. The new palette, based on 16bit systems, is the web smart palette which supports 4096 web smart colours. I personally try to use web smart colours when ever possible, to ensure it will look similar to what on want on different systems.
Just note, that the colours will never be the same on different machines, because so many things affect them, e.g. OS, Monitor settings, monitor type, graphics card etc.
Accessibility issues
When changing colours you must ensure the contrast between the colour and the text on it is enough for people with poor eyesight to see, or at least offer a high contrast version. I’ve seen sites with grey text on slightly greyer background making it very hard to read, this is bad accessibility wise.
Also note some colours can be annoying together, for example some people have difficulty looking at green and red together, green text on red would be a very bad idea.
And remember the colour blind people on the web, ensure they have options to see a version they can actually read.
My tips
- Don’t use pure black/pure white all the time. Try shades, e.g. #111111 hex is nearly black but not quite, and looks nicer in most situations.
- Don’t use more than 3/4 colours in your colour scheme, keep it simple for more impact.
- If you have an image you want to base you page on, pick colours directly from the image.
Recommended tools
Found this post useful? Why not buy me a coffee!
Anthony says:
A great article and very refreshing to strip back to the fundamentals of design. One thing I remember from a HCI lecture is that if u use two different colors from opposite ends of the color spectrum then the contrast is very high. Ideal for parts of a page you want to stand out. I guess this fits under the “Triad” chart. Pale yellow also reminds me of great nights out turned ugly!
Comment made on February 9, 2007 at 4:36 pm
Mike J says:
glad you liked it.
I find oposites works best, but its sometimes nice to add some variation.
I so hate pale yellow, reminds me of this really scummy girl from primary school who wore a yellow skirt. Ugh.
Comment made on February 9, 2007 at 4:37 pm
James says:
Neat article; I will definitely rethink the color scheme on my web site.
Color associations are cultural to some extent. For example, in Japan, white is associated with death, not purity; in English, risque items are called “blue”, but in Spanish you have “chistes verdes” (literally green jokes).
Comment made on February 9, 2007 at 4:38 pm
WW says:
Very useful piece of information here.
I always wondered what designers are talking about when they mention tetrad and analogous…
Now I know
Comment made on February 9, 2007 at 4:39 pm
Anthony H says:
Great information. My girlfriend is in to art, but I never knew how she could tell when colors go together.
Comment made on February 9, 2007 at 4:40 pm
Arin says:
This is one more good guide to the very basics of color theory. Nice illustrations.
But someday I’d love to see someone take it a step further with real-world examples. Honestly, you’d be hard-pressed to pick out two colors from the color wheel above that DON’T look ok together. What if you have, say, a bluish-green? Or brown? What tool do you then use to calculate the split-complimentary colors? And once you’ve got the hues using, say, a split-complimentary scheme, is there some method to adjusting saturation and lightness beyond “eyeballing it”? It often doesn’t work to adjust all equally.
P.S. Even more than inappropriate colors, spelling and grammatical errors can also make a site look “amaturish”.
Comment made on February 9, 2007 at 4:42 pm
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
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
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
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
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
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
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
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
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
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