Close

11 January 2017

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 “convenient” order so that if you want six colors, for example, just choose the first six. 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 typical HTML or RGB conventions. I did this deliberately, to further differentiate the colors. The conversions between various color spaces are not exact, but in my experience they work well.

Update 2: Now with accessibility! With the help of Color Blindness Simulator and this page listing color blindness frequencies, I’ve added a function that allows the user to choose what percentage of the population they are seeking accessibility for:

  • Approximately 95% of the general population has normal color vision and would have full access to the original palette.
  • Another 4% of the population has all three types of cones (RGB), but the red or green cones may not be fully functional, making it more difficult to distinguish green/yellow and blue/purple combinations. I remove some colors that get too close to each other, such as olive, which becomes like brown.
  • A further 1% of the population is missing red or green cones. Roughly speaking, they see colors with wavelengths longer than cyan (e.g. red, green) as shades of yellow, and colors with wavelengths shorter than cyan (e.g. purple) as shades of blue. Since they appear to have the same hue, the only differentiating factors become luminance and chromaticity. Orange and yellow can still be distinguished, but orange looks like a darker yellow.
  • The final 0.01% of the population may have weak or missing blue cones, only one type of cone, or no cones at all. People with tritanomaly (weak blue cones) can see almost the entire spectrum just fine, while people with tritanopia (no blue cones) see, roughly, yellow through purple as cyan, and magenta through orange as red. However, this is such a rare condition that I made the final option tailored for the lowest common denominator: people who cannot distinguish any hues. Yellow becomes light grey, and blue becomes dark grey.

Leave a Reply

66 Comments on "List of 20 Simple, Distinct Colors"

avatar
  Subscribe  
newest oldest most voted
Notify of
Justin Runes
Guest

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.

Rory Smith-Belton
Guest

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

Adel
Guest

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

Ana
Guest

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

Matthew
Guest

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

Peter Diem
Guest

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!!!

Niels Heeser Nielsen
Guest

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?

Dani Plaza
Guest

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.

NInaL
Guest

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?

dumptyd
Guest

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.

Adam
Guest

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

Emm
Guest
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… Read more »
Arttu
Guest

As a color blind person, I can confirm that in the list above for example brown and olive look exactly the same.

William Simpson
Guest
This is great. I was working on a problem that required 10 distinct colors a while back, and this would have been very helpful! Something you should consider though, is accessibility. Specifically if you test these colors under a tools such as http://www.color-blindness.com/coblis-color-blindness-simulator. This tool shows that there are several types of color blindness that would be unable to distinguish some combinations of these colors. I still think you can get 12 – 14 very distinct colors from this, but I think there is still work to be done to get a list of 20 colors that are truly distinct… Read more »
Vipin
Guest

What colors would you choose if a background color was also specified, say white?

Vipin
Guest

This is incredibly useful by the way. Thank you!

Marian
Guest

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.

josh
Guest

thank you so much! exactly the sort of thing i was looking for

Kip Ingram
Guest
Very nice. I find a couple of the pairs hard to distinguish. For example, I’d have a hard time with lime and yellow if they weren’t next to each other. I’m primarily commenting on the comments here – I have to disagree with those that say “color alone should never convey information.” That’s precisely what I’m doing in my (personal) project – it’s an implementation of Charles Moore’s “Color Forth” programming environment, where text color is used to convey information to the compiler / interpreter. Using textures and patterns is impossible here – we’re talking about single characters and they… Read more »
Farid
Guest

Just what I was looking for !!

What a perfect solution. Thanks 🙂

Shubham
Guest

Thank you very much for your crucial efforts because i am also facing the same problem and now your efforts will help me for my purpose

Chris
Guest

thanks!

Mark
Guest

Thanks a lot!!!!

Discriminatrix
Guest

This has been extremely useful. I needed several colors for a mapping project and wanted it to both look good and have reasonably distinguishable colors. One point I’d like to make is that your RGB codes are not all correct. As an example in Grey, you have #a9a9a9 and (128, 128, 128), but a9 is hex for 169. There are others. On my web browser, it looks like the hex codes are correct. I haven’t checked the CMYK values.

