About

Add color picker to field or to any other element.

  • can be used as a component
  • alpha picker
  • multiple formats: hex, rgb, rgba, hsl, hsla

Download

Change log

11/4/2013
Fixed bug where no value was passed to the methods.
29/9/2012
Fixed issues on IE7-8 when using alpha
Fixed issue when clicking on the preview
Updated the docs with information about the color object

Example

Attached to a field with hex format specified via options.

Attachet to a field with the rgba format specified via data tag.

As component.

Using events to work with the color.


Using bootstrap-colorpicker.js

Call the colopicker via javascript:

$('.colorpicker').colorpicker()

Options

Name type default description
format string 'hex' the color format - hex | rgb | rgba.

Markup

Format a component.

<div class="input-append color" data-color="rgb(255, 146, 180)" data-color-format="rgb">
  <input type="text" class="span2" value="" >
  <span class="add-on"><i style="background-color: rgb(255, 146, 180)"></i></span>
</div>

Methods

.colorpicker(options)

Initializes an colorpicker.

.colorpicker('show')

Show the color picker

.colorpicker('hide')

Hide the color picker

.colorpicker('place')

Updates the color picker's position relative to the element

.colorpicker('setValue', value)

Set a new value for the color picker. Triggers 'changeColor' event.

Color object methods

Each triggered events have a color object used internally by the picker. This object has several usefull 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

Colopicker class exposes a few events for manipulating the colors.

Event Description
show This event fires immediately when the color picker is displayed.
hide This event is fired immediately when the color picker is hidden.
changeColor This event is fired when the color is changed.
$('.colorpicker').colorpicker().on('changeColor', function(ev){
  bodyStyle.backgroundColor = ev.color.toHex();
});

Hosted by MediaSecure

eyecon.ro is using cookies to personalise content and ads, to provide social media features and to analyse our traffic. I also share information about your use of my site with my social media, advertising and analytics partners.See details

By continuing to browse the site you are agreeing to my use of cookies. ? Continue