# Colorpicker for Twitter Bootstrap bootstrap-colorpicker

## About

Colorpicker plugin for the Twitter Bootstrap toolkit. Originally written by @eyecon and maintained in Github by @mjaalnir and the community
It basically adds a color picker to a field or any other element.

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

Fork me on Github Download

Tweet

### ChangeLog from the master branch

## Examples

Attached to a field with hex format specified via options.

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

As a component.

Using events to work with the color.

Change background color
Destroy plugin instances Create instances again

## Using bootstrap-colorpicker.js

Call the colopicker via javascript:

    $('.my-colorpicker-control').colorpicker()

### Options

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

### Markup

Component mode

    <div class="input-group colorpicker-component my-colorpicker-control" data-color="rgb(255, 146, 180)" data-color-format="rgb" id="cp3">
        <input type="text" value="" readonly class="form-control" />
        <span class="input-group-addon"><i style="background-color: rgb(255, 146, 180)"></i></span>
    </div>

### Methods

#### .colorpicker(options)

Initializes an colorpicker.

#### .colorpicker('show')

Show the color picker

#### .colorpicker('update')

Refreshes the widget colors (this is done automatically)

#### .colorpicker('hide')

Hide the color picker

#### .colorpicker('place')

Updates the color picker's position relative to the element

#### .colorpicker('destroy')

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

#### .colorpicker('setValue', value)

Set a new value for the color picker (also for the input or component value). 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

The colopicker plugin exposes some events (with optional .colorpicker namespace)

Event | Description
--- | ---
create | This event fires immediately when the color picker is created.
showPicker | This event fires immediately when the color picker is displayed.
hidePicker | This event is fired immediately when the color picker is hidden.
changeColor | This event is fired when the color is changed.
destroy | This event fires immediately when the color picker is destroyed.

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