Generate gradient step based on dynamic value, including decimals

Question

Based on this question, which has a fabulous answer for values from 0..1, I tried to modify the function to include the min and max values.

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

It seems to work fine for whole numbers, but not so much for decimals. For instance, these work as expected:

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);

But these do not:

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);

The last one is actually blue... Here is a fiddle. How can I change this to work with all 4 scenarios?

Schiller

Answer 1

This seems to work very well:

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("");
}

edit: adjusted based on comments below

Schiller

I think your code is incorrect, the function expects a normalized value between 1-0, so just make sure your input value gets normalized between 1-0 based on min/max. Then just feed the function that value. stats.stackexchange.com/a/70807 – Earley

Can you elaborate? var v = (value-min) / max; should always be a value between 1-0, no? Why would I do more calculations outside the function? – Schiller

According to the answer above about normalization. That formula is not correct. While its near correct, its not completely correct. E.g. feeding in a value which is equal to max, will not give you 1. For example: min = 4, max = 1000, value = 1000, v => 0.996 but should be 1 – Earley

Okay, so what is the solution? – Schiller

subtract min from max? – Schiller

yep thats correct :D didn't realize yesterday its that simple. – Earley