Colour palette progression to indicate priority

Question

I need to use colour to indicate priority. Say, there are 20 priority levels. What is the best way to use colour to achieve this? My thoughts so far are:

• I'm leaning towards using shades of a single colour (say, red - from lightest to darkest); using different colours might make sense when the colours are shown in the order of priority, but when items of different priority in a list are mixed up, I think different colours wouldn't work well...
• Is there a sound mathematical approach to arriving at these colours? I prefer to get the colours in hex values

Why 20?

I understand that 20 priority levels normally is too much, but 20 here is just a proprietary number, it can be 10 as well. The thing is, I have a priority score in the range of 1 to 100. And since I have a constraint of not being able to show the numeric value, I want to help the user gauge (not necessarily identify very clearly) relative priorities. Hence the 20 levels (with increments of 5 if it's an arithmetic progression, or variable if it's some geometric progression) help me provide this information to the user.

Also, thanks to everyone for the responses, many are very useful and interesting.

Answer 1

I would split the 20 priority levels into 4 distinct sets (for the sake of colour coding at least). For example on Microsoft TFS (collaboration tools for software projects) there are 4 severity levels you can set against a bug.

Critical, High, Medium, Low.

You could break your priorities into these groups then set 5 different shades of the same colour for each level:

For example:

• Critical priorities - 5 shades of red
• High priorities - 5 shades of orange
• Medium priorities - 5 shades of yellow
• Low priorities - 5 shades of (grey or green?)

Some examples on choice of colour:

1.

Red > Orange > Yellow > Green > Blue

But you could choose 4 shades of each in your case

https://upload.wikimedia.org/wikipedia/commons/3/30/Triagemexico.jpg

2.

Here is an example of 20 different priority levels, ranging from red to blue again. However the split isn't equal for 4 shades each. Instead there are more shades of green and blue than red and orange. I assume this is so the critical and high priorities stand out particularly from the others. http://help.newzie.com/PriorityColorSchema.png

http://help.newzie.com/index.php?id=516

Color coding for priority levels divides this 1-100 interval into 20 equal pieces and each interval is represented by one color in the schema, as shown in the screenshot below. The highest priority level which is the interval between 100 and 96, is represented with the hottest color tone in the scale, that is, color 'red'. As the priority level decreases, corresponding color tones become closer to the color blue, which represents the least important priority level interval, that is between 5 and 1.

Conclusion

I quite like the idea of having the critical, high and medium level priorities only spanning the first 6 or so colours. That way if anything is coded red, orange, or yellow you know its near the top of the priority. For example if you split equally 4 shades each (like I suggested initially) higher priority shades of orange might be confused with a shade of yellow that is much lower priority. I assume its less important to quickly spot a low priority so those ones have a lot more shades and causing possible confusion with specific priorty level is less impactful.

Additional Considerations

As with the majority of UI choice, don't rely solely on the colour to depict the priority. Have an additional method to depict the priority e.g. the number or whatever is relevant in your scenario.

Also the colour choices in example 2 shouldn't be used exactly only the idea that the colour shouldn't change at equal intervals (e.g. 4 red, 4 orange, 4 yellow, and so on). A better choice would be to have 1 or 2 red, 2 orange, 2 yellow and the rest green and blue.

Answer 2

I know that we should answer based on your requirements, but in this case, there is a chance your requirements are wrong.

Let me explain.

there are 20 priority levels.

You can not have 20 priority levels!

Here are some reasons.

1) Categories

Prioritize means to give categories so humans can detect and compare, and then do some actions based on that value of rank, urgency, etc.

Humans struggle if you have more than 6-8 categories. Of course, you can have subcategories but for special purposes like searches and classifications.

Imagine the priorities translated to words.

• Extremely high.
• Very high.
• High
• Not that high
• Medium-high
• Medium
• Medium-low
• Low-High
• Low-medium
• Lower than the previous one...

I just have 10 and it is not logical at all.

2) Adjacent Colors

Yes, humans can perceive a lot of colors... But when they compare them together.

You can have two shades of green next to each other and see if one is "lighter" than others.

But let us assume you need to scroll down a bit. Now you have another similar green... But I'm pretty sure you will have no idea if it is lighter, darker or equal than the previous one.

