Color palette

by Ritesh Pandey

HTML

<div id="colorPalette"></div>

CSS

div {
    display: inline-block;
    color: #fff;
}

JavaScript

$(function() {
    var hue, sat, light, color, div,
        dColorPalette = document.getElementById('colorPalette'),
        PARTS = 8;

    for(hue = 0; hue < 360; hue += (360/PARTS)) {
        for(sat = 100; sat <= 100; sat += 5) {
            for(light = 0; light <= 100; light += 5) {
                color = 'hsl('+ hue +', '+ sat +'%, '+ light + '%)';
                div = document.createElement('div');
                div.style.height = '60px';
                div.style.width = '60px';
                div.style.backgroundColor = color;
                div.textContent = (hue*PARTS)/360;
                dColorPalette.appendChild(div);
            }
        }
    }
});