a-color-picker

Install

npm install a-color-picker --save
bower install a-color-picker --save
a-color-picker is available on jsdelivr

Create a picker

Define an HTML element to contain the picker and use AColorPicker.from(selector) to create it.
The default picker is created with HSL, RGB and HEX controls.
The acp-color attribute is used to set the initial value.

See the Pen WJoQBm by Caldi Gianfranco ( @narsenico) on CodePen.

Choose which controls to show

Show or hide controls through attributes.
acp-show-* attributes accepts yes/no/true/false values. Attributes without value are considered true.

See the Pen a-color-picker demo attr by Caldi Gianfranco ( @narsenico) on CodePen.

Palette

Show a palette of colors using the acp-palette attribute.
Set a list of colors - named color, hex rgb, rgb(), rgba(), hsl(), hsla() - pipe separated or a predefined palette (PALETTE_MATERIAL_500, PALETTE_MATERIAL_CHROME).
The acp-palette-editable attribute can be set to allow the user to change the palette.

See the Pen a-color-picker demo palette editable by Narsenico ( @narsenico) on CodePen.

Events

To attach an event use on method and off to detach it.

AColorPicker.from(selector)
    .on(eventName, callback)
    .off(eventName, callback)

Event name	Callback parameters
change	`picker`	target
change	`color`	selected color
coloradd	`picker`	target
coloradd	`color`	color added
colorremove	`picker`	target
colorremove	`color`	color removed or null if all colors are removed

Tips

Click on the preview circle to copy current color
Shift-click on a palette color to remove it
Shift-click the '+' button to remove all the palette colors

API

AColorPicker.createPicker(element, options)
AColorPicker.createPicker(options)

Create a color picker.

Parameter
element	HTMLElement, jQuery object or css selector string. Optional: if not defined, `options.attachTo` is used.
options	See options Optional only if element is defined.
Return
A ACPController instance

AColorPicker.from(selector, options)

Create one or more color pickers.

Parameter
selector	HTMLElement, NodeList, jQuery object or css selector string.
options	Optional, see options
Return
An array of ACPController. This array has helper methods `on` and `off` to attach/detach events to all items.

AColorPicker.parseColor(color, outFormat)

Parse color in input and return formatted value.

Parameter
color	Value to be parsed Accepts color name, rgb array, hex rgb, rgb(), rgba(), hsl(), hsla()
outFormat	Output format, one of: rgb, rgbcss, rgbcss4, rgba, rgbacss, hsl, hslcss, hslcss4, hsla, hslacss, hex, hexcss4. If outFormat is a plain object, will be filled with all formats as properties.
Return
Formatted color or `undefined` if not recognized. AColorPicker.parseColor("red"); // return [255, 0, 0] AColorPicker.parseColor("red", "rgb"); // return [255, 0, 0] AColorPicker.parseColor("red", "rgbcss"); // return "rgb(255, 0, 0)" AColorPicker.parseColor("red", "rgbcss4");// return "rgb(255, 0, 0, 1)" AColorPicker.parseColor("red", "rgba"); // return [255, 0, 0, 1] AColorPicker.parseColor("red", "rgbacss");// return "rgba(255, 0, 0, 1)" AColorPicker.parseColor("red", "hsl"); // return [0,100,50] AColorPicker.parseColor("red", "hslcss"); // return "hsl(0, 100, 50)" AColorPicker.parseColor("red", "hslcss4");// return "hsl(0, 100, 50, 1)" AColorPicker.parseColor("red", "hsla"); // return [0, 100, 50, 1] AColorPicker.parseColor("red", "hslacss");// return "hsla(0, 100, 50, 1)" AColorPicker.parseColor("red", "hex"); // return "#ff0000" AColorPicker.parseColor("red", "hexcss4");// return "#ff0000ff" AColorPicker.parseColor("red", { });// return { "rgb":[255,0,0], ... }

ACPController

Can access picker properties and handle events.

Property		Type
color	Get or set the current color	String\|Array	Accept: named color, hex rgb, rgb(), rgba(), hsl(), hsla()
	Get or set the current color	String\|Array	Return: hex rgb or rgba() if alpha != 1
	// set picker.color = [205, 220, 57]; // [R, G, B] picker.color = [205, 220, 57, .5]; // [R, G, B, A] picker.color = "yellow"; // named color picker.color = "#ffdd00"; // hex rgb picker.color = "#ffdd00ff"; // hex rgba picker.color = "#fd0"; // short hex rgb picker.color = "#fd0f"; // short hex rgba picker.color = "rgb(205, 220, 57)"; // rgb() notation picker.color = "rgb(205, 220, 57, .5)"; // rgb() notation + alpha (css level 4) picker.color = "rgba(205, 220, 57, .5)"; // rgba() notation picker.color = "hsl(120, 100, 125)"; // hsl() notation picker.color = "hsl(120, 100, 125, .5)"; // hsl() notation + alpha (css level 4) picker.color = "hsla(120, 100, 125, .5)"; // hsla() notation // get picker.color; // return "#ffdd00" picker.color; // return "rgba(205, 220, 57, .5)" if alpha is != 1 // formatting color (see parseColor for detail) AColorPicker.parseColor(picker.color, "hsl"); // return "hsl(120, 100, 125)"
palette	Get or set the current palette	Array	Array of colors
palette	`// set picker.palette = ['red', '#00ff00', 'rgb(0, 0, 255)']; // array of color // get picker.palette; // return ["#ff0000","#00ff00","#0000ff"]`
Function		Parameters
on	Attach an event to the controller.	eventName	See events for detail
	Attach an event to the controller.	callback	See events for detail
	`picker.on("change", (picker, color) => { });`
off	Detach an event from the controller.	eventName	See events for detail
off	`picker.off("change");`
show	Show the picker.
show	`picker.show();`
hide	Hide the picker.
hide	`picker.hide();`
toggle	Show or hide the picker.
toggle	`picker.toggle();`
setColor	Set current color	color	Same of 'color' property
	Set current color	silent	If true the change event will not be triggered
	`picker.setColor("red", true); // change event not triggered` `picker.setColor("red", false); // change event triggered` `picker.setColor("red"); // change event triggered`

options

Property		Type	Default
attachTo	Where to attach the picker top element, can be HTMLElement, jQuery object or css selector	String\|Object	body
showHSL	If falsy hide the HSL inputs	Boolean	true
showRGB	If falsy hide the RGB inputs	Boolean	true
showHEX	If falsy hide the RGB HEX inputs	Boolean	true
showAlpha	If truly show control to change opacity	Boolean	false
color	Initial color	Boolean	#ff0000
palette	Array of predefined colors. Each element can be color name, rgb array, hex rgb, rgb(), rgba(), hsl(), hsla()	Array	null
paletteEditable	If truly make the palette editable	Boolean	false
useAlphaInPalette	If truly enable alpha channel in palette colors, if 'auto' depends on the value of 'showAlpha'	String\|Boolean	auto
hueBarSize	Size of hue bar in pixel (width, height)	Array	[150,11]
slBarSize	Size of saturation/luminance canvas in pixel (width, height)	Array	[232,150]