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.
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