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"><!--mce:0--></script>
<script src="jquery.colorPicker.js" type="text/javascript"><!--mce:1--></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'];

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)

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

the controls textbox cannot be edited when it is used inside a modal (jquery.modal plugin)

any workaround to this?

@kemal I will look into this issue. Actually I’m working on the next release of the plugin which will be released in few days.

Any ideas/progress on fixes for IE6? I know it’s an outdated browser, but my target audience includes many dial-up users…who generally do not update their browsers (or try alternatives), but also benefit from the compact code that your plugin uses.

Lakshan,

I do appreciate your color control and I did use it in my test project but before going production, I wanted to ask you whether you could manage to resolve the above issues.

when are you planning to release the next version?

Seems that a few days is turning into a month…in the meantime, I need this to work. So I actually figured out and hacked up a solution to the problem(s). I’ve pasted my fixed code here: http://pastebin.com/m428aee1c. Read on for a description of what needed to be changed.

First, IE6 can’t use transparent PNGs…convert the arrow.png image to a gif, and change the css accordingly. There is a png transparency hack for IE6, but it’s not really worth the trouble in this case.

Second, IE6 is apparently unable to use element IDs or class names that start with an underscore. So remove those wherever they occur in the css/js (for example, change any use of ‘_color_selector’ to ‘color_selector’ in the js, and change ‘div#_color_selector’ to ‘div#color_selector’ in the css…and so on).

Finally, a couple fixes are needed to make sure the height of the colour picker/swatch divs are sized to the correct height. First, you need to add the text ‘ ’ (no quotes) to the color_picker and color_swatch divs in the js code (lines 20 and 38 in my copy from the github repo). This makes IE6 respect the line-height CSS property - now you need to add ‘line-height:16px’ and ‘line-height:12px’ to the css classes for color_picker and color_swatch.

That’s it…it should now work in IE6 (it does for me at least).

Note in my previous post the spot that says to add the text ‘ ’ is supposed to say add the text ‘ ’

Muser,

First of all sorry for not being able to keep to my word. And thank you for coming up with this. Coincidently, I also just completed making the plugin compatible with IE6 over this weekend. I was about to push the new release. Anyway, you beat me in it..

Thanks again for your wonderful contribution. Really appreciate it!

No worries…thanks for the updates. The plugin is really handy and efficient.

There is one other minor change I’d consider. I’ve got some color pickers appearing in a dialog that can be moved/resized. It would be nice to detect if div#color_chooser exceeds the right/bottom bounds of the screeen - if so, the div could be displayed above and/or to the left of the picker, instead of the default bottom-right placement.

That’s just a nice-to-have though…I might try my hand at it sometime if I have time, and if you or someone else hasn’t got to it first.

P.S.: The download from github is missing the gif - does it take a while to update?

Muser >> I will try to put some time into the issue you mentioned above.

BTW, it seems GitHub is having some problems right now. Anyway you should be able to download the arrow.gif from Github.

How do you get the actual selected color in hex?

TaeWoo >> You could get the actual selected color by the value of assoicated text field.

Thanks Lakshan.
IS there a debug mode or something? I constantly get into scenarios where the color picker opens up but does not close once clicked…

I’ve found this bug on line 91:

hexColor = $(selectorOwner).next(“input”).val();

should be:

hexColor = $(selectorOwner).prev(“input”).val();

Sorry…line 93 (I had deleted the ‘alert’ just before that)

Muser & TaeWoo: Thanks for spotting the bug. Fixed it.

Thanks for this great plugin, it was just what I was looking for!

Hi Lakshan, great plugin, it’s exactly what I was looking for. I’m new at jquery and could use some tips to make it perfect for my needs.
I have three color pickers on one page (just as in your demo), and I need to change the default colors depending on which element is chosen. Thanks for any advice.

[…] Really simple ColorPicker — ??? ?? ???????? ?????, ??? ??? «???????» ??????? jQuery-?????? ??? ?????? ?????, ?? ?????????????, ?????? ????? ???????????: […]

Hi

Can anyone expand on the code written by John
7 November 2008 @ 9pm?

I can’t get it to work

Thanks