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.

  • 4
    If you go for different colours, here are a few suggestions that are colour blind proof: bids.github.io/colormap Option D is probably a good one for this case. – Davidmh Jun 16 '16 at 10:13
  • color wheel or HSV (Hue-Saturation-Value) springs to mind: your idea corresponds to gradually lowering Saturation, personally I'd experiment with varying the Hue in steps of 9° for to achieve a gradient yellow-orange-red-purple-blue while also decreasing S. When you indicate priority in a color-independent way as well, you are making it easier for everybody to keep them apart. Aaaand priority is RELATIVE so salt. – Lothar_K Jun 17 '16 at 12:23
  • 20 priority levels? Are you sure this is correct? – Devin Jun 17 '16 at 17:08

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

enter image description here 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. enter image description here 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.

  • I like your conclusion – Ooker Jun 16 '16 at 12:34
  • @Ooker thanks. yeh it was after seeing that 2nd example that ive posted that I saw the benefit of having more shades for the lower priorities and only a few shades for the highest ones. – Dave Haigh Jun 16 '16 at 12:52
  • 10
    You should probably at least mention that there will be colourblind people who can't distinguish all the colours, no matter what scheme you choose - and red/green is one of the worst. Also, in your scheme in point 2, I (a male with normal vision) can barely distinguish priorities 1 and 2, let alone 9 through 13. If I was given only the colour and had to guess the priority, I would be unlikely to get it right unless it was priority 6 or 16. – Nathaniel Jun 16 '16 at 12:57
  • 2
    If I blur my vision a bit, I can kind of tell the difference between 1 and 2, but no amount of manipulation, either in my eyes or on the monitor, allow me to see the difference between 10, 11, and 12. EDIT: If I angle the monitor downwards, and move the color bar to the bottom, I can distinguish between 1 and 2 :) – Zymus Jun 16 '16 at 21:10
  • 2
    I would say that the gradient from red to yellow, and then perhaps to another colour is fairly well "culturally established" in terms of priority. But if I only had medium and low priority issues visible, I would not be able to tell you whether green or blue was more important! – Coxy Jun 17 '16 at 4:37

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

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.

enter image description here

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.

enter image description here

Points 3 and 4 will render some classification complicated because a 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.

enter image description here

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 the point 2 and you can not see a lot of this 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?

enter image description here


Edited:

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

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

enter image description here

Here are some other options of color schemes.

enter image description here

enter image description here

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


Edited some time 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

  • 16
    You can not have 20 priority levels! - this. Once the scheme gets this complex, you need a better tool. Something like a Gantt chart comes to mind. Priorities are then laid out in a logical manner that clearly indicate where in the process flow they are at risk of creating a bottleneck. No colour system can do that. – J... Jun 16 '16 at 16:15
  • Yeap, Grantt chart uses position to give priority. That is what I mentioned in the point 2 of the conclusion :o) Thanks. – Rafael Jun 17 '16 at 10:05

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

  • "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" No! That gives you colours between 0 and 19x12=228, which has two problems. 1) 0=black isn't a shade of red. 2) Rounding the step size down means you've not used the full range. Don't round the step size but, rather, round the values you've computed from the non-integer step-size. And count down from 255 so you don't end up with black as one of your shades of red. – David Richerby Jun 17 '16 at 8:38
  • @DavidRicherby The point you're making here is not actually pertinent to the original question. However, the reason I used that particular 'formula' is that there is no simple way to divide 25 by 20 leaving only whole numbers. The OP wants to use Hex Colours which do not support decimal places. This is why I also advised the use of the HSL model which does support decimal places.. – Andrew Martin Jun 17 '16 at 9:03
  • 2
    No, there is a trivial way to divide 255 (I assume you made a typo there) by 20 leaving only whole numbers. You do all your intermediate calculations with real arithmetic and round the answers, instead of rounding the intermediate calculations. Indeed, this is how you should do any calculation at all. – David Richerby Jun 17 '16 at 9:43
  • @DavidRicherby - This is one of the lowest scoring answers on this thread. In fact I believe it only got as high as it did because I posted it early and showed sources. You point about the mathematics could be posted as an answer that may score you reputation points for being more correct than mine - The point I was trying to make with my post is that there are other colour models available that are easier to use with a variable scale than Hex. – Andrew Martin Jun 17 '16 at 10:14

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.

enter image description here

  • didn't know about ColorBrewer, thank you! :) – Devin Jun 17 '16 at 18:02

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
  • 1
    OP has suggested there may be as many as 20 different priority levels. Can you elaborate on how your system could cope with so many differentiations? – Andrew Martin Jun 16 '16 at 7:56
  • As Dave Haigh mentioned below, there will be saturations (or what I called them derivates), the more saturation is well known for higher importance or higher value and taking into consideration e.g. all REDs are important. link – Sadiq Jaffer Jun 16 '16 at 9:29

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:

Combining color-coding and numbered rank

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.

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.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.