Get started with these basic examples, showcasing the different plugin options. You can also view the whole list of default options here.
Simple usage
Most simple example, with any options or color information.
Setting the initial color
The initial color can be specified in 3 ways: input value, data-color attribute
and programmatically with the color constructor option.
This demo is also showing how to use the input addon component to display the color.
The used initial color has this precedence order when present and not empty: color option, input value, input data-color attribute, colopicker element data-color attribute.
Automatic format detection
Whenever the format
option is 'auto', the first parsed color format will be
detected and used as default, but when the option equals null (default),
the format is recalculated every time.
You can see the differences here, one of them allowing you to adjust the alpha channel:
Force a format
If defined, the format option forces an specific format, ignoring the original one.
Disabled / Enabled states
When the input is disabled, the colorpicker also gets disabled.
Horizontal mode
In this mode the hue and alpha bars are horizontal instead of vertical.
Inline containerized mode
In this mode the colorpicker widget is an inline element and it is also placed inside the
element (otherwise it is placed in the body).
This example also shows the two ways of using the container option.
Disable alpha channel
When the alpha channel is disabled with the useAlpha
option,
the alpha bar will be hidden and the color object will be restricted to opaque (alpha = 1).
Disable hexadecimal hash
This example shows how to avoid the input to have the hexadecimal hash prefix,
using the useHashPrefix
option.
transparent
support
Example showing the transparent named color support.
Use a custom fallback color
Use a predefined fallback color with the fallbackColor
option,
whenever the given one is invalid.
Disable invalid color auto replacement
By default, the autoInputFallback
option is enabled, meaning that
whenever there is an invalid color typed in the input, it will be automatically
replaced by a valid color or the fallback one.
You can stop this behavior by setting this option to false. Note that this only affects the input
value and not the internal color object.
This allows you introduce errors in the input while typing without having the input constantly replaced with
the fallback.
This way, the internal color object will be equal to the fallback until the input has a valid color.
Disable HEX change from #RGB to #RRGGBB
By default, if the autoInputFallback
option is enabled, even when you will
change input to HEX3 (#RGB), it will automatically convert to hex6 (#RRGGBB)
You can stop this by setting this option to false. That way, when someone will type
color to input, that is identified as HEX color, it will convert to #RRGGBB only if it will
be a valid HEX6 color.
Adjust the popover options
You can use any Bootstrap Popover options (except: trigger, content and html) using the "popover" property in the colorpicker options.