LakTEK A Sri Lankan, A Rubyist and A Web Dude

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>
 
<link rel="stylesheet" href="colorPicker.css" type="text/css" />

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'];

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!

This is good work man. I will try it it our in my next JQuery project.

Great work! :)

[…] Really Simple Color Picker in jQuery […]

Buen "Color Picker" con jQuery…

Hay muchos "Colors Pickers" para la biblioteca jQuery, pero, no de todos voy a hablar aquí, por varias razones: primero, porque cuando necesites uno, harás bien en buscar información y hacer tus pruebas por tu cuenta, y,…

HI, good job man!!

I was tring to use change event facilities from jquery with your plugin, but without success. I wanted something that trigged a function when a changed the color.

Thus i changed the changeColor function from your code to the following (just added .change() call at the end):

changeColor = function(value){
if(selectedValue = toHex(value)){
$(selectorOwner).css(“background-color”, selectedValue);
$(selectorOwner).next(“input”).val(selectedValue);

//close the selector
hideSelector();
$(selectorOwner).next(“input”).change();
}
};

Maybe it is useful for someone else.

thank you!

Hi yguaratã,

Thank you very much for the contribution. It’s a handy addition. I committed your change to plugin’s github repo.

Love the simplicity but this pluggin has many issues with IE6. To many to list here.

Hey Lakshan, I like it!

I had the reverse problem of yguaratã - I had outside forces changing the hidden input and watched the swatch to update when something changed the hidden input.

I made a quick hack to

(1) Pass the input as an argument to the `buildSelector` function from `colorPicker`:

$.fn.colorPicker = function(){
if(this.length > 0) buildSelector(this);
return this.each(function(i) { buildPicker(this)});
};

(2) Add a change listener to the input at the end of the `buildSelector` function to update the swatch as things change.

$(input).change(function() {
selectedValue = toHex($(input).val());
$(this).prev(“.color_picker”).css(“background-color”, selectedValue);
});

Now whenever the input is changed it updates the current color swatch!

Thanks!

Hi, this picker works great.. after checking out a few jquery color pickers I decided to use this one because it is light and it works as it should. Best regards, Miha

Hey
Thanks for the plugin, but it doesn’t work on IE6… How to fix it?

Amigo- I would appreciate if u could help me fixing it to IE6. please email me any solution to this matter. I would send u a big thanks from Brazil :) neoswf(at)gmail-Dot-com

This is just what I needed! This will save me a lot of head ache..

Thank you

Very cool plugin! Simplicity is awesome…..

Amazing plugin, love the simplicity.

Is there any news on a fix for IE6?

Good work

Chris

Nice plugin.

I just wrote a Django snippet to use your color picker simply using a Django model field: http://www.djangosnippets.org/snippets/1261/

Cheers,
Fabian