# Bootstrap Colorpicker 2.5.1 for Twitter Bootstrap

Fancy and customizable colorpicker plugin for Twitter Bootstrap. Originally written by Stefan Petre and maintained by Javi Aguilar 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.
hexNumberSignPrefix | boolean | true | If true, put a '#' (number sign) before hex strings.
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.
fallbackColor | string | null | Fallback color string that will be applied when the color failed to be parsed. If null, it will keep the current color if any.
fallbackFormat | string | hex | Fallback color format (e.g. when not specified or for alias mode, when selecting non aliased colors)

### 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: 'rgb' }); }); </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.toString( 'rgba'); }); }); </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
<div id="cp8" data-format="alias" class="input-group colorpicker-component"> <input type="text" value="primary" class="form-control" /> <span class="input-group-addon"><i></i></span> </div> <script> $(function() { $('#cp8').colorpicker({ colorSelectors: { 'black': '#000000', 'white': '#ffffff', 'red': '#FF0000', '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>