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>
<div id="spectrum">
<input size="6" type="text" id="bg" value="">
</div>
<div id="output">click me to unhide spectrum</div>
CSS
body {background: #000;}
#spectrum {display: none;}
#output {
width: 300px;
height: 300px;
border: 1px #fff solid;
color: #fff;
}
JavaScript
$(function() {
var palette = ['#000', '#fff', '#888'];
$('#bg').spectrum({
preferredFormat: "hex6",
clickoutFiresChange: true,
showButtons: false,
showInput: true,
allowEmpty: true,
showAlpha: true,
flat: true,
showPalette: true,
palette: palette,
move: function(color) {
var rgb = color.toRgb();
$('#output').css('background-color', 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + color.alpha + ')');
}
});
$('#bg').spectrum('set', 'rgba(62,161,169,0.5)');
$('#output').click(function() {
$('#spectrum').toggle();
});
});