Lakshan Perera

Really Simple Color Picker in jQuery

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!

Update

Plugin now supports all major browsers including IE6! (Thanks muser for the patch)

Update #2 (October 14, 2009)

Color picker will automatically update it's color when the value of the input field is changed externally. (Thanks John for initially identifying the issue and Sam Bessey for pushing me on to this change :) )

Update #3 (February 17, 2012)

Made a significant change to support transparancy and other additional options. Special thanks for the contributions from Daniel Lacy. Please refer the README for more details.