Duplicata Possível:
Codificação de cores com base no número

Eu quero que um usuário seja capaz de selecionar a partir de um intervalo de 1-100, quando os números se tornarem menores que 50, a cor da área se torna mais escura, e como a cor fica mais próxima de 100, a cor fica mais vermelha .

Eu estou tentando fazer com que, como o intervalo em mais para o centro, a cor deve ser perto de branco (onde 50 = branco completo).

Eu tentei a resposta daqui:Gerar cores entre vermelho e verde para um medidor de energia? sem sucesso .... 50 acaba sendo um verde confuso ...

Eu tenho o seguinte html:

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

E o seguinte 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']");​

Violino:http://jsfiddle.net/maniator/tKrM9/1/

Eu tentei muitas combinações diferentes de r, g, b, mas eu realmente não consigo acertar.