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.