Where can I find a large palette / set of contrasting colors for coloring many datasets on a plot?

70

52

I need large set (20 and more) of contrasted and easily visually-distinguishable colors for coloring different datasets on a scientific plot (the set of colors should not include white or black, and colors should be as bright as possible).

The plot is generated programmatically and intended to be included in a presentation which will be displayed using a projector.

Are there any ready-made sets of colors for such a task (I need colors as a set of RGB values)?

Or maybe there is some algorithm which generates such a set of colors programmatically (I use Wolfram Mathematica for plot generation)?

P.S. The plot itself may look, for example, similar to this one:

1

Alexey Popkov 2013-10-06T07:48:49.090

For background, why do they really need to be distinguishable?e100 2011-09-20T12:54:42.107

I meant, why do the different sets of data points need to be distinguishable?e100 2011-09-20T22:03:43.397

2@e100 In other words, colors are used here to indicate group membership.Alexey Popkov 2011-09-23T04:02:50.167

56

Thanks to great work

P. Green-Armytage (2010): A Colour Alphabet and the Limits of Colour Coding. // Colour: Design & Creativity (5) (2010): 10, 1-23

(and to user ohadsc who referenced it!) now I know at least 3 ready-made color sets of maximum contrast containing not less than 20 colors (but I still have explicit RBG values only for one of them):

1) The set of 22 colours of maximum contrast proposed by Kenneth Kelly in the work:

Specifics (citing P. Green-Armytage): "The order of colours in Kelly's list was planned so that there would be maximum contrast between colours in a set if the required number of colours were always selected in order from the top. <...> Kelly took care of the needs of people with defective color vision. The first nine colours would be maximally different for such people as well as for people with normal vision. These nine colours are also readily distinguishable by colour name."

Additional information (citing P. Green-Armytage): "The ISCC set up Project Committee 54 with the intention of bringing Kelly's work up to date. However, the committee decided that, for what they were trying to do, they could not improve on Kelly's set of colours."

2) The set of 25 colors suggested by Robert and Ellen Carter in the work:

Robert C. Carter, Ellen C. Carter (1982): High-contrast sets of colors. // Appl. Optics, 21 (1982) 2936-2939.

Specifics (citing P. Green-Armytage): "Carter and Carter make reference to Kelly's work and verify his assumption that the ease with which two colours can be discriminated depends on how far apart the colours are in colour space. From the colour spaces available at the time they chose CIE Luv* as most appropriate for their study. <...> They found that people's ability to identify colours correctly diminished rapidly when the distance between colours was less than 40 CIE Luv* units." In their work they present a set of 25 colors separated by at least 51.6 CIE Luv* units.

3) The set of 26 colors for the Colour Alphabet Project suggested by Paul Green-Armytage in the above-cited work "A Colour Alphabet and the Limits of Colour Coding." This color set is designed for use with white background. RGB triplets of this set are: `{240,163,255},{0,117,220},{153,63,0},{76,0,92},{25,25,25},{0,92,49},{43,206,72},{255,204,153},{128,128,128},{148,255,181},{143,124,0},{157,204,0},{194,0,136},{0,51,128},{255,164,5},{255,168,187},{66,102,0},{255,0,16},{94,241,242},{0,153,143},{224,255,102},{116,10,255},{153,0,0},{255,255,128},{255,255,0},{255,80,5}`.

UPDATE 1

4) There is another excellent article on the subject:

Zeileis, Hornik and Murrell (2009): Escaping RGBland: Selecting Colors for Statistical Graphics // Computational Statistics & Data Analysis Volume 53, Issue 9, 1 July 2009, Pages 3259-3270

This article contains nice set of 26 distinct colors on the page 11:

RGB triplets of this set are: `{2,63,165},{125,135,185},{190,193,212},{214,188,192},{187,119,132},{142,6,59},{74,111,227},{133,149,225},{181,187,227},{230,175,185},{224,123,145},{211,63,106},{17,198,56},{141,213,147},{198,222,199},{234,211,198},{240,185,141},{239,151,8},{15,207,192},{156,222,214},{213,234,231},{243,225,235},{246,196,225},{247,156,212}`.

UPDATE 2

User Tatarize suggests in his blog:

6) A color dictionary of 269 maximally distinct colors from all previous colors (I used this function for getting RGB triplets from the hex codes):

Here are the hex codes from linked blog post (complete listing of 269 hex codes of Tatarize's color alphabet hidden in the history of changes for readability).

UPDATE 3

Potentially useful web-applications:

UPDATE 4

8) List of 20 Simple, Distinct Colors by Sasha Trubetskoy:

"I made an easy to use list of colors that is optimized across all media; not without tiny compromises, of course, such as inexact CMYK conversions. The main issue is choosing “pure” (e.g. 100% magenta) or web-safe colors leads to gawdy, distracting and imbalanced color palettes. This is my attempt at a nice palette that works well for network or transit-style diagrams, or for categorical data."

