title: I need to produce a smooth color range from two colors in JS
body: <p>I have two color pickers (start, end) and I need to produce a color range from start to end. The problem I have is the stepping from one to the next. If it was just green I could go from 0-255 on the G channel but being I have 3 channels(rgb) it's rather confusing. </p>
  
  <p>My first thought was to convert rrggbb (hex) to dec and just add to the result. I could then convert it back to RGB This gives me a nice rang in short bursts. For example I get a nice light yellow to dark yellow but after that it goes to blue.</p>
  
  <pre><code>var val = Number( this.gridIDMap.cellAt( j, i ).innerHTML );
  val = Math.floor( val );
  var r = 256 - Math.floor( val / ( 256 * 256 ) );
  var g = 256 - Math.floor( val / 256 ) % 256;
  var b = 256 - Math.floor( val % 256 );
  this.gridIDMap.cellAt( j, i ).style.backgroundColor = "rgba(" + r + "," + g + "," + b + ",.25)";
  </code></pre>
  
  <p>So I'm guessing I could do this with hue saturation but not sure how to do so. Ideally it would be grate to go from blue to red and get a blue to purple to red effect. I'm sure that is possible but it may require a 3rd party include. I have not found anything that does this so far. I don't have to use decimal the color picker has a few options (RGB, hsl, and hex). 
  <a href="https://github.com/PitPik/tinyColorPicker" rel="nofollow">https://github.com/PitPik/tinyColorPicker</a></p>