Generuj kolory między czerwonym i zielonym dla zakresu wejściowego [duplikat]

Możliwy duplikat:
Kodowanie kolorami na podstawie numeru

Chcę, aby użytkownik mógł wybrać z zakresu od 1-100, gdzie liczby stają się mniejsze niż 50, kolor obszaru staje się ciemniejszy zielony, a gdy kolor staje się bliższy 100, kolor staje się bardziej czerwony .

Próbuję zrobić to tak, aby zakres w kierunku środka był zbliżony do białego (gdzie 50 = pełny biały).

Spróbowałem odpowiedzi tutaj:Wygeneruj kolory między czerwonym i zielonym dla miernika mocy? bezskutecznie ... 50 kończy się pomieszaną zielenią ...

Mam następujący html:

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

I następujący 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']");​

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

Wypróbowałem wiele różnych kombinacji r, g, b, ale naprawdę nie wydaje mi się, aby było dobrze.

questionAnswers(3)

yourAnswerToTheQuestion