Does anyone have the hex code for the colors in Update #1?redshift 2016-02-15T13:07:09.743

1@redshift They are: `"#023fa5", "#7d87b9", "#bec1d4", "#d6bcc0", "#bb7784", "#8e063b", "#4a6fe3", "#8595e1", "#b5bbe3", "#e6afb9", "#e07b91", "#d33f6a", "#11c638", "#8dd593", "#c6dec7", "#ead3c6", "#f0b98d", "#ef9708", "#0fcfc0", "#9cded6", "#d5eae7", "#f3e1eb", "#f6c4e1", "#f79cd4"`.Alexey Popkov 2016-02-23T11:26:17.730

1

This is quite useful, Alexey. Thanks! I'm wondering if you found anything for 1. continuous colour scales (gradients) 2. colour scales or colour sets that retain contrast even after greyscale conversion (a requirement in APS journals, for example). http://graphicdesign.stackexchange.com/questions/7960/clearly-distinguishable-colours-for-scientific-figures

Szabolcs 2012-06-16T09:33:51.827

to create comma separated hex strings from those, use this python oneliner: ```print("'" + "', '". ...: join('#'+''.join(f'{int(c):02x}' for c in col.split(',')) for col in colors.strip('{}').split('},{')) + "'")```.flying sheep 2017-03-10T10:24:08.890

Bear in mind that the technique used for the 200+ color palettes is not optimal for this application as it was done in the RGB color space. The RGB color space is meant for computers to interpret and display colors, it is not based on perception. The result is a large number of desaturated colors which the human eye can't distinguish very well. A more ideal method would be to space them in the Lab color space (which is how it was done for the initial 64-color palette).Miguel Bartelsman 2017-12-17T08:20:59.860

@MiguelBartelsman Are you sure? Here are descriptions for sets #6 and #7. In the both cases LABd2000 color distance was used (over a set of RGB colors). Since the intention is to use these colors on a computer or a projector, I think it is nearly the best choice at the moment.

Alexey Popkov 2017-12-17T08:40:46.273

Sorry about that, it seems I completely misread. I also went ahead and did an analysis of the palette myself (https://i.imgur.com/KHx0MuA.png & https://i.imgur.com/HZcNJZB.png). Honestly, it's about as good as it'll get for 256 colors, with only 2 or 3 pairs being difficult to differentiate next to each other.

Miguel Bartelsman 2017-12-19T16:43:53.540

If anyone needs, here are the hex-codes of the colors in the same order as they are on the picture **

private string[,] graphColors = { {"#023FA5","#7D87B9","#BEC1D4","#D6BCC0","#BB7784","#FFFFFF"}, {"#4A6FE3","#8595E1","#B5BBE3","#E6AFB9","#E07B91","#D33F6A"}, {"#11C638","#8DD593","#C6DEC7","#EAD3C6","#F0B98D","#EF9708"}, {"#0FCFC0","#9CDED6","#D5EAE7","#F3E1EB","#F6C4E1","#F79CD4"},

``````    };
``` – alex440  – 2014-04-29T16:22:20.020```

16

The combination of "bright", "easily distinguishable" and "20 and more" is tricky. Reminds me of "Our work is fast, cheap and high-quality. Pick any two." I think you could drop "bright" out of the mix and just say "contrasted". That makes the brief simpler to achieve, and I think will get you where you want to be.

I don't know of such a set off-hand, but here's how I would go about it using Photoshop:

• Create a blank document in the color mode (RGB or CMYK) you want to use. RGB is correct for all desktop printers and for on-screen or projection viewing. Use CMYK only if you need actual CMYK values.

• Pick 5 base colors evenly spread around the color wheel. In the Hue setting, that means 0, 60, 120, 180, 240 and 300. These would be your starting points. (Alternatively, replace the default swatches with the Windows or Mac set available in the Swatches panel flyout menu, and use the 7th-last to 2nd-last.)

• For each Hue, select 5 or 6 brightness and saturation levels that give you easily-distinguished final colors.

If you're setting these up to be generated programatically, just take whichever of the values fit the color model you'll be dealing with. If you need to use Illustrator or Flash for the dots, add these steps:

• Delete all the other swatches (Alt/Opt-click to remove) so all you have left are the ones you want.

• Save the swatches using "Save Swatches for Exchange..." in the Swatches flyout. This saves a .ASE file which can be loaded into Illustrator, InDesign or any of the other Adobe apps.

I hope that helps.

Base colors in hex are: 0xff0000 (pure red), 0xffff00 (yellow), 0x00ff00 (green), 0x00ffff (cyan), 0x0000ff (blue) and 0xff00ff (magenta). Doing some experimenting, I found pure yellow too close too white to be entirely useful for your purposes, and blue required a different starting point because it is visually dark. From each base color, you can get away with 4 shades. Since you can also use greys, that permits a 7x4 matrix of what I would consider quite usable colors, given your constraints (and presumed lack of access to Photoshop or a similar application). Grab a calculator and derive the decimal values if you need them! :-)

