Color Picker^ADDON Bootstrap Colorpicker is a modular color picker plugin for Bootstrap

Most simple example, with any options or color information.

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.

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:

If defined, the format option forces an specific format, ignoring the original one.

When the input is disabled, the colorpicker also gets disabled.

In this mode the hue and alpha bars are horizontal instead of vertical.

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

The colorpicker ColorItem class uses and comes bundled with Qix Color, a great color parsing library with a friendly API that allows you to manipulate and convert the color. ColorItem is just an abstraction layer on top of the library, which is more convenient for Bootstrap Colorpicker. In this example we use the ColorItem API to add color swatches based on a tetrad of the selected color

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.

This example shows how to avoid the input to have the hexadecimal hash prefix, using the useHashPrefix option

Example showing the transparent named color support

Use a predefined fallback color with the fallbackColor option, whenever the given one is invalid

Panel tag code

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 use any Bootstrap Popover options (except: trigger, content and html) using the "popover" property in the colorpicker options

You can use any Bootstrap Popover options (except: trigger, content and html) using the "popover" property in the colorpicker options

You can use any Bootstrap Popover options (except: trigger, content and html) using the "popover" property in the colorpicker options