title: Generate gradient step based on dynamic value, including decimals
body: <p>Based on <a href="https://stackoverflow.com/questions/7128675/from-green-to-red-color-depend-on-percentage">this question</a>, which has a <a href="https://stackoverflow.com/a/17268489/736893">fabulous answer for values from 0..1</a>, I tried to modify the function to include the min and max values.</p>
  
  <pre><code>function getColor(value, min, max){
      var hue=((max-(value-min))*120).toString(10);
      return ["hsl(",hue,",100%,50%)"].join("");
  }
  </code></pre>
  
  <p>It seems to work fine for whole numbers, but not so much for decimals.  For instance, these work as expected:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>But these do not:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>The last one is actually blue...  <a href="http://jsfiddle.net/sNKWK/392/" rel="nofollow noreferrer">Here is a fiddle</a>.  How can I change this to work with all 4 scenarios?</p>