• For all but yellow, blue and gray, your starting points are the pure colors. Reduce the hex values from ff to b0, 87 and 55 for your four shades.

• For blue, the "bright" is b0b0ff, and the shades are 8484ff, 4949ff and 0000ff.

• For yellow: e4e400, baba00, 878700 and 545400 will work, and for the gray values make the low order bytes the same as the high and middle in each case.

My quick-and-dirty chart of these (minus the greys) looks like this:

Here's Alan's list of colors: #ff0000 #b00000 #870000 #550000 #e4e400 #baba00 #878700 #545400 #00ff00 #00b000 #008700 #005500 #0000ff #0000b0 #000087 #000055 #b0b0ff #8484ff #4949ff #0000ff #ff00ff #b000b0 #870087 #550055 #ffffff #b0b0b0 #878787 #555555neu242 2013-11-20T12:24:46.677

2A correction to the values in @neu242's comment (where cyan and blue "merge" and which contains white). I think Alan's colours are: `#ff0000 #b00000 #870000 #550000 #e4e400 #baba00 #878700 #545400 #00ff00 #00b000 #008700 #005500 #00ffff #00b0b0 #008787 #005555 #b0b0ff #8484ff #4949ff #0000ff #ff00ff #b000b0 #870087 #550055 #e4e4e4 #bababa #878787 #545454` but I wouldn't necessarily use them in that order...MikeLimaOscar 2014-01-02T15:06:13.420

2... here they are again as RGB triples but "transposed": `{255,0,0}, {228,228,0}, {0,255,0}, {0,255,255}, {176,176,255}, {255,0,255}, {228,228,228}, {176,0,0}, {186,186,0}, {0,176,0}, {0,176,176}, {132,132,255}, {176,0,176}, {186,186,186}, {135,0,0}, {135,135,0}, {0,135,0}, {0,135,135}, {73,73,255}, {135,0,135}, {135,135,135}, {85,0,0}, {84,84,0}, {0,85,0}, {0,85,85}, {0,0,255}, {85,0,85}, {84,84,84}`.MikeLimaOscar 2014-01-02T15:09:44.077

I have corrected my question: the colors should be contrasted (and as far as possible bright). The plot is generated programmatically and I need the colors as a set of RGB values. Thank you.Alexey Popkov 2011-09-13T03:36:12.230

See the expanded answer. I think that will get you where you need to be.Alan Gilbertson 2011-09-13T07:55:09.377

You could also move the colours around the colour wheel slightly with the steps in saturation to get a little more contrast between different saturation levels of the colour.ConcernedOfTunbridgeWells 2011-09-13T14:40:34.343

@Alan Your solution is initially based on equally-spaced grid of RGB values defined in RGB colorspase. As I have learned recently, RGB colorspace is not perceptually uniform and so such approach inevitably leads to a set of colors which will contain too close colors. For example, in your chart the two bottom blue colors are very much alike and it is very hard to distinguish them on my monitor even when I know that they must be different. It seems that the Munsell Color System is much better for such purpose: it is perceptually iniform.

Alexey Popkov 2011-09-13T16:54:18.617

2Re-read paragraph 2 of my answer. You asked for RGB values, not Munsell; you got RGB. These will work for your purposes, there is no need to use all of them, and I gave you the details to that you have the flexibility to modify them. Site contributors are not here to do your work for you (see the FAQ).Alan Gilbertson 2011-09-13T17:15:43.917

@Alan I just shared my recent finding and meant that seemingly the Munsell Color System is better for picking up colors and of course these colors can be converted to RGB further (there is free utility for this). Thank you for your effort.

Alexey Popkov 2011-09-13T18:32:35.040

5

A nice approach is the Solarized color scheme by Ethan Schoonover.

From the descr.:

"Solarized is a sixteen color palette (eight monotones, eight accent colors) designed for use with terminal and gui applications."

I think it's not only a nice color scheme, but also extensible and has a nice theory behind it.

5

There's a fundamental flaw and that's attempting to plot 20 different things in one visual. That's a lot of visual clutter and adding 20 colors is only going to add to that clutter.

I'd consider rethinking the overall visual if you can. Perhaps segment it into 4 visuals of 5 colors each, mix and match overlays, etc.

Tufte is the go-to resource for learning more about plotting data in ways that best communicate the objective:

http://www.edwardtufte.com/tufte/

2

You can try this color picker. It was designed for maps but we use it for charts and graphs as well. Good luck!

http://colorbrewer2.org/

Max 12 colours though. sorry. : )