How to merge multicolor into divs using jquery?

Question

I need code to merge a given number of colors in a div to form a legend. I referenced the following Example .

$.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; } 

But it's just for one color. I need to use more than one color here. Expected Result:

Someone please help me do this.

Answer 1

You can see it in action here: http://jsfiddle.net/THEtheChad/M9MYx/1/

 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; }