How many visually distinct colors can accurately be associated with a separated legend in a figure?

Question

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?

Answer 1

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.

Answer 2

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?

Answer 3

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