npm install a-color-picker --save
bower install a-color-picker --save
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.
Show or hide controls through attributes.
acp-show-*
attributes accepts yes/no/true/false
values. Attributes without value are considered true
.
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.
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 |
color | selected color | |
coloradd | picker | target |
color | color added | |
colorremove | picker | target |
color | color removed or null if all colors are removed |
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. |
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() |
Return: hex rgb or rgba() if alpha != 1 | |||
| |||
palette | Get or set the current palette | Array | Array of colors |
| |||
Function | Parameters | ||
on | Attach an event to the controller. | eventName | See events for detail |
callback | |||
| |||
off | Detach an event from the controller. | eventName | See events for detail |
| |||
show | Show the picker. | ||
| |||
hide | Hide the picker. | ||
| |||
toggle | Show or hide the picker. | ||
| |||
setColor | Set current color | color | Same of 'color' property |
silent | If true the change event will not be 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] |