Header Code

Color Picker – jQuery plugin 08Jan, 2011

About

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

Features

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

Examples

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) {
  $(el).val(hex);
  $(el).ColorPickerHide();
 },
 onBeforeShow: function () {
  $(this).ColorPickerSetColor(this.value);
 }
})
.bind('keyup', function(){
 $(this).ColorPickerSetColor(this.value);
});

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

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

Download

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

Posted by: Admin / In: JQuery
Cam