Color picker

Add color picker to field or to any other element. It can be used as a component, alpha picker and more.

jQuery MiniColors

Control Types

Positions

Input Modes




RGB(A)

RGB input can be assigned by setting the format option to rgb.


RGBA input can be assigned by setting the format option to rgb and opacity option to true.


More Options

Opacity can be assigned by including the data-opacity attribute or by setting the opacity option to true.

This field has a default value assigned to it, so it will never be empty.

Example with swatches.

CSS-wide keywords can be assigned by setting the keywords option to a comma-separated list of valid keywords: transparent, initial, inherit.

This field will always be uppercase.

Example with swatches and opacity.

Spectrum Color Picker

Default Color Picker

Display Color Picker without buttons

Disable / Enable Color Picker


Specify custom button text

Change picker color using custom container color class

Change selector color using custom replacer color class


Clear current color selection

Show color that was set at the time of initialization

Add input to type color code or select any color


Allow color transparency selection

Fully featured color picker example

Color palette will display recently used colors


Show the palettes you specify, and nothing else.

Show a button to toggle the color picker next to the palette.

Color palette will display recently used colors


Preferred Format HEX

Preferred Format HEX3

Preferred Format HSL


Preferred Format RGB

Preferred Format NAME (Falls back to hex)

Preferred Format None (Depends on input - try changing formats with the text box)


Called after the picker is opened

Called as the drag event starts

Called as the user moves around


Basic full size color picker

Display both palette with show/hide picker toggle

Full featured flat picker

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now