Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

What do you think is the maximum number of color-codes you should use in a web project? Suppose you use the optimal combination of colors in order to get the best usability.

For better understanding, let's say we have a specified number of "categories", each should get a site-wide color. In a hypothetical perfect world, with perfect icons & labels.

share|improve this question
1  
    
You might be interested by stumbleupon.com approach. They uses several colors for the main categories and then a slightly different ones for sub-categories. –  Gabin Apr 24 at 16:50

3 Answers 3

up vote 5 down vote accepted

You should try to avoid relying on colour alone to convey information. Colour perception is not uniform across all users. I would suggest using distinctly recognisable icons with optional colours (so when the colour changes the icon also changes)

Having said that, sometime you may have a graph or chart that uses colour combined with a legend to display data. Again, try not to rely on the colour alone (add some labels or textures or something), but I would say that once you are using more than 5 colours it is too much (cognitive overload will mean the user will keep having to refer back to the legend).

EDIT: Up to 5 is a manageable number for humans, you can count it on one hand.

share|improve this answer
1  
I agree, if you have more than 5 colors it would be hard to remember what each color means. Personally I would have a hard time remembering what more than 3 of them meant. The one thing that would help is by adding icons, but with icons you could likely drop the colors. –  Francis Pelland Apr 24 at 14:56
    
i love your EDIT. :) –  Sven Koluem Apr 24 at 15:09
    
Ummm...No. I've never read any empirical research supporting this answer. Please Google 'color naming' 'color coding' 'human factors' for a start. You will find research suggesting the number is higher than 5 - probably somewhere around 10. Look at any of the US DoD HCI guidelines, maritime HCI guidelines, aviation HCI guidelines, medical HCI guidelines, etc. You will find recommended colors for color coding. There are always more than 5 colors. All of those colors were selected based on empirical research using human performance as a criterion for selecting the colors. –  user1757436 Apr 28 at 21:22
    
@user1757436 Are people capable of learning what more than 10 colours mean? Sure, if they have to use it every day, and in a professional setting that is already complex it might make sense (colour codes for medication types). Should you design a web project where the user needs to learn what 10 colour codes mean? Are non-captive users going to have enough "good will" left to keep using a website that makes them think this much? Depends how useful your site is in spite of this, and whether your competitors have sites that are easier to understand (read Steve Krug's "Don't make me think"). –  Franchesca Apr 29 at 7:49

I usually break my color codes up into areas of the site. For example I might use a color code for the buttons, header, footer, body and text. However, it's always a good idea to keep to a set of colors usually rather than jumping all over the place throughout your site. The guideline of the "Triadic Color Scheme" suggests that you should pick 3 colors for your website and use them throughout the site to create a visually stimulating site but also look professional. They are broken up into 3 segments: Primary Color, Secondary Color and Accent Color. The Primary color will take up about 60% of the site, the Secondary about 30% of the site and the accent color only about 10% of the site. If you find yourself needing more variation or colors try adding different tints of the colors you are already using.

Here is a really nice article with further explanation Triadic Color Scheme

share|improve this answer

I think if you can make a list of different components which might give you some amount of color to use if you prefer to use different color per each different component. Like Buttons are grey.

Imagine Simple website just contains a button , so the maximum number of color codes used will be equal to one

maximum amount of colors = number of different components

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.