Help me choose twenty RGB colors that all contrast with each other.

November 3, 2009 9:41 AM

Help me choose twenty RGB colors that all contrast with each other, so that any two of them are distinguishable in a graph.

I am using rrdtool to make some graphs from a perl script, and I need a default list of 20 or so colors that are all easily distinguishable from each other when they show up next to each other in an rrdtool graph.

I've seen some other posts on finding a handful of colors that look good together, but I'm looking for the largest set of web colors where any two can be easily distinguished when they show up next to each other.

posted by popechunk to Computers & Internet (10 answers total)

Best answer: I am a biologist in a high-data field and I see a lot of high-data visualizations. The ones that try to use more than eight colors or so always fail. It is possible for people to distinguish more colors than that, but only constantly referring back to the legend, so you lose the sort of intuitive at-a-glance understanding at the data possible in plots with fewer colors. If you want ideas on how to better visualize this sort of data, you might consider reading the chapter on "Multiway data" in Bill Cleveland's Visualizing Data, and Edward Tufte explains in greater detail in The Visual Display of Quantitative Information the sorts of things you would lose in what I think you are envisioning.

That said, ColorBrewer has multiple color palettes designed for easily distinguishing the colors in visualizations (originally maps) after years of research. Their Set3 palette for qualitative data goes up to 12 different colors.
posted by grouse at 10:00 AM on November 3, 2009 [7 favorites]

Can you double the number of colors by doing 2 different "textures" of lines (there's probably a real word for this, but I don't know what it is... I mean e.g. solid lines and dotted lines)?. If you can come up with 4-5 different textures, you can find 4-5 colors that would work for colorblind people (or in grayscale... as you probably want it to be photocopiable and all that)
posted by brainmouse at 10:20 AM on November 3, 2009

What about the colors Google Calendar uses? I haven't gone and checked to make sure they contrast, but I'm guessing those colors were chosen with this sort of idea in mind.
posted by aniola at 10:21 AM on November 3, 2009

Google Calendar uses very few colors - 6 or 8, IIRC.
posted by restless_nomad at 10:22 AM on November 3, 2009

Grouse's point is very insightful. If you can reduce the number of dimensions you'll be able to communicate your story a lot more easily.

Nonetheless, if you're stacking colors with rrdtool, you might think about the color contrast constraint as limited to a color in the stack, and one or two colors above and below that color's position.

In other words, if you have twenty colors, color 14 may only need to contrast well with colors 13 and 15, and to a lesser degree 12 and 16. Thinking about it this way may make it easier to come up with a high-contrast color palette.

Also consider using the ordering of labels in your legend as a hint to the viewer. If you want to focus in on one dataset out of twenty, a sorted legend will help you zoom in to that set in the plot.
posted by Blazecock Pileon at 10:31 AM on November 3, 2009

Response by poster: The ones that try to use more than eight colors or so always fail...

This is in line with my experience.

That said, ColorBrewer has multiple color palettes designed for easily distinguishing the colors in visualizations

That's exactly the kind of thing I'm looking for.

Please consider having a backup plan for colorblind folks.

Good idea.

Can you double the number of colors by doing 2 different "textures" of lines

Maybe. It depends upon what rrdtool offers.

Thanks for all of the answers so far.
posted by popechunk at 10:35 AM on November 3, 2009

Response by poster: Nonetheless, if you're stacking colors with rrdtool, you might think about the color contrast constraint as limited to a color in the stack,

I'm writing a tool where people can graph anything they like, by feeding me formatted data. Some of the feeds are comically large.

I don't actually "know" anything about the data I'm graphing. I'm trying to pick an extremely generic way of presenting the data. This is mostly to be used for quickie prototyping.

I know it won't be perfect.
posted by popechunk at 10:41 AM on November 3, 2009

Best answer: i solved the same problem using perl and the library Graphics::ColorUtils, specifically the function hsv2rgb, which converts the
HSV color model to the more familiar RGB model.

HSV works because you can vary the hue while maintaining the saturation and value (lightness) ... here is some perl code that accomplishes what you want:

use Graphics::ColorUtils;
my $number_of_distinct_colors = 20;
my $step = int(360/$number_of_distinct_colors);
my ($saturation, $value) = (1, 1);
my @distinct_rgb_colors = map { hsv2rgb( $_-1, $saturation, $value) } 1..$number_of_distinct_colors;
posted by beukeboom at 10:46 AM on November 3, 2009

of course, i have a bug. in the last line, it should be:

hsv2rgb( ($_-1) * $step, $saturation, $value)
posted by beukeboom at 10:48 AM on November 3, 2009

What does google use in their charts api, if you don't manually specify the color? I know the first two are a light orange and a dark orange. I have no idea how many colors they use before repeating, but it might be worth looking into.
posted by cgg at 10:55 AM on November 3, 2009