Kevin
Guest

Thank you so much!!

Kurt
Guest

thanks, very useful palette!! after reading Discriminatrixs comment I rechecked the rgb values and correct some color-tripel-values:
(230, 25, 75), (60, 180, 75), (255, 225, 25), (67, 99, 216), (245, 130, 49), (145, 30, 180), (66, 212, 244), (240, 50, 230), (191, 239, 69),(250, 190, 190), (70, 153, 144), (230, 190, 255), (154, 99, 36), (255, 250, 200), (128, 0, 0), (170, 255, 195), (128, 128, 0), (255, 216, 177), (0, 0, 117), (169, 169, 169), (255, 255, 255), (0, 0, 0)

Michael
Guest

This helped me a lot! thanks for sharing!

fbparis
Guest

I’ve also made a tool to get distinct colors palettes, starting from the 155 X11 colors and using an optimization algorithm to find subsets of colors maximizing pairwise Lab distance between colors in the palette. You can have a look here : https://mokole.com/palette.html

Matt Brocchini
Guest

Fantastic and so conveniently presented. Thank you!

David Bernstein
Guest

Thanks, this is very helpful!

Nizar
Guest

Thanks for this!

Mark
Guest

This is great thanks. It looks there there is a bug with the filtering. When you select a filter, the repopulated list of hex codes no longer has single quotes around the values.

André Koch
Guest

Brown is much darker and is closer to Maroon. What you’ve got here is actually Tan, not Brown.

André Koch
Guest

I would also include a darker grey and call that grey which calling your current Grey, Silver. But I really like this page!!

Maggie Kean
Guest

thank you!

Arthur
Guest
As of this writing, the hex values in the image and the hex values in code directly under the image don’t match up. Could you clarify which ones you’re most strongly recommending? Also, posting not just the hex values but also the color names in a machine-readable format would be a big time-saver. Like this: { ‘red’: ‘#e6194b’, ‘green’: ‘#3cb44b’, ‘yellow’: ‘#ffe119’, ‘blue’: ‘#4363d8’, ‘orange’: ‘#f58231’, ‘purple’: ‘#911eb4’, ‘cyan?’: ‘#46f0f0’ or ‘#42d4f4’, ‘magenta’: ‘#f032e6’, ‘lime?’: ‘#bcf60c’ or ‘#bfef45’, ‘pink’: ‘#fabebe’, ‘teal?’: ‘#008080’ or ‘469990’, ‘lavender’: ‘#e6beff’, ‘brown’: ‘#9a6324’, ‘beige’: ‘#fffac8’, ‘maroon’: ‘#800000’, ‘mint’: ‘#aaffc3’, ‘olive’: ‘#808000’, ‘apricot’: ‘#ffd8b1’, ‘navy’: ‘#000075’,… Read more »
Adam
Guest

thank you for listing the colors in an easy to copy and paste way!

Jaideep Sharma
Guest

Awesome!
Thanks a lot for the list and kudos to you for considering colorblind population too!

T J
Guest

Thanks so much – I needed a color array for the bar chart in my project and your colors worked great.

Ashu
Guest

May God Bless Your Soul. You have No Idea about the parts of the net that I had to scour to get a distinct sample set of hex codes. With your color palette, I can finally die in peace.

Suzy Jones
Guest

Thank you for the share, I needed a consistent color array of 15 colors and your post was extremely helpful.

Frances
Guest

This is great! Thank you Sasha 🙂

Gandalf
Guest

This is great. If one needed some other number of distinct colors, say 8, 12 or 16, how would you go about that? Did you find any good tools in your quest for making this?

Gandalf
Guest

Ah disregard my earlier comment; you sort by “convenient” and take the first N<20 colors you need, gotcha. Love the accessibility features too.

uberchemist
Guest

Thank you for this wonderful tool! I find myself coming back to this page again and again. Love the work you put into it!

Rob
Guest

Every time I return to this I’m surprised at how useful it is and that this information doesn’t exist somewhere already in some canonical form (or at least not such that I could find it). Excellent resource, thanks!