jQuery ColorPicker - Demo page

Basic <input> example, without any options

Basic element (<span>> example, without any options

Fully-featured example

Localized to Dutch (nl)

Limit to websafe colors

Alternative field class

Background-color on outside, text color here

Events

Output formatting HSLA

Output format list

You can specify a list of output formats, the first perfect match for the color is output.

Dialog with Colorpicker popup (demonstrates z-index)

Basic <input> example, without any options:
Basic element example, without any options:

Modal (and showCancelButton, closeOnEscape, showCloseButton)

Input formatting

Demonstrates the ability to parse common color formats as input.

Popup from any element (<em>)

Just click on this Emphasized word to show the colorpicker.

Custom layout

It's easy to arrange a new layout for the dialog. Especially handy when used in a sidebar.

Custom swatches

Use the Pantone PMS colors as swatches

Custom swatches - array

Use an array of swatches

Hidden input

Uses a hidden input and buttons to pop open the colorpicker

Plugins

Demonstrates how to extend the set of parts with plugins.
  1. RGB Slider - Individual RGB sliders
  2. Memory - Store and retrieve colors with cookies
  3. Swatches Switcher - Switch between different sets of swatches

Only a button image


Revert color on non-button exit.

Reverts the color on escape, clickOnOutside or close window using the [X] button.

Open the Colorpicker, change color and click outside window, press ESC key or click the [X] button in the header. The dialog should now close and the previous color restored in the input.

Close OK on enter

Close the popup by pressing the enter key, keeping the selected color.

128-pixel map and bar

Custom color format

Centered using position option

Disable/enable


Disabled by default:
Disabled using option:

No show animation