- a jQuery color picker

Zero configuration!

The color picker automatically picks up the CSS color of the element it is attached to, if no color is given as a configuration parameter.

HSL(A) colors

The default color space is HSLA (hue, saturation, lightness, alpha). The default color can be given, either as a hexadecimal string, or as an object containing the color component values.

RGB(A) colors and static sliders

The common RGBA (red, green, blue, alpha) space is of course also supported.

Some people prefer that the slider backgrounds does not dynamically update based on the current color. This option is also available for the HLS(A) color space, but it is not recommended from a usability standpoint.

Customizable UI

Per default, jColor sports a minimalistic UI, but it can easily be augmented with labels and textual color output.

Output formats and color change events

The currently selected color can be output in various formats, and it is always possible to specify color space. Whenever the user picks a new color, a 'newcolor' jQuery event is triggered. This makes it super easy to update other page elements, based on the user selected color! The current color can also be accessed by calling any of the following.


With just a few lines of CSS, the entire appearance of the color picker can be altered. Internally, all sizes are set in the 'em' unit.

Customized expand/collapse events

The expanding and collapsing of the color picker can be customized by providing jQuery event strings. Note that it is possible to pass several events in the same string!


Creating and destroying a color picker works in the same way as most jQuery plugins.