Recently, I needed to use a color picker with predefined color palette for my work. Thanks to many enthusiastic developers, there are several popular, sophisticated color pickers already exist for jQuery. However, most of these plugins looks complex as if they are made to be used in a online image editor. They are overwhelming for simple usage and less flexible for customization. So I had to write my own simple color picker from the scratch.
Usage of color picker is very straightforward. Users can either pick a color from the predefined color palette or enter hexadecimal value for a custom color. Compared to other plugins, it is very lightweight (it's only 5KB without compressing) and obtrusive to use. It doesn't require any dependencies apart from jQuery core and uses simple HTML/CSS for presentation. You have the ability to easily customize the default color palette by adding more colors or replacing the palette with completely different set of colors.
Want to try?
If you want to see a demo before trying out by yourself, here is a simple demo of the plugin.Download Color Picker via GitHub
Usage
Color Picker requires jQuery 1.2.6 or higher. So make sure to load it before Color Picker (there's no other dependencies!). For default styles of the color picker load the CSS file that comes with the plugin.<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.colorPicker.js" type="text/javascript"></script>
Add a text field to take the color input.
<div><label for="color1">Color 1</label>
<input id="color1" name="color1" type="text" value="#333399" /></div>
Then call 'colorPicker' method on the text field when document loads.
jQuery(document).ready(function($) {
$('#color1').colorPicker();
});
Your favorite colors are missing? Just add them to the palette
//use this method to add new colors to palette
$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
Or completely change the color palette as you need...
$.fn.colorPicker.defaults.colors = ['000', '000', 'fff', 'fff'];
That's all you have to do!
Future Improvements
This is only the initial release of Color Picker. There may be wild browser bugs or you may find smarter ways to improve the functionality of the plugin. I'm open to all your suggestions and complaints. Leave a comment here or contact me directly.Further, the code of the plugin is available via GitHub, so if you feel like forking it and playing with it please do!