+
+
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').ColorPicker({
+ onSubmit: function(hsb, hex, rgb) {
+ $('#colorpickerField1').val(hex);
+ },
+ 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
+
+ - 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').ColorPickerSetColor(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}).
+
+