Colorpicker is a simple widget that allows the user to choose any sort of colors in a photoshop-like dialog.

Get the latest version right here

All the source code of the project is available under terms of the MIT license

For some standard usage examples see the demo page


top ↑Features List

  • Works as a standalone widget
  • Works in pair with input fields
  • Can automatically update another element’s background
  • Simple and flexible usage

top ↑Usage Basics

First, copy in place one of the files above, as you usually do. Then copy this image to the same location on your server. (check the styles section for more options on this regard)

After that the usage principles are pretty much the same as for the Calendar widget. You can use it as an inline widget by inserting it at any place on your page

<div id="my-element"></div>

new Colorpicker().insertTo('my-element');

Or you can assign it to an input element to make it work in pair with it

<input type="text" id="my-field" />

new Colorpicker().assignTo('my-field');

You also can use an input-field and a trigger pair like that

<input type="text" id="my-field" />
<input type="image" id="trigger" />

new Colorpicker().assignTo('my-field', 'trigger');

And you can let the script automatically initialize and assign pickers by using the standard for RightJS HTML5 attribute data-colorpicker

// a single inputfield with colorpicker
<input type="text" data-colorpcker="" />
<input type="text" data-colorpcker="{format: 'rgb'}" />

// an input field with a trigger
<input type="text" id="my-field" />
<input type="image" data-colorpicker="{update: 'my-field'}" />

NOTE: you can use any sort of elements for the trigger, it doesn’t have to be an input element.

top ↑Options List

There is a small and simple list of options available for this widget

format‘hex’the output format, 'hex' or 'rgb'
updatenullan element to update with the color text
updateBgnullan element to update it’s background color
triggernulla trigger element reference
fxName‘fade’the popup showing/hiding visual effect
fxDuration‘short’the visual effect duration
cssRule’*[data-colorpicker]’the auto initialization feature css-rule

As usual you can use any of those options with the Colorpicker class constructor or use the data-colorpicker HTML5 attribute to set options for the automatically initialized fields

top ↑Events List

There is a short list of events available to be used with this widget

changewhen the color was changed
showwhen the popup show action was called
hidewhen the popup hide action was called
donewhen the Done button was clicked

top ↑API Reference

There are several additional public methods available to help you work with colorpickers

setValue(color)sets the current color, can be in the HEX or RGB format
getValue()returns the current color string formatted by the options
toRgb()returns the current color in the RGB format
toHex()returns the current color in the HEX format
assignTo(element[, trigger])assigns the colorpicker as a popup dialog
updateBg(element)assigns the element’s background to be automatically updated

top ↑Style Alterations

The colorpicker widget has the following HTML structure

<div class="rui-colorpicker rui-panel">
<div class="field">
<div class="pointer"></div>
<div class="colors">
<div class="pointer"></div>
<div class="controls">
<div class="preview"></div>
<input type="text" class="display" />
<div class="rgb-display">
<div><label>R:</label><input type="text" /></div>
<div><label>G:</label><input type="text" /></div>
<div><label>B:</label><input type="text" /></div>
<input type="button" class="rui-button" />

NOTE: This widget needs this image, you should save it at the same location in your project, or define another one in your CSS layer like that

div.rui-colorpicker div.field,
div.rui-colorpicker div.field div.pointer,
div.rui-colorpicker div.colors,
div.rui-colorpicker div.colors div.pointer {
background-image: url(/my/image.png);