I have an application which needs to display the rating for a product in an easy to understand visual way. I was thinking of colour coding using the the universal "red is bad, yellow is ok and green is good" system with intermediate colours. Ideally I would like to do this algorithmically to convert a rating from 0-100 into am RGB colour value.

Failing that a stepped system where a 0-10 rating system with each hard step mapped to a specific colour would do. Does anyone have experience on which algorithm will be suitable for this or which ten colours I should use if I go with a stepped solution?

  • The question being asked isn't really user-experience centric. Possibly graphic design, but sounds mostly programming related (asking for an algorithm)
    – DA01
    Feb 17, 2013 at 1:31
  • That said...I don't think you'd want to use an algorithm as much as you want to 'eyeball' it. Create an R-Y-G gradient and pick 10 aesthetically pleasing steps along the way.
    – DA01
    Feb 17, 2013 at 1:32
  • As a programmer I have little experience what looks pleasing hence the question. So what RGB values would be good tent poles to interpolate between? Also for RGB the two extremes are obvious but how to I vary blue to get the right gradient with yellow in the middle. Feb 17, 2013 at 1:38
  • 1
    @UsmanIsmail Mapping a 10-point ordinal rating scale to a set of colors varying by hue should be possible but not necessarily easy. To be effective, the color scale should be created in a color space that makes picking equal perceptual intervals possible, e.g., Munsell, CIELab. Given your lack of experience, do not attempt to use choose your colors in RGB. Choose them in a different space and map them to RGB. Take a look at colorbrewer2.org to understand more about 'equal perceptual intervals.' Feb 28, 2013 at 13:28

3 Answers 3


As long as you show the actual value, this shouldn't be a problem as far as usability goes. Just make sure to adjust the colors or the background so it's readable.

If you use the Red, Yellow, Green spectrum you may notice the relationship between the RGB values:[255,0,0], [255,255,0], and [0,255,0], respectively.

  • Red is 100% red, 0% green, and 0% blue.
  • Yellow is 100% red, 100% green, and 0% blue.
  • Green is 0% red, 100% green, and 0% blue.

If you look at your 0 to 10 rating, you will notice values less than 5 will have 100% red, with a smaller percentage being green. Conversely, the values greater than 5 will have 100% green and a smaller percentage red. The percentage of red/green value is mirrored as you move further away from 5 (the median), and is just applied to the respective color.

Here's a jsfiddle that demonstrates the algorithm you may be looking for.


I am not sure about your user base but do note that relying on the primary colors as a rating system opens up a issue if your user base is going to be predominantly male since studies have shown that about 9% of men are colorblind. I also recommend looking at this article for additional inputs about how colorblindness affects a wide range of people.

enter image description here

That said, I recommend looking at this article for inputs on what rating methods you could potentially use for your user base. Since you are looking for a graded rating system, you could also go for a multi-dimensional rating system along with a like\dislike option like how amazon does it.

enter image description here

Alternatively you could go for a color rating in combination with a like\dislike option like how youtube does it as shown below :

enter image description here

The second image is how a color blind person would see it. Youtube has ensured that with two colors,they are still communicating the rating effectively


I think you are trying to force a simple rating system to give you a detailed result. If you do so, you will have a system that is neither simple, nor detailed.

The beauty of a red, yellow, green system is that there are only three options. So if you want to use that, you simply have to choose what rating ranges will represent what colours, but you then need to keep it to 3 ranges.

If you would like more detailed ratings, then you should consider something else, such as a 5 star system; a 10 point system; or a percentage rating.

  • What would be a good graphical metaphor for a percentage rating system? Feb 17, 2013 at 1:42
  • Nothing that maintains the accuracy of a percentage rating and a decent visual clarity. You need to choose what is most important for you to communicate.
    – JohnGB
    Feb 17, 2013 at 1:58
  • 1
    +1 the spectrum between the 3 significant colors won't have any obvious meaning.
    – obelia
    Feb 17, 2013 at 3:28

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