CODEWITHSUNDEEP
javascriptjquerycssmathcolors
GG.
GG.

Reputation: 21834

Automatic background colors according to numerical values

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:

enter image description here

Question

I just need or I also need ?

Example

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

Upvotes: 3

Views: 1127

Answers (5)

maxedison
maxedison

Reputation: 17553

Doing this via CSS sounds like you'd have to write much more code, so I'd recommend using JS to accomplish it.

Here's an example of a red gradation: http://jsfiddle.net/3J3Yb/3/

And the JS:

$('td').each(function(){
    var $this = $(this);
    var decimal = parseInt($this.text(),10) / 100;
    var red255 = Math.round(255 * decimal)
    $this.css('background-color','rgb(' + red255 + ',0,0)');
});

And this will give you all possible colors, at color change intervals of 17 (that's 15 different color values for each r, g, b -- 255/17 = 15): http://jsfiddle.net/3J3Yb/6/

It's only a smooth gradient within groups of 15, because it's only within groups of 15 that two of the colors remain constant. The code is pretty simple:

var tr = $('tr');

for(var r = 0; r < 256; r+=17){
    for(var g = 0; g < 256; g+=17){
        for(var b = 0; b < 256; b+=17){
            var rgb = r+','+g+','+b;
            tr.append('<td style="background:rgb('+rgb+')"></td>');
        }
    }
}

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92893

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%)"
});

Upvotes: 6

Joseph Marikle
Joseph Marikle

Reputation: 78520

Do you mean something similar to this?

http://jsfiddle.net/Xw3JL/

Needs tweaking though

Upvotes: 4

Joseph Silber
Joseph Silber

Reputation: 219920

If you want to do it purely in CSS, you should give them all classes according to their percentage:

<table>
    <tr>
        <td class="level-100">100%</td>
        <td class="level-90">90%</td>
        <td class="level-80">80%</td>
        <td class="level-70">70%</td>
        <td class="level-60">60%</td>
        <td class="level-50">50%</td>
        <td class="level-40">40%</td>
        <td class="level-30">30%</td>
        <td class="level-20">20%</td>
        <td class="level-10">10%</td>
        <td class="level-0">0%</td>
    </tr>
</table>

That way you can style them with simple CSS:

.level-100      { background-color: #E50012; }
.level-90       { background-color: #E11900; }
.level-80       { background-color: #DD4500; }
.level-70       { background-color: #D96F00; }
.level-60       { background-color: #D59700; }
.level-50       { background-color: #D2BE00; }
.level-40       { background-color: #B8CE00; }
.level-30       { background-color: #8DCA00; }
.level-20       { background-color: #63C600; }
.level-10       { background-color: #3AC200; }
.level-0        { background-color: #14BF00; }

Here's the fiddle: http://jsfiddle.net/3J3Yb/4/

Upvotes: 1

GregM
GregM

Reputation: 2654

Not sure it's possible to do it automaticly, but i think you could hardcode something like 100% to 90% = Green, 90% to 80% = yellow.

This website make automatic gradient with the number of step that you want : http://www.perbang.dk/rgbgradient/

Hope it will help you :)

Upvotes: 1

Related Questions