Color Palette Generator

basic js/css to show random BG color mosaic with a blending offset.

by Sonal Pinto

HTML

<body>
    <div id="canvas">
    </div>
</body>

CSS

#canvas {
    width: 400px;
    min-height: 200px;
    float: left;
    background-color: #eee;
}
.box {
    width: 50px;
    height: 50px;
    float: left;    
}

JavaScript

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