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.

Previous attempts

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?

  • 2
    I've just found this tool: ColorBrewer. It allows you to choose the number of classes and the nature of your data, and will provide you with appropriate colour schemes.
    – Brendon
    Commented Sep 20, 2013 at 0:04
  • So far I was using a tool called colorschemer.com for such kind of scenarios.
    – JaganJ
    Commented Sep 25, 2013 at 22:48
  • What is the objective? Is it to show discrete, specific ranges, or is it meant to show a broad, general spectrum?
    – DA01
    Commented Sep 25, 2013 at 23:25

3 Answers 3


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.

enter image description here

  • Nice link and useful link.
    – sysscore
    Commented Sep 20, 2013 at 12:16

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

enter image description here

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.


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
  • 1
    I think the upshot of that article is to use 2 hues rather than 3, not necessarily to go grayscale.
    – Zaz
    Commented Sep 30, 2015 at 2:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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