# Bootstrap Colorpicker 2.0 for Twitter Bootstrap

Colorpicker plugin for the Twitter Bootstrap toolkit. Originally written by @eyecon and maintained in Github by @mjolnic 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

## Examples

1) Attached to a field with hex format specified via options:

    <input type="text" class="demo1" value="#5367ce" />
    <script>
        $(function(){
            $('.demo1').colorpicker();
        });
    </script>

As a component:

    <div class="input-group demo2">
        <input type="text" value="" class="form-control" />
        <span class="input-group-addon"><i></i></span>
    </div>
    <script>
        $(function(){
            $('.demo2').colorpicker();
        });
    </script>

Using events to work with the color:

Change background color

Horizonal mode:

Inline mode:

Enabled / disabled

Enable Disable
Destroy plugin instances Create instances again

## Documentation

Call the colopicker via javascript:

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

### Options

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

Name | Type | Default | Description
--- | --- | --- | ---
format | string | false | If not false, forces the color format to be hex, rgb or rgba, otherwise the format is automatically detected.
color | string | false | If not false, sets the color to this value.
container | string or jQuery Element | false | If not false, the picker will be contained inside this element, otherwise it will be appended to the document body.
component | string or jQuery Element | '.add-on, .input-group-addon' | Children selector for the component or element that trigger the colorpicker and which background color will change (needs an inner <i> element).
input | string or jQuery Element | 'input' | Children selector for the input that will store the picker selected value.
horizontal | boolean | false | If true, the hue and alpha channel bars will be rendered horizontally, above the saturation selector.
template | string | [...] | Customizes the default colorpicker HTML template.

(behind this line, docs need to be updated)

### 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('disable')

Disable the color picker.

#### .colorpicker('enable')

Enable 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 useful 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 colorpicker 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.
disable | This event is fired immediately when the color picker is disabled, except if it was initialized as disabled.
enable | This event is fired immediately when the color picker is enabled, except upon initialization.
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();
    });