Colour palette progression to indicate priority
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
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.
If you go for different colours, here are a few suggestions that are colour blind proof: https://bids.github.io/colormap/ Option D is probably a good one for this case.
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.
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:
- 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:
Red > Orange > Yellow > Green > Blue
But you could choose 4 shades of each in your case
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
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.
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.
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.
@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.
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 i agree. I wouldn't use those exact colours only the concept of when to change the shade. I hope the op is using an additional method to show priority and not relying only on the colour. I will add it to the answer thanks
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 :)
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!
I'm red-green colourblind, and the first 2 definitely look the same. I can't even tell the difference between any of the greens from 9 to 13 (inclusive). If I blew it up huge on my desktop I may be able to differentiate them, but without a large sample, they're all nearly identical.
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.
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.
- Not that high
- 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
- 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
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?
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.
`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.
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.
@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..
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.
@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.
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.
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
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?
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.