Range of Colors to Represent Values

Question

I have an application which draws a colorful bin, with different colors representing different values.

Originally (right side of image), I was using a scale which started with a lighter color, and kept getting darker until it reached a value of 0. My end user said that it was too hard to distinguish between different shades of the same color.

So I switched to a scale from Yellow to Red (left side). The end user agreed it was easier to distinguish, but notified me that Red is a reserved color (means emergency) and that I can't use it.

I have tried looking at other color ranges (i.e. Purple to Blue, Yellow to Green), but I find it hard to extract any meaning from these (in the past darker meant less value).

Since there is always going to 5 different values (plus the 2 other colors for 'Unknown' and 'Initial'), I was thinking of using set colors for each value, but I think this would be even more confusing (i.e. what is Yellow vs Blue vs Green supposed to mean?)

Can anyone suggest a good color scheme or range to represent 5 values?

Answer 1

I've realised after writing this answer that @Brendon suggested the same in the comments - so I'm happy for any answer of his to take precendence.

You want Colorbrewer, its the most awesome set of visually distinguishable colours. Given the parameters you've suggested (7 sequential colours) you want something similar to the YlGnBu pallette.

With my client I just pointed them to the site and got them to pick the pallette they liked the best.

N.B. For ages I missed the HEX mode in the 'pick a color system' for if you need to convert the colours into CSS hex values.

Answer 2

I think you can get 5 distinctive enough colors that can impart the necessary notion of sequence or magnitude (lighter to darker):

It's a matter of mixing the colors in the Hue/Saturation/Brightness (HSB) color model using simple arithmetic. In the above example the top color (in HSB color model) is hue:60 saturation: 25% brightness: 100%. Each successive (darker color) has a slightly different hue (increasing in number value), an increase in saturation and a decrease in brightness. The final bottom color is simply black.

Now you can take this image and plug it into a color blindness simulator and see the magnitude implied by lightness to darkness is still very clear under all the simulated kinds of color blindness.

You can use this color scheme (#ffffbf #d2d982 #82993d #3d6614 #000000) or mix your own with any HSB color mixer, Photoshop or an online HSB color mixer.

Answer 3

This may be counter-intuitive at first and probably much harder to sell, but a grayscale color scheme may be a much better option, since rainbow-based scales aren't that effective. The basic points from the article:

 - Colorblind people can't use them
 - The divisions between hues create edges in the visualization
 - The spectral order of hues has no inherent meaning
 - Yellow appears brighter than other colors
 - Detail is actually harder to see in a rainbow