About
A simple component to select color in the same way you select color in Adobe Photoshop
Features
- Flat mode – as element in page
- Powerful controls for color selection
- Easy to customize the look by changing some images
- Fits into the viewport
Examples
Flat mode.
$('#colorpickerHolder').ColorPicker({flat: true});
Custom skin and using flat mode to display the color picker in a custom widget.
Attached to an text field and using callback functions to update the color with field’s value and set the value back in the field by submiting the color.
$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).val(hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
Attached to DOMElement and using callbacks to live preview the color and adding animation.
$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
}
});
Download
colorpicker.zip (89 kb): jQuery, Javscript files, CSS files, images, examples and instructions.
