Random Palette Generator

by Marc Malignan

CSS

html, body {
    height: 100%;
    margin: 0;
}

.color {
    position: relative;
    float: left;
    height: 100%;
    color: white;
    overflow: hidden;
}
.color span {
    position: absolute;
    top: 50%;
    width: 100%;
    line-height: 40px;
    margin-top: -20px;
    text-align: center;
    font-family: consolas, monospace;
    font-size: 24px;
    white-space: nowrap;
}

JavaScript

// nb of columns
var nb = 5;

// columns init
for(var i=0; i<nb; i++) {
    $('body').append('<div class="color"></div>');
}
$('.color').css('width', (100/nb)+'%');

// random colors
function color() {
    $('.color').each(function() {
        var c = $(this);
        
        var hex = (Math.random()*0xFFFFFF<<0).toString(16);
        
        c.css('background', '#'+hex)
        .html('<span>#'+hex+'</span>');
    });
}

// events
$(document).keydown(color);
color();