Color Picker - jQuery plugin
About
A simple component to select color in the same way you select color in Adobe Photoshop
Last update
23.05.2009 - Check Download tab
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
License
Dual licensed under the MIT and GPL licenses.
Examples
Flat mode.
$('#colorpickerHolder').ColorPicker({flat: true});
Custom skin and using flat mode to display the color picker in a custom widget.
<p>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.</p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>
<pre>$('#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 (73 kb): jQuery, Javscript files, CSS files, images, examples and instructions.
Changelog
- 23.05.2009
- Added: close on color selection example
- Added: restore original color option
- Changed: color update on key up event
- Fixed: colorpicker hide and show methods
- Fixed: reference to options. Multiple fields with colorpickers is possible now.
- Fixed: RGB to HSB convertion
- 22.08.2008
- Fixed bug: where some events were not canceled right on Safari
- Fixed bug: where teh view port was not detected right on Safari
- 16-07-2008
- Fixed bug where the letter 'F' could not be typed in the Hex field
- Fixed bug where the changes on Hex field where not parsed
- Added new option 'livePreview'
- 08-07-2008
- Fixed typo in the code, both JavaScript and CSS
- Changed the cursor for some elements
- Added new demo explaining how to implement custom skin
- 07.07.2008
- The first release.
Implement
Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.
<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" /> <script type="text/javascript" src="js/colorpicker.js"></script>
Invocation code
All you have to do is to select the elements in a jQuery way and call the plugin.
$('input').ColorPicker(options);
Options
A hash of parameters. All parameters are optional.
eventName | string | The desired event to trigger the colorpicker. Default: 'click' |
color | string or hash | The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000' |
flat | boolean | Whatever if the color picker is appended to the element or triggered by an event. Default false |
livePreview | boolean | Whatever if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true |
onShow | function | Callback function triggered when the color picker is shown |
onBeforeShow | function | Callback function triggered before the color picker is shown |
onHide | function | Callback function triggered when the color picker is hidden |
onChange | function | Callback function triggered when the color is changed |
onSubmit | function | Callback function triggered when the color it is chosen |
Set color
If you want to set a new color.
$('input').ColorPickerSetColor(color);
The 'color' argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).
Found a typo? Something is wrong in this documentation? Just fork and edit it!