Question

Context

I am looking for a way to make automatic background colors according to numerical values.

In my example, the colors vary from green to red depending on the percentages:

Question

I just need css or I also need javascript?

Example

You can use this markup: http://jsfiddle.net/3J3Yb/1/.

Answer 1

Taking off from Joseph’s solution:

Red is (255,0,0); yellow is (255,255,0); green is (0,255,0). So if you want your gradation to go through yellow, you need to gradually increase the green to 100% and then reduce the red to 0.

http://jsfiddle.net/mblase75/Xw3JL/1

$(".percentVals td").each(function(){
    var r = Math.min(100,parseInt(this.innerHTML,10)*2);
    var g = Math.min(100,200-parseInt(this.innerHTML,10)*2);
    this.style.backgroundColor = "rgb(" + r + "%," + g + "%,0%)"
});