A repository of over 1000 quality jQuery plugins

jQuery JQuery ColorPicker

JQuery ColorPicker is a jQuery Color Pickers plugin.

Created by Belelros

This is yet another colorpicker plugin for jQuery since most of them are not on GitHub nor being mantained at the moment.

Not what you're looking for? Click here to view more Color Pickers jQuery plugins


This is yet another colorpicker plugin for jQuery since most of them are not on GitHub nor being mantained at the moment.

The plugin is a fork of the one developed by Stefan Petre who seems not to be interested in it anymore. I needed a powerfull colorpicker for one of my projects so I updated it and then thought it would be nice if it would were freely available.

You can see the demo now.


  • Flat model - as element in page, attached to an input and custom widget.
  • Powerful controls for color selection
  • Easy to customize the look by changing some images
  • Fits into the viewport
  • Powerful callback system to totally control the way it works


The plugin is currently dual licensed under the MIT and GPL licenses.


Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.

    <link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />  
    <script src="js/colorpicker.js"></script>

How to use

All you have to do, is to select the elements in a jQuery way and call the plugin over them.



An object containing parameters. Please, note that all parameters are optional.

eventName (string): This is the desired event to trigger the colorpicker. Default: 'click'

color (string or object): The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'

flat (boolean): Whether if the color picker is appended to the element or triggered by an event. Default false

livePreview (boolean): Whether if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true

onShow (function): Callback function triggered when the colorpicker is shown

onBeforeShow (function) Callback function triggered before the colorpicker is shown

onHide (function): Callback function triggered when the colorpicker is hidden

onChange (function): Callback function triggered when the color is changed

onSubmit (function): Callback function triggered when the color is chosen


If you want to set a new color.


The 'color' argument is the same format as the option color, string for hex color or object for RGB and HSB ({r:255, r:0, b:0}).


Flat mode

    $('#colorpickerholder').ColorPicker({flat: true});  

Custom skin and using flat mode to display the color picker in a custom widget.

        flat: true,  
        color: '#EFEFEF',  
        onSubmit: function(hsb, hex, rgb) {  
            $('#colorselector div').css('backgroundColor', '#' + hex);  

Attached to a text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.

        onSubmit: function(hsb, hex, rgb, el, parent) {  
        onBeforeShow: function () {  
    .bind('keyup', function(){  

Attached to DOM and using callbacks to live preview the color and adding animation.

        color: '#EFEFEF',  
        onShow: function (colpkr) {  
            return false;  
        onHide: function (colpkr) {  
            return false;  
        onChange: function (hsb, hex, rgb) {  
            $('#colorselector2 div').css('backgroundColor', '#' + hex);  


I would like to thank to everybody that keeps mantaining this ColorPicker. By far, these people have been added/fixed something to this:

You might also like these other Color Pickers jQuery Plugins

  • colorpicker

    evol.colorpicker is a web color picker which looks like the one in Microsoft Office 2010. It can be used inline […]

  • Color Thief

    Grabs the dominant color or a representative color palette from an image. Uses javascript and canvas.

  • Brackets Color Picker

    Color picker for Brackets (based on jQuery ColorPicker plugin)


# Annotator licensing terms