Posible duplicado:
Codificación por colores basada en el número

Quiero que un usuario pueda seleccionar entre un rango de 1 a 100, donde a medida que los números son menores que 50, el color del área se vuelve verde oscuro, y cuando el color se acerca a 100, el color se vuelve más rojo. .

Estoy tratando de hacerlo de modo que a medida que el rango se acerque más hacia el centro, el color debería ser cercano al blanco (donde 50 = blanco completo).

He intentado la respuesta desde aquí:¿Generar colores entre rojo y verde para un medidor de potencia? En vano .... 50 termina siendo un verde confuso ...

Tengo el siguiente html:

<span><span class="value">50</span><input type="range" /></span>​

Y el siguiente javascript:

$(document).on({
    change: function(e) {

        var self = this,
            span = $(self).parent("span"),
            val = parseInt(self.value);
        if (val > 100) {
            val = 100;
        }
        else if (val < 0) {
            val = 0;
        }
        $(".value", span).text(val);
        var r = Math.floor((255 * val) / 100),
            g = Math.floor((255 * (100 - val)) / 100),
            b = 0;
        span.css({
            backgroundColor: "rgb(" + r + "," + g + "," + b + ")"
        });
    }
}, "input[type='range']");​

Violín:http://jsfiddle.net/maniator/tKrM9/1/

He probado muchas combinaciones diferentes de r, g, b pero parece que no puedo hacerlo bien.