# Bootstrap Colorpicker 2.3.3 for Twitter Bootstrap

Fancy and customizable colorpicker plugin for Twitter Bootstrap. Originally written by @eyecon and maintained by @mjolnic and the Github community.

Source code Download latest
Tweet

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

## Examples

Simple input field
<input id="cp1" type="text" class="form-control" value="#5367ce" /> <script> $(function() { $('#cp1').colorpicker(); }); </script>
As a component
<div id="cp2" class="input-group colorpicker-component"> <input type="text" value="#00AABB" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> <script> $(function() { $('#cp2').colorpicker(); }); </script>
With custom options
Sample overriding the initial color and format
<div id="cp3" class="input-group colorpicker-component"> <input type="text" value="#00AABB" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> <script> $(function() { $('#cp3').colorpicker({ color: '#AA3399', format: 'rgba' }); }); </script>
Working with events
Change background color
<a href="#" class="btn btn-default" id="cp4">Change background color</a> <script> $(function() { $('#cp4').colorpicker().on('changeColor', function(e) { $('body')[0].style.backgroundColor = e.color.toHex(); }); }); </script>
Transparent color support
<input type="text" class="form-control" id="cp5" /> <script> $(function() { $('#cp5').colorpicker({ color: "transparent", format: "hex" }); }); </script>
Horizontal mode
<input type="text" class="form-control" id="cp6" /> <script> $(function() { $('#cp6').colorpicker({ color: "#88cc33", horizontal: true }); }); </script>
Inline mode
<div id="cp7" class="inl-bl"></div> <style> .inl-bl { display: inline-block; } </style> <script> $(function() { $('#cp7').colorpicker({ color: '#ffaa00', container: true, inline: true }); }); </script>
Aliased color palette
<input type="text" data-format="hex" class="form-control" id="cp8" value="primary" /> <script> $(function() { $('#cp8').colorpicker({ colorSelectors: { 'default': '#777777', 'primary': '#337ab7', 'success': '#5cb85c', 'info': '#5bc0de', 'warning': '#f0ad4e', 'danger': '#d9534f' } }); }); </script>
Customized widget size
Also showing the support of HTML color names
<input id="cp9" type="text" class="form-control" value="pink" /> <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() { $('#cp9').colorpicker({ customClass: 'colorpicker-2x', sliders: { saturation: { maxLeft: 200, maxTop: 200 }, hue: { maxTop: 200 }, alpha: { maxTop: 200 } } }); }); </script>
Disabled / enabled status

Enable Disable

<div id="cp10" class="input-group colorpicker-component"> <input disabled type="text" value="" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> <br> <p> <a class="btn btn-sm btn-default enable-button" href="#">Enable</a> <a class="btn btn-sm btn-default disable-button" href="#">Disable</a> </p> <script> $(function() { $(".disable-button").click(function(e) { e.preventDefault(); $("#cp10").colorpicker('disable'); }); $(".enable-button").click(function(e) { e.preventDefault(); $("#cp10").colorpicker('enable'); }); $('#cp10').colorpicker(); }); </script>
Inside a modal
<button class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal"> Show modal </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div id="cp11" class="input-group colorpicker-component"> <input type="text" value="" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> </div> </div> </div> </div> <script> $(function() { $('#cp11').colorpicker(); }); </script>