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.

For charts and graphs it's a relatively common question by programmers to want to procedurally generate an arbitrary number of colors that are visually distinct.

Various research (or educated guesses) exist that say that the number of colors humans can differentiate is somewhere between 200,000 and 20 million. Obviously this varies to some degree by the person (and the presence or degree of any color blindness). However, this is based on whether or not a human can distinguish two colors side-by-side; it is separate from the concern of placing two boxes on the screen with very similar colors, repeating these colors in a legend somewhere, and determining whether or not a human can determine which color goes with which box.

I have done my own investigations into this and come up with a page for generating a set of colors with user-specifiable visual separation.

However, my question is: is there any research showing a "safe" and "reasonable" number of distinct colors that can be properly associated back to a chart legend?

Can You Tell Which Yellow Is Represented by the Yellow Line?

enter image description here

share|improve this question

migrated from cogsci.stackexchange.com Feb 29 '12 at 15:18

This question came from our site for practitioners, researchers, and students in cognitive science, psychology, neuroscience, and psychiatry.

    
@codeinthehole found this interesting article: dl.acm.org/citation.cfm?doid=1842993.1843034 –  Ben Brocka Feb 29 '12 at 16:19
    
Possibly useful: ux.stackexchange.com/questions/16520/… –  msanford Feb 29 '12 at 19:42

3 Answers 3

There is of course an awful lot of research on color and color perception. Most relevant to your purpose is perhaps the work Cynthia Brewer did on ColorBrewer. You can find the resulting tool at http://colorbrewer2.org/ It was originally designed to help choose color for maps but it can also be used for statistical graphs (it's built in Hadley Wickham's ggplot2 package for R).

Basically, it's a sort of color picker but the colors were systematically selected (and tested in several map-reading tasks) to express either

  • discrete categories
  • increasing values along a single dimension
  • diverging values around the center of a scale

They have also been designed to be as distinguishable as possible, to “survive” photocopying and to be usable by people with several types of color deficiencies (but no palette with more than 4 discrete categories was working for the color-blind test participants).

There are also some references to her publications on the topic at http://www.personal.psu.edu/cab38/Brewer_pubs.html

Finally, in many cases it's also valuable to consider other means than color to display multiple time-series. One solution is Tufte's sparklines or his small multiples (i.e. many small graphs, side-by-side instead of one big graph). It might also be somewhat easier to follow a line than to match it with a legend at the bottom. You might therefore get away with more similar colors if you put the legend right on the graph (e.g. at the end of each line) and not in a box somewhere.

share|improve this answer
    
+1 Seems that this is an immensely complex area and quite difficult to summarise in one answer. –  codeinthehole Feb 29 '12 at 16:27
    
@codeinthehole The entire topic of color perception is clearly too large for one answer. However, if the answer of "study X shows that the maximum number of distinct colors is 12-16", then that's a pretty clear answer to the specific question. –  Phrogz Jan 10 at 19:47

Maureen Stone of StoneSoup Consulting has created an "optimal color palette" for charts. It has 8 different colors, and they've been tuned for contrast, differentiation, perceptibility, and color blindness. She provides them in two different sets: one for large blocks of color (like area and bar charts) and one for small points or lines of color (scatter or line charts). Katherine Rowell documents them on her blog: http://ksrowell.com/blog-visualizing-data/2012/02/02/optimal-colors-for-graphs/

I'm sure that 8 colors isn't some theoretical maximum, but it is certainly a practical number - when dealing with distinct data series.

For more continuous gradations, there are definitely limits of perception of differences in color shades that depend on visual perception, and we have more ability to distinguish in some color ranges than others.

One other question that occurs to me: Independent of color, how many different data series you can display certainly depends on other factors such as screen real estate and resolution, clustering/proximity, layering (which one appears on top if they are in the same place), so is it even practical to try and find some theoretical maximum number of colors?

share|improve this answer

Assuming the users are not color blind, then perhaps the question shouldn't be how many colors, but how to choose colors.

(For color blind users, try to provide different patterns to lines.)

If you make sure that every two selected colors differ enough from each other and the background, then the colors should be OK.

I.e. for every color you choose, compare to background and then compare to all previously selected colors. If all comparisons are OK (differ enough), then the color should be OK.

Which brings up the question, how to test if two colors differ enough.

Standard human perception of colors results in a color cube where the height is the intensity of the color (e.g. white vs black).

If you ignore the intensity you are left with a color triangle where the closer to the center the less saturated the color is (more white) and when you rotate around the boundary of the triangle you change prime color (e.g. red, orange, yellow, green, blue, purple).

Colors can be represented with various 3D color coordinates (e.g. RGB, YIQ, YUV, CIE-L*ab, CIE-L*CH, ...).

If you subtract two color's coordinates in one of the color spaces and calculate the distance of the resulting vector (e.g. sqrt( sqr(x1-x2) + sqr(y1-y2) + sqr(z1-z2) ) you will get the difference between two colors.

The large the difference is the easier it is to tell them apart. (You will have to decide on a constant to test distance against, depending on color space you choose.)

If you use a color space where one coordinate is based on the angle around the center of the triangle, then you will have to take into consideration that the end of the range loops back to its beginning when calculating the distance in that coordinate.

Use of a more perceptional color space e.g. CIE-L*CH is more recommended than use of RGB. (The color spaces I gave in the example are sorted from less perceptional to more perceptional.)

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.