<p align="center"><img src="images/logotype-a.png"></p> <p align="center">A full-featured colorpicker for jQueryUI with full theming support.</p>

Most images from jPicker by Christopher T. Tillman. Sourcecode created from scratch by Martijn W. van der Lee.

Features

jQueryUI (themeroller-based) look & feel
Familiar interface layout
Highly configurable
- Control parts
- Layout
- Input/output formats
- Swatches
- Many more
Accurate color model
Supports localization
- English, Dutch, French, etc.
- Easily translatable (https://www.transifex.com/projects/p/jquery-colorpicker/)
Smart window alignment
Complete API with events and methods
Easily extendable with plugins
- Many examples included: RGB-Sliders with CSS gradients, Per-user cookie memory for colors.
Documented
Limited Unit tests (QUnit-based)
Disable/enable
Keyboard support

Requirements

jQuery 1.7.1 or higher required (will not work with v1.6 or before).

jQueryUI 1.8.0 or higher required.

For jQuery 3.0.0 or higher, you must use jQueryUI 1.12.0 or higher.

IE support; make sure you have a doctype defined, or the colorpicker will not display correctly.

Installation

With npm: npm install vanderlee-colorpicker

With yarn: yarn add vanderlee-colorpicker

With bower (deprecated): bower install colorpicker

Zip archive: https://github.com/vanderlee/colorpicker/archive/master.zip

jQueryUI custom build

If you download a custom build of jQueryUI, you need these components:

Dialog (includes Core, Widget, Mouse, Position, Draggable and Resizable)
Fade Effect (only if you use the showAnim option, includes Effects Core)

To use the parts/jquery.ui.colorpicker-rgbslider.js plugin, you must add:

Slider (includes Core, Widget and Mouse)

To use the demo page included in the documentation, you must add:

Tabs (includes Core and Widget)

Browser support

Tested various versions of this plugin with the following browsers:

Chrome 31-54
FireFox 25-48
Opera 17-39
Internet Explorer 10-11
Edge 20-25

Keyboard support

You can use the arrow keys to move the cursors on the map and bar controls. Steps are measures in on-screen pixels.

Holding the shift key while using the arrow keys takes steps 10x larger. Pressing the page down and page up keys does the same for vertical movement.

Holding the ctrl key while using the arrow keys takes you to the edges. Pressing the home and end keys does the same for vertical movement.

Documentation

`.colorpicker(options)`

Turns an element into a colorpicker.

Options

alpha (false)

Whether or not to show the inputs for alpha.

altAlpha (true)

Change the opacity of the altField element(s) according to the alpha setting.

altField ('')

Change the background color of the elements specified in this element.

altOnChange (true)

If true, the altField element(s) are updated on every change, otherwise only upon closing.

altProperties (background-color)

Comma-separated list of CSS properties to set color of in the altField. The following properties are allowed, all others are ignored.

background-color
border-color
color
fill
outline-color
stroke

autoOpen (false)

If true, the dialog opens automatically upon page load.

buttonClass (null)

If this option is set to a string, the button will be assigned the class specified.

buttonColorize (false)

If a buttonImage is specified, change the background color of the image when the color is changed.

buttonImage ('images/ui-colorpicker.png')

Same as jQueryUI DatePicker.

buttonImageOnly (false)

Same as jQueryUI DatePicker.

buttonText (null)

Same as jQueryUI DatePicker. If null, use language default.

cancelOnExit (false)

If true, the value is reverted to the original one on exit.

closeOnEscape (true)

Close the window when pressing the Escape key on the keyboard.

closeOnOutside (true)

Close the window when clicking outside the colorpicker display.

color ('#00FF00')

Initial color. Formats recognized are:

#rrggbb
rrggbb (same as previous, but without the #)
rgb(rrr,ggg,bbb)
rgba(rrr,ggg,bbb,a.a)
rgb(rrr%,ggg%,bbb%)
rgba(rrr%,ggg%,bbb%,aaa%)
w3c-defined color name

colorFormat ('HEX')

Specifies the format of the color string returned in callbacks. You can either specify one of the predefined formats:

#HEX #112233 (#RRGGBB)
#HEX3 #123 (#RGB) if possible, otherwise false.
HEX 112233 (RRGGBB)
HEX3 123 (RGB) if possible, otherwise false.
#HEXA #11223344 (#RRGGBBAA)
#HEXA4 #1234 (#RGBA) if possible, otherwise false.
HEXA 11223344 (RRGGBBAA)
HEXA4 1234 (RGBA) if possible, otherwise false.
RGB rgb(123,45,67) if opaque, otherwise false.
RGBA rgba(123,45,67,0.123%)
RGB% rgb(12%,34%,56%) if opaque, otherwise false.
RGBA% rgba(12%,34%,56%,0.123%)
HSL hsl(123,45,67) if opaque, otherwise false.
HSLA hsla(123,45,67,0.123%)
HSL% hsl(12%,34%,56%) if opaque, otherwise false.
HSLA% hsla(12%,34%,56%,0.123%)
NAME Closest color name
EXACT Exact name if possible, otherwise false.

or specify your own format... Each color channel is specified as a pair of two characters. The first character determines the color channel:

a Alpha
r, g, b RGB color space; red, green and blue
h, s, v HSV color space; hue, saturation and value
c, m, y, k CMYK color space; cyan, magenta, yellow and black
L, A, B LAB color space; Luminosity, *A and *B.

The second character specifies the data type:

x Two-digit hexadecimal notation.
d Decimal (0-255) notation.
f Floating point (0-1) notation, not rounded.
p Percentage (0-100) notation, not rounded.

If you prefix a valid pair with a backslash, it won't be replaced. All patterns are case sensitive. For example, to create the common hex color format, use "#rxgxbx". For an rgba() format, use "rgba(rd,gd,bd,af)"

You can also specify an array of formats where the first non-FALSE one is returned. Note that the only formats able to return FALSE are the predefined formats HEX3 and EXACT. For example, this array will output HEX3 format if possible or HEX format otherwise:

['HEX3', 'HEX']

disabled (false)

Disable or enable the colorpicker and all it's controls by setting this option.

If you disable the input using the disabled HTML attribute before attaching a colorpicker, it will automatically be disabled.

You can change this option using the option method call.

draggable (true)

Make the dialog draggable if the header is visible and the dialog is not inline.

containment (null)

If the dialog is draggable, constrains dragging to within the bounds of the specified element or region. Same as jQueryUI Draggable.

duration ('fast')

Same as jQueryUI DatePicker.

hideOn ('button')

Specifies what user events will hide the colorpicker if not inline. Specify multiple events by separating with space.

focus When the element goes out of focus (either tab or click)
click When the element is clicked (for non-inputs)
alt When clicking on an element specified with as altField
button When clicking on the button created if this event is specified.
all selects all possible triggers
both same as all (deprecated, kept backwards compatibility)

hsv (true)

Whether or not to show the inputs for HSV.

inline (true)

If set to false, attaching to a non-input will still make the dialog a popup instead of inline. Make sure you handle events to catch the color change, otherwise you can't use the color.

inlineFrame (true)

If enabled, shows a border and background when inline. Disabling may allow closer integration.

layout ({ ... })

Set the position of elements in a table layout. You could create any layout possible with HTML tables by specifying cell position and size of each part.

The layout option takes a map (object) with each property name matching one of the available parts (including any possible custom or plugin parts). The value is a an array with four coordinates on order [left, top, width, height].

The coordinates correspond to cells in a table, so if you want to have a part at top-left and spanning two rows and three columns, the value would be [0, 0, 3, 2].

Care should be taken to ensure no parts overlap (best to just draw out a grid on paper first). Behavior is undefined if parts overlap. You need not cover the entire rectangular area; any empty cells will be simply remain empty.

The default layout is as follows:

{
	map:		[0, 0, 1, 5],
	bar:		[1, 0, 1, 5],
	preview:	[2, 0, 1, 1],
	hsv:		[2, 1, 1, 1],
	rgb:		[2, 2, 1, 1],
	alpha:		[2, 3, 1, 1],
	hex:		[2, 4, 1, 1],
	lab:		[3, 1, 1, 1],
	cmyk:		[3, 2, 1, 2],
	swatches:	[4, 0, 1, 5]
}

limit ('')

Limit the selectable colors to any of the predefined limits:

'' No limitations, allow 8bpp color for a palette of all 16 million colors.
websafe Set of 216 colors composed of 00, 33, 66, 99, cc and ff color channel values in #rrggbb.
nibble 4 bits per color, can be easily converted to #rgb format. The palette is limited to 4096 colors.
binary Allow only #00 or #ff as color channel values for primary colors only; only 8 colors are available with this limit.
name Limit to closest color name.

modal (false)

Ensures no other controls on screen can be used while the dialog is opened. Also look at showCancelButton and closeOnEsca

Colorpicker

Install / Use

README

Features

Requirements

Installation

jQueryUI custom build

Browser support

Keyboard support

Documentation

`.colorpicker(options)`

Options

alpha (false)

altAlpha (true)

altField ('')

altOnChange (true)

altProperties (background-color)

autoOpen (false)

buttonClass (null)

buttonColorize (false)

buttonImage ('images/ui-colorpicker.png')

buttonImageOnly (false)

buttonText (null)

cancelOnExit (false)

closeOnEscape (true)

closeOnOutside (true)

color ('#00FF00')

colorFormat ('HEX')

disabled (false)

draggable (true)

containment (null)

duration ('fast')

hideOn ('button')

hsv (true)

inline (true)

inlineFrame (true)

layout ({ ... })

limit ('')

modal (false)