Создать шаг градиента на основе динамического значения, включая десятичные знаки

На основе этого вопроса, который имеет сказочный ответ для значений от 0..1, я попытался изменить функцию, чтобы включить значения min и max.

function getColor(value, min, max){
    var hue=((max-(value-min))*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

Кажется, что он отлично работает для целых чисел, но не для десятичных знаков. Например, они работают как ожидалось:

var value=42;
var d=document.createElement('div');
d.textContent="value="+value + " (this should be green)";
d.style.backgroundColor=getColor(value,42,100);
document.body.appendChild(d);

var value=42;
var d=document.createElement('div');
d.textContent="value="+value + " (this should be red)";
d.style.backgroundColor=getColor(value,0,42);
document.body.appendChild(d);

Но это не так:

var value=0.1;
var d=document.createElement('div');
d.textContent="value="+value + " (this should be green)";
d.style.backgroundColor=getColor(value,0,90);
document.body.appendChild(d);

var value=0.1;
var d=document.createElement('div');
d.textContent="value="+value + " (this should be green)";
d.style.backgroundColor=getColor(value,0,5);
document.body.appendChild(d);

Последний на самом деле синий... Вот скрипка. Как я могу изменить это для работы со всеми 4 сценариями?

Ответы

Ответ 1

Это работает очень хорошо:

function getColor(value, min, max){
    if (value > max) value = max;
    var v = (value-min) / (max-min);
    var hue=((1 - v)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

изменить: скорректировано на основе комментариев ниже