Javascript 如何使用jquery合并div中的多色？

我需要一个代码来合并div中给定数量的颜色以形成一个图例。 我引用了以下代码

但它只是一种颜色。我需要在这里使用多种颜色。 预期产量为

---

任何人请帮我做这件事。

你可以在这里看到它的作用：

---

您能提供预期输出的图像吗？您最好使用画布，但如果我们使用画布，是否可以选择特定的颜色？感谢您的代码。但我需要101的div，颜色为金黄色[227，151，4]，这是第100个div颜色到绿色[33，120，70]，而不是从白色到绿色

$.each(Array(50), function() {
    $("<div>").appendTo(document.body);
});

var divs = $('div'),
    len = divs.length;

var targ_R = 227,
    targ_G = 151,
    targ_B = 4,

    inc_R = (255 - targ_R) / len,
    inc_G = (255 - targ_G) / len,
    inc_B = (255 - targ_B) / len;

divs.css("backgroundColor", function(i, curr) {
    return "#" +
        toHex(255 - (i * inc_R)) +
        toHex(255 - (i * inc_G)) +
        toHex(255 - (i * inc_B));
});

function toHex(n) {
    var h = (~~n).toString(16);
    if (h.length < 2)
        h = "0" + h;
    return h;
}

count = 100;

colors = [
  [227, 151, 4 ],
  [ 33, 120, 70]
];

$.each(colors, function(i){
  for(var i = 0; i < count; i++){
    var color = '#';

    $.each(this, function(idx, val){
      color += toHex(inv(inc(val), i));
    });

    $('<div>')
      .css('background', color)
      .appendTo(document.body)
    ;//$div
  }
});

function inc(val){
  return (255 - val) / count;
}

function inv(val, i){
  return 255 - (i * val);
}

function toHex(n) {
  var h = (~~n).toString(16);
  if (h.length < 2) h = "0" + h;
  return h;
}