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

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

    Inline mode:

    Horizonal mode:

    Enabled / disabled


    Enable Disable
    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.
    disabled boolean false the initial state of the colorpicker
    container jQuery Element false specify this value to put the colorpicker in a standalone component
    horizontal boolean false whether to render the colorpicker selectors in horizontal mode

    Markup

    Component mode

    <div class="input-group colorpicker-component my-colorpicker-control" data-color="rgb(255, 146, 180)" data-disabled="true" 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('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();
});