Spectrum From Master

A working demo of the latest version of spectrum colorpicker

HTML

<link rel="stylesheet" href="http://bgrins.github.com/spectrum/spectrum.css">
<script src="http://bgrins.github.com/spectrum/spectrum.js"></script>
<a href='http://bgrins.github.com/spectrum'>&lt;--Spectrum Homepage</a>

<h2>Full Example</h2>
<input type='text' id="full"/>

<div class='palettes'>
    <ul id='tetrad'></ul>
    <ul id='triad'></ul>
    <ul id='an'></ul>
    <ul id='sc'></ul>
    <ul id='mono'></ul>
    
</div>

CSS

.full-spectrum .sp-palette {
max-width: 200px;
}

.palette {}
.palettes ul { list-style:none; }
.palettes li { display:inline-block; width: 200px; height: 100px; }

JavaScript

function schemeTmpl(e) {
    var hex = e.toHexString();
    return '<li style="background:'+hex+'" title="'+hex+'" />'
}

function templateSchemes(tiny) {

    var analogous = $("#an");
    var splitcomplement = $("#sc"); 
    var tetrad = $("#tetrad");  
    var triad = $("#triad"); 
    var mono = $("#mono");

    analogous.html($.map(tinycolor.analogous(tiny, 5, 10), schemeTmpl).join(''));
    splitcomplement.html($.map(tinycolor.splitcomplement(tiny), schemeTmpl).join(''));
    triad.html($.map(tinycolor.triad(tiny), schemeTmpl).join(''));
    tetrad.html($.map(tinycolor.tetrad(tiny), schemeTmpl).join(''));
    mono.html($.map(tinycolor.monochromatic(tiny, 5), schemeTmpl).join(''));
}


$("#full").spectrum({
    color: "#ECC",
    showInput: true,
    flat: true,
    className: "full-spectrum",
    showInitial: true,
    showPalette: true,
    showSelectionPalette: true,
    maxPaletteSize: 9,
    preferredFormat: "hex",
    localStorageKey: "spectrum.demo",
    move: function (color) {
        
        templateSchemes(color);
    },
    show: function () {
    
    },
    beforeShow: function () {
    
    },
    hide: function () {
    
    },
    change: function(c) {
    },
    palette: [
        ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
        "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
        ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
        "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], 
        ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", 
        "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", 
        "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", 
        "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197,...