Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Colorpicker in jQueryUI style. Themeroller look & feel. Multiple color spaces, input/output formats, controls. Check the demo...
JavaScript HTML CSS

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
i18n
images
.gitignore
README
TODO
index.html
jqcolorpicker.jquery.json
jquery.colorpicker.css
jquery.colorpicker.js

README

jQuery.colorpicker v0.9.7

Copyright (c) 2011-2012 Martijn W. van der Lee
Licensed under the MIT.

Full-featured colorpicker for jQueryUI with full theming support.
Most images from jPicker by Christopher T. Tillman.
Sourcecode created from scratch by Martijn W. van der Lee.

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

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
			color
			border-color
			outline-color

	autoOpen:			false
		If true, the dialog opens automatically upon page load.

	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.

	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
			#HEX3	#123 if possible, otherwise false.
			HEX		112233
			HEX3	123 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']

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

	duration:			'fast'
		Same as jQueryUI DatePicker.

	hsv:				true
		Whether or not to show the inputs for HSV.

	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.
		@todo document how this works.

	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:
		Ensures no other controls on screen can be used while the dialog is
		opened.
		Also look at showCancelButton and closeOnEscape to use in combination
		with the modal option. closeOnOutside is redundant when used with modal.

	mode:				'h'
		Determines the functionality of the map and bar components. Allowed
		values are; 'h', 's', 'l', 'r', 'g', 'b' or 'a', for hue, saturation,
		luminosity, red, green, blue and alpha respectively.

	parts:				''
		Determine which parts to display.
		Use any of the preset names ('full', 'popup' or 'inline') or specify
		an array of part names (i.e. ['header', 'map', 'bar', 'hex', 'hsv',
		'rgb', 'alpha', 'lab', 'cmyk', 'preview', 'swatches', 'footer']).
		If an empty string is given, the parts will be automatically chosen as
		preset 'popup' or 'inline' depending on the context in which the
		colorpicker is used.

	rgb:				true,		// Show RGB controls and modes
		Whether or not to show the inputs for RGB.

	regional:			'',
		Sets the language to use. Note that you must load the appropriate
		language file from the i18n directory. '' is included by default.

	showAnim:			'fadeIn'
		Same as jQueryUI DatePicker.

	showCancelButton:	true
		Show the Cancel button if buttonpane is visible.

	showCloseButton:	true
		Show the Close button if the header is visible.
		If the dialog is inline, the close button is never shown.

	showNoneButton:		false
		Show the None/Revert button if buttonpane is visible.

	showOn:				'focus'
		Same as jQueryUI DatePicker.

	showOptions:		{}
		Same as jQueryUI DatePicker.

	swatches:			null
		'null' to show swatches of HTML colors or provide your own object
		with colornames and {r:1, g:1, b:1} array.
		For example { 'red': {r:1, g:0, b:0}, 'blue': {r:0, g:0, b:1} }

	title:				null
		Title to display in the header. If null, use language default.

Events:
	init:			null
		Triggered on initially setting the color. Called only once.
		Callbacks recieve same data as select event.

	close:			null
		Triggered when the popup is closed.
		Callbacks recieve same data as select event and an additional number
		of fields containing the current color in all supported color spaces.
		These are rgb{}, hsv{}, cmyk{}, lab{}, hsl{} and a.
		Most values are floating point numbers in range [0,1] for accuracy.
		The a and b values in the lab color space have range [-1,1].

	select:			null
		Triggered on each change, confirmation (click on OK button) and
		cancellation (click on Cancel, outside window or window close button)
		respectively.

		The event recieves a jQuery event object and a data object containing
		the elements 'formatted' (with the color formatted according to
		formatColor).

		Note that select may be triggered in rapid succession when dragging
		the mouse accross the map or bar and may be triggered without a change
		in color upon specific user interactions.

Methods:
	open
		Open the dialog

	close
		Close the dialog

	destroy
		Destroy the widget

	setColor
		Set the current color to the specified color. Accepts any
		CSS-confirmant color specification.
Something went wrong with that request. Please try again.