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