List of 20 Simple, Distinct Colors
In making my Roman Roads project, 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.
(Update: I went with repeating colors instead, numbering each line and making sure that same-colored lines were far from each other.)
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.
Leave a Reply
33 Comments on "List of 20 Simple, Distinct Colors"
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.
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.
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
Wao! That ‘s so soo great. Thank You for that site!
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.
This is great! Perhaps the beige and coral are too close together, at least the way I perceive it.
These work for me. Even the pink and lavender, beige and coral. I see the difference and as warm and cool. Great project.
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!!!
Thank you so much! if you look, Vindobona is there between Iuvavum and Carnuntum.
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?
Absolutely, and I plan on revisiting this in order to produce a simple way of choosing n distinct colors, when n<20.
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.
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?
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.
No problem! That’s what this is for!
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).
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.
Belated thanks for your reply Sasha which makes 100 percent sense – I.e. your choice that the 4 most distinctive colours would be red green yellow blue in that order. In fact if I could post a photo here I could show you four key buttons on a virgin media television remote are exactly that combination of colours! I need look no further for an answer to my question 🙂
As a color blind person, I can confirm that in the list above for example brown and olive look exactly the same.
It’s literally impossible to find a set of 20 colors that works for the various kinds of colorblind people, due to the limited range of perception. You can’t please everyone.
If you’re designing a stoplight, then you can please everyone. There are 3 good colors that are distinguishable by all color blind people. This is about 20 colors. There do not exist 20 colors that are indistinguishable by all color blind people. If there was only one type of colorblindness, then maybe you could. But that’s not the case. That’s why colorblind-friendly design typically has a shape element.
Here’s a good example from board games:
I actually don’t believe it’s possible to have a set of 20 colors that works for more than 85% of the population. If you want accessibility, you really can’t exceed 7-8 colors, or at least that’s the generally accepted practice. If you want to represent more symbols you gotta go with multicolored or dashed lines.
What colors would you choose if a background color was also specified, say white?
This is incredibly useful by the way. Thank you!
Awesome work!
I would think of adding couple more shades of grey (no, not “50”! I neither read it nor saw it).
These are easily distinguishable for most people independently from their colour acuity.
thank you so much! exactly the sort of thing i was looking for
Agreed on everything. And my hope is that people just choose whatever works for them — I’m not looking for scientifically maximal coverage of color acuity limitations. I just want a solid set that you can choose from that works 95% of the time.
Just what I was looking for !!
What a perfect solution. Thanks 🙂