Jquery – Color Picker

Color Picker Preview
It depends on jQuery 1.4.2. The Jquery powered Color Picker is styleable using a single stylesheet. It works in an unobtrusive fashion, by just turning html select inputs into a sexier equivalent. There’s no extra markup needed.If javascript is not enabled the normal html select is still displayed meaning it is compatable with all browsers.

On many a website to select a color you are given a html select box with a list of color names, or hex values.

Something like this

This is both unintuitive and downright ugly. My thinking was that there has to be a better way. And thats where the Jquery Color Picker comes in.

The big difference between the Jquery Color Picker and other Jquery powered color pickers is the Jquery Color Picker takes a normal html select like above and turns it into an intuitive, cross browser, color picker.

This allows you to control the colors that can be picked, and send the chosen value through a form without having to manipulate the output.

Demo

Normally the select element is hidden, for the demo we have shown it.

<select id="picker">
<option value="FFFFFF">FFFFFF</option>
<option value="FFDFDF">FFDFDF</option>
...
<option value="00001b">00001b</option>
<option value="000000">000000</option>
</select>
<link rel="stylesheet" href="jquery.colorpicker.css" type="text/css" media="screen" /> 
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.colorpicker.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#picker').colorpicker({
        size: 20,
        label: 'Color: ',
        hide: false
    });
});
</script>

Options

Parameter Description Example
size Size in px of the color squares 20
scount How many color squares to show per row 6
label A label to prepend to the picker Color:
hide should the original select be hidden? false

Download from GitHub



Tags: , ,

Matthew Hailwood is a Freelance web developer. He specializes in back-end development Specifically PHP5, SQL, and Code Igniter. He is no designer but he has a flair for user experience development using Jquery.

