# jQuery Colorpicker

# jQuery ColorPicker - Demo page

- Basic <input>
- Basic element
- All features
- Localization
- Websafe colors
- Alternative display field
- Events
- Input formatting
- Output formatting
- Output format list
- In a dialog
- Modal
- Any element to popup
- Custom layout
- Custom swatches
- Custom swatches - array
- Hidden input
- Plugins
- buttonImageOnly
- Revert
- Close on enter
- 128-pixel map and bar
- Custom color format
- Centered in window
- Disable/enable
- No show animation

## 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

Enabled:

## 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

Enabled:
Disabled by default:
Disabled using option:

## No show animation