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:

  • Colors were too close together
  • No hex, RGB, CMYK values
  • Colors had confusing or complex names

Without further ado, I present my own list of 20 simple and visually distinct colors, plus black and white.

Color Hex RGB CMYK
White #FFFFFF (255, 255, 255) (0, 0, 0, 0)
Black #000000 (0, 0, 0) (0, 0, 0, 100)
Maroon #800000 (128, 0, 0) (0, 100, 100, 50)
Red #FF0000 (255, 0, 0) (0, 100, 100, 0)
Pink #FFC9DE (255, 200, 220) (0, 20, 12, 0)
Brown #AA6E28 (170, 110, 40) (0, 35, 75, 33)
Orange #FF9900 (255, 150, 0) (0, 40, 100, 0)
Coral #FFD8B1 (255, 215, 180) (0, 15, 30, 0)
Olive #808000 (128, 128, 0) (0, 0, 100, 50)
Yellow #FFEA00 (255, 235, 0) (0, 8, 100, 0)
Beige #FFFAC8 (255, 250, 200) (0, 2, 21, 0)
Lime #BEFF00 (190, 255, 0) (25, 0, 100, 0)
Green #00BE00 (0, 190, 0) (100, 0, 100, 25)
Mint #AAFFC3 (170, 255, 195) (33, 0, 23, 0)
Teal #008080 (0, 128, 128) (100, 0, 0, 50)
Cyan #64FFFF (100, 255, 255) (60, 0, 0, 0)
Navy #000080 (0, 0, 128) (100, 100, 0, 50)
Blue #4385FF (67, 133, 255) (75, 48, 0, 0)
Purple #820096 (130, 0, 150) (13, 100, 0, 40)
Lavender #E6BEFF (230, 190, 255) (10, 25, 0, 0)
Magenta #FF00FF (255, 0, 255) (0, 100, 0, 0)
Grey #808080 (128, 128, 128) (0, 0, 0, 50)

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.

4 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

Leave a Reply

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