// Create the color picker with some colors
var cp = new MooColorPicker($('cp'), {
    colors: [
        "#001B2E", "#479096", "#4A7390", 
        "#036564", "#4F2634", "#B6BFAD", "#2D0D10"],
    defaultColor: 3 // Select #4A7390
});

// Display current color
$('current_color').set('html', 'Current color is: <b>' + cp.getCurrentColor() + '</b>');
 $('current_color').setStyle('border-bottom-color', cp.getCurrentColor());
cp.addEvent('change', function(col, box) { 
    $('current_color').set('html', 'Current color is: <b>' + col + '</b>');
    $('current_color').setStyle('border-bottom-color', col);
});

// Some hover effects
cp.addEvent('mouseenter', function(box) {
    box.setStyle('-moz-box-shadow', '1px 1px 5px #666666');
});
cp.addEvent('mouseleave', function(box) {
    box.setStyle('-moz-box-shadow', '1px 1px 5px #cccccc');
});

Following resources are loaded into result:

  1. moocolorpicker.js
<div id="cp">Color picker container</div>
<div id="current_color">No color selected</div>

div.moocolorcheckbox {
    width: 24px;
    height: 24px;
    margin: 4px 2px 4px 0px;
    border: 1px solid white;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cccccc;
    overflow: hidden; }

div.moocolorcheckbox_selected {
    width: 32px;
    height: 32px;
    margin: 0px 2px 0px 0px;
}

* {
    font-family: sans-serif;
    font-size: 14px; }

div#cp {
    padding: 10px; }

div#current_color {
    border-bottom: 6px solid transparent;
    padding: 10px; }