Bootstrap Colorpicker 2.5.2 for Twitter Bootstrap

Documentation

Call the colopicker via javascript:

$('.sample-selector').colorpicker({ /*options...*/ });

Options

You can set colorpicker options either as a plugin parameter or data-* attributes

jQuery API Methods

General usage methods

.colorpicker(options)

Initializes an colorpicker.

.colorpicker('getValue', defaultValue)

Gets the value from the input or the data attribute (if has no input), otherwise returns the default value, which defaults to #000000 if not specified.

.colorpicker('setValue', value)

Set a new value for the color picker (also updates everything). Triggers 'changeColor' event.

.colorpicker('show')

Show the color picker

.colorpicker('hide')

Hide the color picker

.colorpicker('reposition')

Updates the color picker's position relative to the element

.colorpicker('update')

Refreshes the widget colors (this is done automatically)

.colorpicker('enable')

Enable the color picker.

.colorpicker('disable')

Disable the color picker.

.colorpicker('destroy')

Destroys the colorpicker widget and unbind all .colorpicker events from the element and component

.data('colorpicker')

Access to the colorpicker API directly

.data('colorpicker').color

Access to the colorpicker Color object information

Color object methods

Each triggered events have a color object (avaliable through event.color, see the example at the bottom) used internally by the picker. This object has several useful methods. These are the more commonly used:

.setColor(value)

Set a new color. The value is parsed and tries to do a quess on the format.

.setHue(value)

Set the HUE with a value between 0 and 1.

.setSaturation(value)

Set the saturation with a value between 0 and 1.

.setBrightness(value)

Set the brightness with a value between 0 and 1.

.setAlpha(value)

Set the transparency with a value between 0 and 1.

.toRGB()

Returns a hash with red, green, blue and alpha.

.toHex()

Returns a string with HEX format for the current color.

.toHSL()

Returns a hash with HSLA values.

Events

The colorpicker plugin exposes some events

Examples