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.

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.defaultColors = ['000', '000', 'fff', 'fff'];