Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
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 Sep 20 '13 at 0:04
    
So far I was using a tool called colorschemer.com for such kind of scenarios. –  JaganJ Sep 25 '13 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 Sep 25 '13 at 23:25
add comment

3 Answers

up vote 8 down vote accepted

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 this 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

share|improve this answer
    
Nice link and useful link. –  sysscore Sep 20 '13 at 12:16
add comment

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.

share|improve this answer
add comment

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
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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