Close

11 January, 2017

List of 20 Simple, Distinct Colors


In making my latest project (soon to be revealed!) I came across a problem. The challenge was to color-code 20 different rail lines for a metro system diagram, and I found myself spending an inordinate amount of time choosing the colors. No matter what I did, some colors were too similar and could be easily confused.

Surely I’m not the first person to have this issue, I thought. So I did some googling and came across Kelly’s 22 Colors of Maximum Contrast. Unfortunately towards the bottom of Kelly’s list things get a bit complicated. The orange yellow, purplish red, yellowish brown and reddish orange all seemed to blend together. Not only that, there were no hex triplets, nor RGB nor CMYK values.

Every list of colors that I found online suffered from the same problems. So I made my own, with colors that are:

  • Easily distinguishable
  • Tastefully luminant
  • Given simple, intuitive names
  • Supplied with hex, RGB and CMYK values

Without further ado, I present my own list of 20 simple and visually distinct colors, plus black and white.
I’ve arranged the table so that if you want six colors, for example, just choose the first six starting from the top. The order of the colors is inspired by their frequency of appearance on all the world’s subway maps (yes, I did count them all!).

Some of the color names (like blue or green) don’t match up to various HTML or RGB conventions – this is done deliberately to further differentiate the colors. The conversions between various color spaces are not exact but in my experience they work well.

19 Comments on “List of 20 Simple, Distinct Colors

Justin Runes
17 January, 2017 at 5:16 am

I think the pink and the lavender might easily be confused, but so what, there are maybe 19 very distinct colors. That ought to work well for most projects.

Reply
Sasha
17 January, 2017 at 5:56 pm

With 20 colors, there’s basically going to be some friction no matter what, but I’m actually going to update these numbers now that I’ve tested some combinations. I would imagine it also depends on a person’s color acuity, I tend to do well on the online tests but perhaps others would have more difficulty.

Reply
Rory Smith-Belton
27 February, 2017 at 7:06 am

Phenomenal, thank you!

After I found your side, I also found an online color-differencing algorithm online which will, from a few input parameters, deliver you a set of colors with their corresponding RGB, Hex and HSV values.

http://phrogz.net/css/distinct-colors.html

Reply
Sasha
27 February, 2017 at 4:21 pm

That’s a great website! I tried it out to see what colors it would give if I asked for 20, the results were pretty good but a couple pairs could be confused. But for an automated site it performs very well, thanks for suggesting it.

Reply
Adel
31 July, 2017 at 2:53 am

Wao! That ‘s so soo great. Thank You for that site!

Reply
Ana
28 May, 2017 at 1:28 pm

This is great! Perhaps the beige and coral are too close together, at least the way I perceive it.

Reply
Matthew
8 June, 2017 at 7:32 am

These work for me. Even the pink and lavender, beige and coral. I see the difference and as warm and cool. Great project.

Reply
Peter Diem
12 June, 2017 at 2:45 pm

Perfect – although I would add dark green – think of colored text and of printing text!

Your Roman Road is also perfect – although
I would add Vindobona (Vienna)
Congrats!!!

Reply
Sasha
13 June, 2017 at 10:53 am

Thank you so much! if you look, Vindobona is there between Iuvavum and Carnuntum.

Reply
Niels Heeser Nielsen
16 June, 2017 at 3:48 am

Very nice palette! Exactly what we need to distinguish the status of physical assets on maps 🙂

I would like to have a distinguishability score 1-20, which can make it straight forward to remove the least distinguishable colors, when less than 20 colors are required. Did consider this in any of the map projects where you have used only a part of this palette?

Reply
Sasha
16 June, 2017 at 10:32 am

Absolutely, and I plan on revisiting this in order to produce a simple way of choosing n distinct colors, when n<20.

Reply
Dani Plaza
16 June, 2017 at 4:25 am

Hi! I love your designs and I’d love to do something similar in the near future.
Your roman metro map is just incredible, because I’m a metro-map design enthusiast.
About these colors, I don’t feel that they are similar to each other, so that’s great, but I’d like to suggest light gray too, since the gray you propose is really dark and it could be easily differentiated.

Reply
NInaL
19 June, 2017 at 7:47 pm

http://www2.sas.com/proceedings/sugi29/176-29.pdf and many other papers-
Dr. LeRoy Bessler did this decades ago. I always followed his recommendations for color and design. How do his compare to yours?

Reply
Sasha
19 June, 2017 at 9:29 pm

Bessler gives some great common-sense advice. But his paper has a slightly different focus and doesn’t provide a clear system for choosing n distinct colors that work equally well on screen and in print. He sidesteps the problem of luminance variation across hues and simply recommends black and white for print, which is prudent, but not always possible (for example my Roman roads map).

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.

Reply
dumptyd
26 July, 2017 at 4:11 am

I’ve been looking for colors to use in a pie chart and after 20 minutes of googling I found this, finally. Thank you so much.

Reply
Sasha
26 July, 2017 at 9:55 am

No problem! That’s what this is for!

Reply
Adam
27 August, 2017 at 6:43 pm

What a great study very useful to have gone into such careful thought and research. I have been trying to research the 4 most distinctive colours. Am I right to assume that 3 of them are the primary colours and if so what is the 4th most distinctive colour and what order should they be in? ( I want to use colours for teaching music).

Reply
Sasha
27 August, 2017 at 7:39 pm

The order that I put the colors in, while very convenient, is entirely arbitrary and based on my own judgment.

If you take the first four colors that I have (red, green, yellow, blue), you will have a set of 4 highly distinct colors. You could, of course, achieve even greater distinction by including black and/or white, but that seems unnecessary and may even be distracting. The order you put them in is up to you — I ordered it so that adjacent colors are as different as possible from one another.

Reply
Emm
13 October, 2017 at 1:37 pm

I’m a visual information designer, and I know too well how much thought and effort goes into choosing colors in any kind of visualization. I can spend days searching for the right color combination, even if I only need to distinguish between four or five. I’m sure you must have spent a great deal of time working on these colors!

My concern is that they don’t pass accessibility standards. People with visual impairments will have a difficult time interpreting your map accurately. For instance, someone with Protanopia color blindness will not be able to distinguish between the green, orange, brown and olive colors. Beige, mint and coral will also be indistinguishable, as well as yellow and lime. Other colors offer a little more contrast, but possibly not enough for someone to easily tell them apart. Some of these colors might also be very difficult for someone to be able to discern on white background, or a darker background. They cannot all be used and be equally accessible on the same color background.

Have you ever used a contrast analyzer to check your work? I use this one: https://developer.paciellogroup.com/resources/contrastanalyser/

The analyzer really helps you to design with the users in mind. I have a keen eye and can easily differentiate these colors from one another, but other people might have more difficulty.

In my line of work, one of our rules for visualizing data is that one should never use color alone to convey information. I didn’t see a link to your map, so I didn’t get a chance to see how all your work turned out (would love to see it!) But, if you’re not already doing this, one way you could address the accessibility issue is to limit your colors to a small handful (3-5) of contrasting colors, and then use different line types (dashed, dotted, thick, thin, etc.) to provide even more variation, if you need it.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *