jQuery.colorpicker

Colorpickers are nothing new. There are several colorpickers available for use on the web already. Most work well and are stable and all possible features you want is supported already.

So why bother with a new colorpicker? Because none of them combines all the features I wanted. The features I was looking for were:

  • JavaScript
    This includes just about all colorpickers. There are probably a few Java ones out there, and perhaps even a VB one, but JavaScript is really the only programming language that matters client side.
  • HSV support
    Because HSV is a lot more intuitive visually than RGB. Most colorpickers support HSV mode and some are even HSV only.
  • Alpha support
    HTML supports transparency, so should a colorpicker. Few colorpickers actually support alpha though.
  • PhotoShop-like layout
    Many people will already be familiar with the PhotoShop style colorpicker. It’s copied by many other graphics applications and it’s used on all platforms. The Photoshop colorpicker layout is about as universally recognizable as possible. Most JS colorpickers seem to re-invent the wheel here. Don’t. It’s a user interface. User interfaces should feel like you’ve used it a thousand times before from the very first time you see it.
  • jQuery
    jQuery is one of the most used JavaScript frameworks and it’s the one I use. I could have gone pure JavaScript, but frameworks make life easier and chances are you’re already using it anyway. If you’re a user of Prototype or MooTools, this colorpicker probably isn’t the one you want (though I understand it should be possible).
  • jQueryUI
    Most jQuery colorpickers also use jQueryUI in some way, except…
  • jQueryUI themes
    This is the weird thing about all those colorpickers. Many use jQuery and jQueryUI. Very rarely does one actually look & feel like a core jQueryUI component. Don’t get me wrong, I’m not a big fan of themeroller themes (though with a little bit of effort, they’re easy to fix) but atleast they make all the UI components look the same. I prefer to have my web applications look like a single application rather than cobbled together.

Initially I started looking into converting jPicker, as it included most of the features I was looking for except jQueryUI support) but it turned out to be far less accommodating than I had hoped, thus was born jQuery.colorpicker. Even though none of the code from jPicker was used, jQuery.colorpicker does use many of it’s images and the general method of overlaying them to achieve the flexible color map. Partial credit also goes to Doug (cjboco on github) for a fair number of essential contributions/bugfixes to the code.

Besides the above mentioned features, you also get the following:

  • jQueryUI API
    Special care has been taken to match the API to core jQueryUI components as much as possible. Visual design is based on DatePicker and the API matches the DatePicker API wherever possible. This means you’ll already be familiar with most of the API features.
  • Highly configurable layout
    jQuery.colorpicker is using an experimental layout system which allows you to rearrange and hide/show all individual parts of the user interface with relative easy. i.e. Hide the titlebar (default), buttons, the bar or perhaps the hex display. Documentation for this is currently a bit sparse as the system is still in active development.

Get it!

You can see a working copy of the current version on GitHub: http://vanderlee.github.com/colorpicker/

Download the latest code from GitHub: https://github.com/vanderlee/colorpicker

Please note that the code is still regularly updated, so things are still changing rapidly. Code on GitHub should be stable at all times. If you want to help get colorpicker to a stable state, then please donate your time, bug reports, code, kind words, harsh criticism or anything else at github or as a comment to this page. Any feedback is appreciated, especially if you can contribute to the project  itself!

Manual (v0.6)

IE support; make sure you have a doctype defined, or the colorpicker will not display correctly.

Options

  • alpha: false
    Whether or not to show the inputs for alpha.
  • altAlpha: true
    Change the opacity of the altField element(s) according to the alpha setting.
  • altField: ”
    Change the background color of the elements specified in this element.
  • altOnChange: true
    If true, the altField element(s) are updated on every change, otherwise only upon closing.
  • autoOpen: false
    If true, the dialog opens automatically upon page load.
  • buttonColorize: false
    If a buttonimage is specified, change the background color of the image when the color is changed.
  • buttonImage: ‘images/ui-colorpicker.png’
    Same as jQueryUI DatePicker.
  • buttonImageOnly: false
    Same as jQueryUI DatePicker.
  • buttonText: ‘Color’
    Same as jQueryUI DatePicker.
  • closeOnOutside: true
    Close the window when clicking outside the colorpicker display.
  • color: ‘#00FF00’
    Initial color. Formats recognized are:

    • #rrggbb
    • rrggbb (same as previous, but without the #)
    • rgb(rrr,ggg,bbb)
    • rgba(rrr,ggg,bbb,a.a)
    • rgb(rrr%,ggg%,bbb%)
    • rgba(rrr%,ggg%,bbb%,aaa%)
    • w3c-defined color name
  • duration: ‘fast’
    Same as jQueryUI DatePicker.
  • hsv: true
    Whether or not to show the inputs for HSV.
  • layout: { … }
    Set the position of elements in a table layout. You could create any layout possible with HTML tables by specifying cell position and size of each part.
    @todo document how this works.
  • limit: ”
    Limit the selectable colors to any of the predefined limits:


    • No limitations, allow 8bpp color for a palette of all 16 million colors.
    • ‘websafe’
      Set of 216 colors composed of 00, 33, 66, 99, cc and ff color channel values in #rrggbb.
    • ‘nibble’
      4 bits per color, can be easily converted to #rgb format. The palette is limited to 4096 colors.
    • ‘binary’
      Allow only #00 or #ff as color channel values for primary colors only; only 8 colors are available with this limit.
  • mode: ‘h’ Determines the functionality of the map and bar components. Allowed values are; ‘h’, ‘s’, ‘l’, ‘r’, ‘g’, ‘b’ or ‘a’, for hue, saturation, luminosity, red, green, blue and alpha respectively.
  • parts: ”
    Determine which parts to display. Use any of the preset names (‘full’, ‘popup’ or ‘inline’) or specify an array of part names (i.e. [‘header’, ‘map’, ‘bar’, ‘hex’, ‘inputs’, ‘preview’, ‘swatches’, ‘footer’]). If an empty string is given, the parts will be automatically chosen as preset ‘popup’ or ‘inline’ depending on the context in which the colorpicker is used.
  • rgb: true
    Show RGB controls and modes Whether or not to show the inputs for RGB.
  • showAnim: ‘fadeIn’
    Same as jQueryUI DatePicker.
  • showOn: ‘focus’
    Same as jQueryUI DatePicker.
  • showOptions: {}
    Same as jQueryUI DatePicker.
  • swatches: null
    ‘null’ to show swatches of HTML colors or provide your own object with colornames and [r,g,b] array. For example { ‘red’: [ 255, 0, 0 ], ‘blue’: [0, 0, 255] }
  • title: ‘Pick a color’
    Title to display in the header.

Events

  • onClose: null
    Triggered when the popup is closed.
  • onSelect: null
    Triggered on each change, confirmation (click on OK button) and cancellation (click on Cancel, outside window or window close button) respectively. Note that onSelect may be triggered in rapid succession when dragging the mouse accross the map or bar and may be triggered without a change in color upon specific user interactions.

Methods

  • open
    Open the dialog
  • close
    Close the dialog destroy Destroy the widget

18 Responses

  1. jQuery.colorpicker » Martijn van der Lee
    jQuery.colorpicker » Martijn van der Lee · November 29, 2011 at 21:34:38 · →

    […] jQuery.colorpicker […]

  2. Rob
    Rob · January 20, 2012 at 05:00:24 · →

    Great plugin, check this color picker out as well: http://www.websanova.com/plugins/websanova/color-picker

  3. David
    David · October 2, 2012 at 07:03:19 · →

    20x better than the others I’ve seen! Thanks!

  4. bill
    bill · March 19, 2013 at 03:18:26 · →

    This is a great colorpicker, but how can I set the color from, say, a button? I can set the value of the input it’s attached to, but how do I actually change the colorpicker’s value?

  5. Padmaja
    Padmaja · August 22, 2013 at 15:18:00 · →

    Hi, Thanks for the wonderful color picker. I tried to use your color picker. It works as you given. The color palette is opened when click on the text itself. But first the text should be selected and then the color should be applied from the color picker which should be placed on the top as a dialog box. Please help me.

    Here is my code JSFiddle link: http://jsfiddle.net/6V7hL/74/

  6. harry
    harry · November 18, 2013 at 12:21:19 · →

    does not work in IE10 because of comments starting //@
    please rename them

  7. Troy Blakely
    Troy Blakely · November 21, 2013 at 03:04:25 · →

    I am trying to use your plugin with button elements that are created by Ext.JS. The way ext creates a button is kind of odd, the id of the button is actually assigned to a table surrounding the button. In any case, I can add an onClick event listener to the the button. How to I open the colorpicker directly through javascript code? I have tried a bunch of variations of $.colorpicker.open() with no luck.

  8. thomas hill
    thomas hill · January 11, 2014 at 18:32:11 · →

    Looks promising, but getColor() and setColor() don’t work!

  9. Syborg
    Syborg · February 13, 2014 at 14:18:00 · →

    @Troy Blakely :
    use $(‘.color-picker’).colorpicker(‘open’);

    Many of options are like the Datepicker jQuery UI widget.
    But I recognize the documentation needs more examples 🙁

  10. saeid
    saeid · April 9, 2014 at 00:09:47 · →

    hi
    I’m beginner in jquery.colorpicker
    I want to convert an rgb or rgba color cmyk by this plugin
    but I dont understand how ??

  11. saeid
    saeid · April 9, 2014 at 00:12:32 · →

    oh sorry I had a misspelling in my previuos comment.

    I wanted to said I want to convert an rgb or rgba color to cmyk color by this plugin.

    how ??

  12. Matt
    Matt · June 27, 2014 at 22:26:20 · →

    Can you give a code example on how to call the setColor() method? Thanks!

  13. mahboob
    mahboob · February 6, 2016 at 13:28:31 · →

    Hi how can i rgb color of selected color?

  14. mahboob
    mahboob · March 6, 2016 at 09:26:16 · →

    n you give a code example on how to call the setColor() method? Thanks!

  15. Bas
    Bas · June 16, 2016 at 21:35:17 · →

    Hi Martijn,
    Is it posible to use 2 colorpickers at one page and how can i to that?
    Kr Bas

Leave a Reply