30 Comments Leave yours

  1. What a fascinating read, I am ready for more…

  2. Hi, I’m using your color picker plugin, it’s working great, but I made a small change to it. Immediately after you set the value of the select element on line 90:
    $(obj).val($(this).attr(‘rel’));
    I call:
    $(obj).change();
    to trigger the select’s onchange event, which is necessary for my application. I think it makes good sense to do this so perhaps you would like to add it to your code ?

    Thanks for the widget, it’s exactly what I was looking for.

    All the best,

    • Hi Bob, Thank you for your contribution, I have updated the script and accredited the bug fix to you :)

  3. Many thanks for this plugin – I found it very useful. I changed only few lines to bind color marked as selected in the select box (rather than the first color):

    from:
    for(var i in colors){
    picker.append(”);
    }
    trigger.css(‘background-color’, ‘#’+colors[0].color);

    to

    for(var i in colors){
    picker.append(”);
    }
    trigger.css(‘background-color’, ‘#’+$(obj).children(“:selected”).text());

    Cheers

    • Hi Nico, Thank you for your contribution, I have updated the script and accredited the bug fix to you :)

  4. Of course some of the code has been removed, so…
    in the line picker.append(”);
    I changed
    i == 0
    to
    colors[i].color == $(obj).children(“:selected”).text()

  5. Ditto on what Bob said about the Change event. It was necessary to trigger another on change event to register the color change elswhere in the page.

    line 90
    $(obj).val($(this).attr(‘rel’)).change();

  6. Hi!

    Nice plugin. First I wanted to suggest a new option, name it e.g. “closeeafterselect”. If it is true, selecting a color should close the picker, just like it works on the original select.
    Then before writing this here, I realized that sometimes the pop-up fades away soon after it appears. It seems that it is too easy to leave the wrapper while moving from the icon to the lower part of the picker. I suggest changing the mouse event bindings. Something like this:
    function create_wrap() should be removed.

    To the end of
    picker.delegate(“.colorpicker-picker-span”, “click”, function() { /* … */

    if (options.closeafterselect) {
    picker.hide(“slow”);
    };

    });

    and insert this at the end of create_picker() before: $(obj).after(picker);

    picker.mouseenter( function () {
    picker.mouseleave( function() {
    picker.fadeOut(‘slow’);
    });
    });

    • I had the same problem as you. The color box would disappear as soon as I would try to hover over it.
      There’s simpler solution.

      In your jquery.colorpicker.css file, look for the class “.colorpicker-wrap” and give it a width of “width: 80px;”. This will solve the problem.
      Reason:
      The JS is set to remove the box as soon as you leave th “.colorpicker-wrap” div. In browsers like Chrome, you have to set the width. As soon as you do that, the problem goes away. Hope it helps.

      • nephren #

        Don’t forget to give it a height. In Firefox 14.0.1 (colorpicker 1.1) need to add “height:30px” or more, becouse when i move mouse to right and down the box disappear.

  7. One more little thing. If you keep the select visible, it should change the trigger’s color in its change event, so at the end of create_trigger() I would put this:
    if (!options.hide) {$(obj).change( function () {trigger.css(“background-color”,”#”+$(obj).val());} )};

  8. Dan #

    Great plugin. Thank you!

    Typo under the listed options. The “scount” parameter should read “count”.

  9. Nice PlugIn, very useful. I tried to set the ‘scount’ parameter in order to increase the number of boxes displayed in a row. Unfortunately it had no effort.

    This is my Code:
    $(‘#picker’).colorpicker({
    size: 20,
    scount: 7,
    label: ‘Color: ‘,
    hide: true
    });
    });

    • Hi Christian,

      This should be working,

      I may have a typo in my code, Ill look into it and get back to you asap.

  10. Is it possible to create a new picker based upon class selector instead of id?

    Example:
    $(‘.line-color’).colorpicker({
    size: 20,
    count: 3,
    label: ‘Color: ‘,
    hide: true
    });

    Right now the behavior is only the last picker is rendered.
    The number of pickers is dynamic in my application and I would like to not loop to create the javascript.

    • Hi Richard,

      I will look into this and get back to you asap.

    • I’d really like to use this plug in the same way (multiple, dynamically-generated pickers per user input screen). Right now only the last picker shows.

  11. Hey, great job with this plugin. I had to hack around with it for a while to get it working the way I wanted – but it was a fantastic baseline. Some of the changes I made were related to those commented about by balazs. The “mouseout” functionality of your plugin is out of whack.

    Also I made it so that colours can have “names”. Because for my app, no one gives a hoot what the hex colour is – they just want something like, “Sky blue”. So my option tags are:

    Banana

  12. Matthew, thanks so much for your contribution, it is just what I need. As of the date of this post, your mouse out feature is still borken. Every time you go to hove over the first color it closes, unless you do it more then 3 times. The tweak balazs offered fixes it.

    If anyone would like to use the “closeafterselect” feature that balazs talked about, then take this code;

    var defaults = {
    label: ”,
    size: 20,
    count: 6,
    hide: true
    };

    And Replace With;

    var defaults = {
    label: ”,
    size: 20,
    count: 6,
    hide: true,
    closeafterselect: true
    };

    If anyone would like to make use of the mod that Mike Murko did (which is exactly what I did), then here is what you do.

    Instead of having options like this;

    FFFFFF

    Change them to this;

    White

    Then change the jquery.colorpicker.js code from this;

    function create_picker() {
    picker.append(info);
    for (var i in colors) {
    picker.append(”);
    }
    trigger.css(‘background-color’, ‘#’+$(obj).children(“:selected”).text());
    info.text(‘#’+$(obj).children(“:selected”).text());
    picker.children(“.colorpicker-picker-span”).hover(function() {
    info.text(‘#’ + $(this).attr(‘rel’));
    }, function() {
    info.text(‘#’ + picker.children(‘.colorpicker-picker-span.active’).attr(‘rel’));
    });
    picker.delegate(“.colorpicker-picker-span”, “click”, function() {
    info.text(‘#’ + $(this).attr(‘rel’));
    $(obj).val($(this).attr(‘rel’));
    $(obj).change();
    picker.children(‘.colorpicker-picker-span.active’).removeClass(‘active’);
    $(this).addClass(‘active’);
    trigger.css(‘background-color’, $(this).css(‘background-color’));
    });

    to this;

    function create_picker(){
    picker.append(info);
    for (var i in colors){
    picker.append(”);
    }
    trigger.css(‘background-color’, ‘#’+$(obj).val());
    info.text(‘#’+$(obj).val());
    picker.children(“.colorpicker-picker-span”).hover(function(){
    info.text(‘#’ + $(this).attr(‘rel’));
    }, function(){
    info.text(‘#’ + picker.children(‘.colorpicker-picker-span.active’).attr(‘rel’));
    });
    picker.delegate(“.colorpicker-picker-span”, “click”, function(){
    info.text(‘#’ + $(this).attr(‘rel’));
    $(obj).val($(this).attr(‘rel’));
    $(obj).change();
    picker.children(‘.colorpicker-picker-span.active’).removeClass(‘active’);
    $(this).addClass(‘active’);
    trigger.css(‘background-color’, $(this).css(‘background-color’));
    });

    Do this before applying balazs closeafterselect mod, if you are doing both.

  13. Great color picker, I especially like that I can choose to select web safe colors only in the picker.

    One question, how do I put multiple instances of the picker on the same page?

    • Mizzle #

      Use unique ID $(‘#yourid’)

      I would like to know how to select an increment ID (unlimited) created dynamically.

      #picker1
      #picker2

  14. I struggled to follow exactly what balazs suggested for the fix, so here is the full code in case anyone would like it:

    (function($) {
    $.fn.extend({
    colorpicker: function(options) {

    //Settings list and the default values
    var defaults = {
    label: ”,
    size: 20,
    count: 6,
    hide: true,
    closeafterselect: true
    };

    var options = $.extend(defaults, options);
    var obj;
    var colors = {};

    var wrap = $(”);
    var label = $(”);
    var trigger = $(”);
    var picker = $(”);
    var info = $(”);
    var clear = $(”);

    return this.each(function() {
    obj = this;

    //build an array of colors
    $(obj).children(‘option’).each(function(i, elm) {
    colors[i] = {};
    colors[i].color = $(elm).text();
    colors[i].value = $(elm).val();
    });

    if (options.label != ”)
    create_label();
    create_trigger();
    create_picker();
    wrap.append(label);
    wrap.append(trigger);
    wrap.append(picker);
    wrap.append(clear);
    $(obj).after(wrap);
    if (options.hide)
    $(obj).css({
    position: ‘absolute’,
    left: -10000
    });
    });

    function create_label() {
    label.text(options.label);
    label.click(function() {
    trigger.click()
    });
    }

    function create_trigger() {
    trigger.click(function() {
    var offset = $(this).position();
    var top = offset.top;
    var left = offset.left + $(this).width() + 5;
    $(picker).css({
    ‘top’: top,
    ‘left’: left
    }).fadeIn(‘slow’);
    if (!options.hide)
    {
    $(obj).change( function ()
    {
    trigger.css(“background-color”,”#”+$(obj).val());
    } )
    };
    });

    }

    function create_picker() {
    picker.append(info);
    for (var i in colors) {
    picker.append(”);
    }
    trigger.css(‘background-color’, ‘#’+$(obj).children(“:selected”).text());
    info.text(‘#’+$(obj).children(“:selected”).text());
    picker.children(“.colorpicker-picker-span”).hover(function() {
    info.text(‘#’ + $(this).attr(‘rel’));
    }, function() {
    info.text(‘#’ + picker.children(‘.colorpicker-picker-span.active’).attr(‘rel’));
    });
    picker.delegate(“.colorpicker-picker-span”, “click”, function() {
    info.text(‘#’ + $(this).attr(‘rel’));
    $(obj).val($(this).attr(‘rel’));
    $(obj).change();
    picker.children(‘.colorpicker-picker-span.active’).removeClass(‘active’);
    $(this).addClass(‘active’);
    trigger.css(‘background-color’, $(this).css(‘background-color’));
    if (options.closeafterselect)
    {
    picker.hide(“slow”);
    };
    });
    picker.mouseenter( function () {
    picker.mouseleave( function() {
    picker.fadeOut(‘slow’);
    });
    });
    $(obj).after(picker);
    }
    }
    });
    })(jQuery);

  15. Tim #

    Hi Matt,

    We use your plugin and very happy with it just wondering what license are you using for this plugin?
    Is it MIT as jquery?

    Thanks

    • I don’t actually have a license on it; Shall we call it; Use as you will? basically there are no terms attached to using this plugin :)

  16. Laurent Destailleur #

    What is the licence of this plugin code ? GPL ?

    • Hmm, I don’t actually have a license on it; Shall we call it; Use as you will? basically there are no terms attached to using this plugin :)

  17. The mouse leave function did not work as expected. The ColorPicker kept fading out while mouse was directly over it preventing any choice so I made a few changes.

    Added a new class:

    .colorpicker-picker-close{
    position:absolute;
    top:-16px;
    right:-16px;
    width:32px;
    height:32px;
    background: url(../images/elements/close.png) no-repeat;

    }

    new function:
    function closepicker(){
    $(‘.colorpicker-picker-close’).click(function() {
    picker.fadeOut(‘slow’);
    });
    }

    called after everything has been created in main function:

    closepicker();

    created in picker function:
    picker.append(“”);

    Then I added in the create trigger function:
    $(‘.colorpicker-picker’).hide();

    That will hide all color pickers before a new one is shown displays a close icon in top right to close the picker;

9 Trackbacks

Leave a Reply





That's Me, I'm a web developer who's main focus is actually Back-end, Specifically PHP development. But every now and then I come up with something awesome for the front-end and this is where I share it!

More updates on Twitter