javascript - Convert a 0-1 value to a hex colour? -

i'm creating app visualises stars using nasa api. colour of star comes 0 1 value, 0 being pure blue, , 1 being pure red. need set way convert 0-1 values in javascript sliding hex (or rgb) scale, progressing this:

0: blue (9aafff) .165: blue white (cad8ff) .33: white (f7f7ff) .495: yellow white (fcffd4) .66: yellow (fff3a1) .825: orange (ffa350) 1: red (fb6252) 

is possible? don't have idea how begin approach this. cheers!

the best work in color space rgb one. example hsl.

example:

var stones = [ // data   {v:0, hex:'#9aafff'},   {v:.165, hex:'#cad8ff'},   {v:.33, hex:'#f7f7ff'},   {v:.495, hex:'#fcffd4'},   {v:.66, hex:'#fff3a1'},   {v:.825, hex:'#ffa350'},   {v:1, hex:'#fb6252'}, ] stones.foreach(function(s){   s.rgb = hextorgb(s.hex);   s.hsl = rgbtohsl.apply(0, s.rgb); });  function valuetorgbcolor(val){   (var i=1; i<stones.length; i++) {     if (val<=stones[i].v) {       var k = (val-stones[i-1].v)/(stones[i].v-stones[i-1].v),           hsl = interpolarrays(stones[i-1].hsl, stones[i].hsl, k);       return 'rgb('+hsltorgb.apply(0,hsl).map(function(v){ return v|0})+')';     }   }   throw "bad value"; } 

/**   * converts rgb color value hsl. conversion formula   * adapted http://en.wikipedia.org/wiki/hsl_color_space.   * assumes r, g, , b contained in set [0, 255] ,   * returns h, s, , l in set [0, 1].   *   * @param   number  r       red color value   * @param   number  g       green color value   * @param   number  b       blue color value   * @return  array           hsl representation   */  function rgbtohsl(r, g, b){      r /= 255, g /= 255, b /= 255;      var max = math.max(r, g, b), min = math.min(r, g, b);      var h, s, l = (max + min) / 2;        if(max == min){          h = s = 0; // achromatic      }else{          var d = max - min;          s = l > 0.5 ? d / (2 - max - min) : d / (max + min);          switch(max){              case r: h = (g - b) / d + (g < b ? 6 : 0); break;              case g: h = (b - r) / d + 2; break;              case b: h = (r - g) / d + 4; break;          }          h /= 6;      }        return [h, s, l];  }    /**   * converts hsl color value rgb. conversion formula   * adapted http://en.wikipedia.org/wiki/hsl_color_space.   * assumes h, s, , l contained in set [0, 1] ,   * returns r, g, , b in set [0, 255].   *   * @param   number  h       hue   * @param   number  s       saturation   * @param   number  l       lightness   * @return  array           rgb representation   */  function hsltorgb(h, s, l){      var r, g, b;        if(s == 0){          r = g = b = l; // achromatic      }else{          function hue2rgb(p, q, t){              if(t < 0) t += 1;              if(t > 1) t -= 1;              if(t < 1/6) return p + (q - p) * 6 * t;              if(t < 1/2) return q;              if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;              return p;          }            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;          var p = 2 * l - q;          r = hue2rgb(p, q, h + 1/3);          g = hue2rgb(p, q, h);          b = hue2rgb(p, q, h - 1/3);      }        return [r * 255, g * 255, b * 255];  }      function hextorgb(hex) {      return /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)      .slice(1).map(function(v){ return parseint(v,16) });  }    function interpolarrays(a,b,k){    var c = a.slice();    (var i=0;i<a.length;i++) c[i]+=(b[i]-a[i])*k;    return c;  }    var stones = [ // data    {v:0, hex:'#9aafff'},    {v:.165, hex:'#cad8ff'},    {v:.33, hex:'#f7f7ff'},    {v:.495, hex:'#fcffd4'},    {v:.66, hex:'#fff3a1'},    {v:.825, hex:'#ffa350'},    {v:1, hex:'#fb6252'},  ]  stones.foreach(function(s){    s.rgb = hextorgb(s.hex);    s.hsl = rgbtohsl.apply(0, s.rgb);  });    function valuetorgbcolor(val){    (var i=1; i<stones.length; i++) {      if (val<=stones[i].v) {        var k = (val-stones[i-1].v)/(stones[i].v-stones[i-1].v),            hsl = interpolarrays(stones[i-1].hsl, stones[i].hsl, k);        return 'rgb('+hsltorgb.apply(0,hsl).map(function(v){ return v|0})+')';      }    }    throw "bad value";  }    (var i=0; i<=1; i+=.03) {    var color = valuetorgbcolor(i);    $('<div>').css({background:color}).text(i.tofixed(2)+" -> "+color).appendto('body');  }

body {    background: #222;  }  div {    width:200px;    margin:auto;    color: #333;    padding: 2px;    text-align: center;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

for example, took color space conversion functions here there easy find once know for.

note modern browsers understand hsl colors (exemple: background: hsl(120,100%, 50%);) so, if you're building html, don't have embed code in page, precompute color stops , interpolate on hsl values directly.