Colorpicker for Bootstrap bootstrap-colorpicker.js

About

Add color picker to field or to any other element.

• can be used as a component
• alpha picker
• multiple formats: hex, rgb, rgba, hsl, hsla

Download

Change log

11/4/2013

Fixed bug where no value was passed to the methods.

29/9/2012

Fixed issues on IE7-8 when using alpha

Fixed issue when clicking on the preview

Updated the docs with information about the color object

Example

Attached to a field with hex format specified via options.

Attachet to a field with the rgba format specified via data tag.

As component.

Using events to work with the color.

---

Using bootstrap-colorpicker.js

Call the colopicker via javascript:

$('.colorpicker').colorpicker()

Options

Name	type	default	description
format	string	'hex'	the color format - hex | rgb | rgba.

Markup

Format a component.

<div class="input-append color" data-color="rgb(255, 146, 180)" data-color-format="rgb">
  <input type="text" class="span2" value="" >
  <span class="add-on"><i style="background-color: rgb(255, 146, 180)"></i></span>
</div>

Methods

.colorpicker(options)

Initializes an colorpicker.

.colorpicker('show')

Show the color picker

.colorpicker('hide')

Hide the color picker

.colorpicker('place')

Updates the color picker's position relative to the element

.colorpicker('setValue', value)

Set a new value for the color picker. Triggers 'changeColor' event.

Color object methods

Each triggered events have a color object used internally by the picker. This object has several usefull methods.

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

.setLightness(value)

Set the lightness 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

Colopicker class exposes a few events for manipulating the colors.

Event	Description
show	This event fires immediately when the color picker is displayed.
hide	This event is fired immediately when the color picker is hidden.
changeColor	This event is fired when the color is changed.

$('.colorpicker').colorpicker().on('changeColor', function(ev){
  bodyStyle.backgroundColor = ev.color.toHex();
});