# Bootstrap Colorpicker 2.3 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

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>

As a component with options given:

    <div class="input-group demo-with-options">
        <input type="text" value="" class="form-control" />
        <span class="input-group-addon"><i></i></span>
    </div>
    <script>
        $(function(){
            $('.demo-with-options').colorpicker({
              color: '#00AABB',
              format: 'hex'
            });
        });
    </script>

Using events to work with the color:

Change background color

Transparent color support:

Horizonal mode:

Inline mode:

Bootstrap colors:

Custom widget size:

    <input type="text" id="demo_size" value="#ffaa00" />

    <style>
        .colorpicker-2x .colorpicker-saturation {
            width: 200px;
            height: 200px;
        }
        .colorpicker-2x .colorpicker-hue,
        .colorpicker-2x .colorpicker-alpha {
            width: 30px;
            height: 200px;
        }
        .colorpicker-2x .colorpicker-color,
        .colorpicker-2x .colorpicker-color div{
            height: 30px;
        }
    </style>

    <script>
        $(function(){
            $('#demo_size').colorpicker({
                customClass: 'colorpicker-2x',
                sliders: {
                    saturation: {
                        maxLeft: 200,
                        maxTop: 200
                    },
                    hue: {
                        maxTop: 200
                    },
                    alpha: {
                        maxTop: 200
                    }
                }
            });
        });
    </script>

Enabled / disabled

Enable Disable

Bootstrap Modal

#### In a Modal

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.
inline | boolean | false | If true, forces to show the colorpicker as an inline element.
sliders | object | [...] | Vertical sliders configuration (read source code if you really need to tweak this).
slidersHorz | object | [...] | Horizontal sliders configuration (read source code if you really need to tweak this).
template | string | [...] | Customizes the default colorpicker HTML template.
align | string | 'right' | By default, the colorpicker is aligned to the right of the input. If you need to switch it to the left, set align to 'left'.
customClass | string | null | Adds this class to the colorpicker widget.
colorSelectors | object | null | List of pre selected colors (hex format). If you choose one of these colors, the alias is returned instead of the hex code.

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

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.
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.
destroy | This event fires immediately when the color picker is destroyed.

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