jQuery ColorPicker

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)

Open dialog

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

Hidden input

Uses a hidden input and buttons to pop open the colorpicker
Open

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

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.