css adjusting color to a value

Question

I've got the following span:

<span><b class="colored">' + this.my.points_gp + '</b></span>

The this.my.points_gp can be a value between -12 and 80. Now I need to define the "colored" class. What I need is to color the this.my.points_gp taking into account its value.

If it's -12 must be very red.
If it's 0 must be orange.
If it's 20 must be light green.
If it's 80 must be super green.

The thing is that values between the ranges should have different color code. I mean, 70 must be greener than 40 that must be green but lighter. -6 must be an intermediate between red and orange cause it's in the middle of the very red (-12) and the orange (0) and so on...

I'll try to explain myself better: I need 92 different colors and assign them gradually taking into account the base colors that I gave. Sorry for my english it is not my home language.

I don't know if this is possible... maybe in javascript and not in plain css?

Do you need like this http://stackoverflow.com/questions/11849308/generate-colors-between-red-and-green-for-an-input-range? — G.L.P, Mar 20 '15 at 10:32
Check my answer. You may alter the ranges to tweak the color. For value 10, it produces pure yellow. For -12: red, 0: orange, 20: light green, 80: pure green. — Sidmeister, Mar 20 '15 at 11:28
right i'll test your solution soon, this seems the solution I was looking for — Egidi, Mar 21 '15 at 10:58

Sidmeister · Accepted Answer · 2015-03-20T11:23:21.243

You can call the function colorize() passing the value v and it sets variables R, G, B with appropriate values of red green and blue for different values of v. Then using css selector changes (if this selector doesn't work, you can try jQuery, much easier) the text (or background) color of selected element.

function colorize(v){
    // v is the value passed, range = [-12, 80]
    var R = 0, G = 0, B = 0;
    if (v <= 0){
        low = -12, high = 0;
        R = 255;
        G = 0 + Math.floor((150 - 0)*(v - low)/(high - low));
        B = 0;
    }
    else if (v >= 20){
        low = 20, high = 80;
        R = 150 - Math.floor((150 - 0)*(v - low)/(high - low));
        G = 255;
        B = 0;
    }
    else {
        low = 0, high = 20;
        mid = (low+high)/2;
        if (v < mid) {
            R = 255;
            G = 150 + Math.floor((255 - 150)*(v - low)/(mid - low));
        }
        else {
            R = 255 - Math.floor((255 - 150)*(v - mid)/(high - mid));
            G = 255;
        }
        B = 0;
    }
    color = 'rgb(' + R + ',' + G + ',' + B + ')';
    // if you want to change text color
    document.querySelector("span b.colored").style.color = color;
    // or if you want to change background color
    //document.querySelector("span b.colored").style.backgroundColor = color;
}

p.s: Initially wrote in python, so check for unbalanced braces by mistake, if any.

score 0 · Answer 2 · edited Mar 20 '15 at 09:58

0

Yes, the only way it's possible is with JavaScript or with PHP code (Assuming you're coding with PHP).

Here's a clue with JavaScript:

document.getElementsByClassName("colored")[1].style.color = "red";

Hope this helped ;)

edited Mar 20 '15 at 09:58

ketan

19,129
42
60
98

answered Mar 20 '15 at 09:51

Amine Zaine

165
1
21

score 0 · Answer 3 · answered Mar 20 '15 at 10:05

Your question have lack of information.. Hope you need below one:

if( this.my.points_gp >= -12 && this.my.points_gp < 0 ) {
    <span class="very_red skiptranslate"><b>' + this.my.points_gp + '</b></span>
}
else if( this.my.points_gp >= 0 && this.my.points_gp < 20 ) {
   <span class="orange skiptranslate"><b>' + this.my.points_gp + '</b></span>
}
else if( this.my.points_gp >= 20 && this.my.points_gp < 80 ) {
   <span class="light_green skiptranslate"><b>' + this.my.points_gp + '</b></span>
}
else {
   <span class="super_green skiptranslate"><b>' + this.my.points_gp + '</b></span>
}

this code only displays 4 colors, i need to display 92 diferent colors adjusting th color gradually inside the ranges — Egidi, Mar 20 '15 at 10:21

score 0 · Answer 4 · answered Mar 20 '15 at 10:39

I'd add an ID to the span, remove the tag (replacing it by font-weight:bold), so that it would be this way:

.colored{
    font-weight:bold;
    //other rules you may have
}

<span id="myId" class="colored">' + this.my.points_gp + '</span>

Then using javascript I'd add a class to change the color:

if( this.my.points_gp >= -12 && this.my.points_gp < 0 ) {
    document.getElementById("myId")[1].style.color = "red";
}
else if( this.my.points_gp >= 0 && this.my.points_gp < 20 ) {
   document.getElementById("myId")[1].style.color = "orange";
}
else if( this.my.points_gp >= 20 && this.my.points_gp < 80 ) {
   document.getElementById("myId")[1].style.color = "lightgreen";
}
else {
   document.getElementById("myId")[1].style.color = "darkgreen";
}

css adjusting color to a value

4 Answers4