ColorPicker
A simple component to select color in the same way you select color in Adobe Photoshop
Choose 3 colors
Just try it out.
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);
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}).