Try it yourself…
Simple popup
HTML…
<input type="text" id="colorpicker-popup" value="fe9810">
Javascript…
$(function() {
$('#colorpicker-popup').colorpicker();
});
Fully featured popup
HTML…
<input type="text" id="colorpicker-full" value="fe9810">
Javascript…
$(function() {
$('#colorpicker-full').colorpicker({
parts: 'full',
alpha: true,
showOn: 'both',
buttonColorize: true,
showNoneButton: true
});
});
Custom layout
HTML…
<input type="text" id="colorpicker-layout" value="fe9810">
Javascript…
$(function() {
$('#colorpicker-layout').colorpicker({
parts: [ 'header', 'map', 'bar', 'hex',
'hsv', 'rgb', 'alpha', 'preview',
'swatches', 'footer'
],
alpha: true,
layout: {
hex: [0, 0, 2, 1],
preview: [2, 0, 1, 1],
map: [0, 1, 3, 1],
bar: [0, 2, 1, 4],
swatches: [2, 2, 1, 4],
rgb: [1, 2, 1, 1],
hsv: [1, 3, 1, 1],
alpha: [1, 4, 1, 1],
lab: [0, 5, 1, 1],
cmyk: [1, 5, 1, 2]
}
});
});
Plugins
HTML…
<input type="text" id="colorpicker-plugins" value="fe9810">
Javascript…
$(function() {
$('#colorpicker-plugins').colorpicker({
parts: [ 'header', 'preview', 'hex',
'rgbslider', 'memory', 'footer'
],
layout: {
preview: [0, 0, 1, 1],
hex: [1, 0, 1, 1],
rgbslider: [0, 1, 2, 1],
memory: [0, 2, 2, 1]
}
});
});
Localization
HTML…
<input type="text" id="colorpicker-l10n" value="fe9810">
Javascript…
$(function() {
$('#colorpicker-l10n').colorpicker({
parts: 'draggable',
regional: 'nl',
showNoneButton: true,
alpha: true
});
});
More examples…
Click here view a lot more demo's
Demos