3) Color names

Similar case as "1". I can barely name some colors

• Red
• Orange
• Yellow
• Green
• Turquoise
• Cyan
• Blue
• Purple
• Magenta
• Brown... do you know brown is a dark orange? How dark?

4) Colors - Lighter

"Lighter" is a tricky adjective.

Here are some circles with two lighter greens on each side... But different lighter. One is more yellowish, In painting, this shift is used to represent a more "perceptually correct" lighter.

Points 3 and 4 will render some classification complicated because the color is a three-dimensional model. And priorities is a unidimensional one.

using shades of a single color

Let us assume you use one single shade of red.

Here is a uniform gradient bar with a small 10% width bar on each side. One pure red and the other pure white.

You can barely see the bar on the left but you can see a lot better the bar on the right.

Human perception of light is logarithmic, not linear. You notice better the difference between #FFF vs #FEE than #F00 vs #E00.

But combine that with point 2 and you can not see a lot of these differences.

• Light light red
• Just light red
• Red

Conclusion:

1) See Dave Haigh proposal of just using 4-6 colors.

2) You have alternatives for the other sub-levels of "priorities" like position. The top ones are more important than the lower ones.

---

Is this square lighter, darker or is the same as the one on the top?

---

Edited:

Coxy commented something interesting. Red-orange-yellow is somehow a well-established sequence. But if you have for some reason just green and blue color probably it is difficult to say which has lower priority.

Probably making a yellowish green can help instead of dark green.

Here are some other options for color schemes.

This last one is probably better for some types of daltonism.

---

Edited sometime later: One interesting case on how colors are not the clearest example of priority is that inclusive DEFCON has priority 4 and 5 colors mixed. Sometimes 4 is blue and 5 green and sometimes is the other way.

https://en.wikipedia.org/wiki/DEFCON

Answer 3

If you've got sequential data - color brewer gives a maximum of 9 data points that you can use to sensibly separate your data.

It's worth noting that all of these are colourblind friendly.

Answer 4

A single colour sounds like a strong approach when you have so many degrees of priority (if you're working with saturation it also works for colourblind users too). If you had two or three degrees then it might be worth looking at different colours: say green for low, yellow for mid, and red for high priority as long as they were accompanied by some sort other representation (words, icons, etc). But for so many degrees of priority the user will definitely have problems remembering which colour represents which level of priority.

As for the mathematics:

Assuming you're just using the red value, there are 255 values between 00 and FF so you just need to divide that by 20 and round to the lowest whole number (12) to get your step size and then convert those numbers back into hex values (0=00, 12=0c, 24=18, 36=24, 48=30, 60=3c, etc.).

Although you may be better off with the HSL colour model where you can adjust the 'Lightness' between 50% (pure colour) and 100% (pure White) more smoothly in steps of 2.5%.

Answer 5

You don’t really want to do that

As others have noted, the degree of differentiation with either become confusing or indistinguishable. To perceive that many levels of color differentiation, the colors would have to be adjacent. That's rare.

Use a small set of key categories to make your system more human-friendly. If you need granularity beyond that, use labels like numbers within your color-coded categories.

So your system might look like

• Urgent (1-5)
• Important (6-10)
• Normal (11-15)
• Backlog (16-20)

To explain it visually:

You'd have to train your users that the numbers don't relate to a nested item count or some other type of association. But that seems more trainable that 20 distinct colors.

Answer 6

Will assume that you will categorize the priorities later;

• Red and derivates colors mostly used for URGENT or to ATTRACT EYES
• Blue and derivates colors mostly used for PROGRESSION or IT'S JUST FINE
• Green you can keep if for SAFE or SUCCESSFUL

And accordingly, make your priorities somewhere around these colors and their levels because these are the usable colors and familiar for the users.

Another approach is traffic light colors like:

• RED = High

• Orange = Medium

• Green = Low

Answer 7

20 shades are a lot, since different types of screens have different resolution and rendering of the colors. People with eyesight problems can also have an issue with identifying the different shades. Lastly, many colors makes a lot of visual noise.

One solution may be to say the top 5 priorities have colors and the rest have no color, but are identified with numbers.