canvas = document.querySelector('#canvas')
var el, i;
for(i = 0; i < 64; i++) {
// SET YOUR BLEND COLOR HERE -----------------------------------
color = generateRandomColor({red: 256, green: 256, blue: 256});
//--------------------------------------------------------------
el = document.createElement("div");
el.setAttribute('class', 'box');
el.setAttribute('style', 'background-color: '+color);
canvas.appendChild(el);
}
function generateRandomColor(mix) {
var red = Math.random() * 256 >> 0;
var green = Math.random() * 256 >> 0;
var blue = Math.random() * 256 >> 0;
// mix the color
if (mix != null) {
red = (red + mix.red) / 2 >> 0;
green = (green + mix.green) / 2 >> 0;
blue = (blue + mix.blue) / 2 >> 0;
}
rr = red.toString(16);
if (rr.length === 1) {
rr = "0"+rr[0];
}
gg = green.toString(16);
if (gg.length === 1) {
gg = "0"+gg[0];
}
bb = blue.toString(16);
if (bb.length === 1) {
bb = "0"+bb[0];
}
return "#"+ rr + gg + bb;
}
<body>
<div id="canvas">
</div>
</body>
#canvas {
width: 400px;
min-height: 200px;
float: left;
background-color: #eee;
}
.box {
width: 50px;
height: 50px;
float: left;
}