Color Picker – jQuery plugin 08Jan, 2011


A simple component to select color in the same way you select color in Adobe Photoshop


  • Flat mode – as element in page
  • Powerful controls for color selection
  • Easy to customize the look by changing some images
  • Fits into the viewport


Flat mode.

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

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

Attached to an 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.

$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
 onSubmit: function(hsb, hex, rgb, el) {
 onBeforeShow: function () {
.bind('keyup', function(){

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

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

Download (89 kb): jQuery, Javscript files, CSS files, images, examples and instructions.

Posted by: Admin / In: JQuery