Color Picker
Control Types

Hue (default)
Saturation
Brightness
Wheel
Input Modes

Text Field
Hidden Input
Inline
Positions

Valid positions include bottom left, bottom right, top left, and top right.


Bottom Left (default)
Top Left
Bottom Right
Top Right
RGB(A)

RGB
RGB input can be assigned by setting the format option to rgb.
RGBA
RGBA input can be assigned by setting the formatoption to rgb and opacity option totrue.
…And More!

Opacity
Opacity can be assigned by including the data-opacityattribute or by setting the opacity option totrue.
Keywords
CSS-wide keywords can be assigned by setting the keywordsoption to a comma-separated list of valid keywords: transparent,initial, inherit.
Default Value
This field has a default value assigned to it, so it will never be empty.
Letter Case
This field will always be uppercase.
Input Groups
Example using Bootstrap's input groups.
Color
Input group example with addon.
Swatches
Example with swatches.
Swatches and Opacity
Example with swatches and opacity.
DashboardKit Customizer
Header settings

Sidebar settings

Layout settings