如何在Javascript中按百分比使一种颜色与另一种颜色相似

我有两种十六进制形式的颜色，#000000 and #ffffff。我想按百分比将第一种颜色与第二种颜色近似。 就像是：

var percent=0.50;
var color1='#000000';
var color2='#ffffff';

var newcolor=approximateColor1ToColor2ByPercent(color1,color2,percent);
//newcolor should be a gray like #808080

这个怎么做？

对于加色混合：

要混合两种颜色，请执行以下操作：

function approximateColor1ToColor2ByPercent(color1, color2, percent) {
  var red1 = parseInt(color1[1] + color1[2], 16);
  var green1 = parseInt(color1[3] + color1[4], 16);
  var blue1 = parseInt(color1[5] + color1[6], 16);

  var red2 = parseInt(color2[1] + color2[2], 16);
  var green2 = parseInt(color2[3] + color2[4], 16);
  var blue2 = parseInt(color2[5] + color2[6], 16);

  var red = Math.round(mix(red1, red2, percent));
  var green = Math.round(mix(green1, green2, percent));
  var blue = Math.round(mix(blue1, blue2, percent));

  return generateHex(red, green, blue);
}

function generateHex(r, g, b) {
  r = r.toString(16);
  g = g.toString(16);
  b = b.toString(16);

  // to address problem mentioned by Alexis Wilke:
  while (r.length < 2) { r = "0" + r; }
  while (g.length < 2) { g = "0" + g; }
  while (b.length < 2) { b = "0" + b; }

  return "#" + r + g + b;
}

function mix(start, end, percent) {
    return start + ((percent) * (end - start));
}

然后是下面的代码：

approximateColor1ToColor2ByPercent('#000000', '#ffffff', .50);

将返回'#808080'