- Simple usage
- No jQuery
- No dependencies
- Multiple color representations
- Color comparison
- Opacity control
- Supports touch devices
- Nodejs support
Via npm
$ npm install pickr-widget --save
Link styles and add scripts
<link rel="stylesheet" href="node_modules/pickr-widget/dist/pickr.min.css"/>
<script src="node_modules/pickr-widget/dist/pickr.min.js"></script>
Be sure to load the pickr.min.js
after pickr.min.css
. Moreover the script
tag doesn't work with the defer
attribute.
const pickr = Pickr.create({
el: '.color-picker'
});
const pickr = new Pickr({
// Selector or element which will be replaced with the actual color-picker.
// Can be a HTMLElement.
el: '.color-picker',
// Default color
default: 'fff',
// Option to keep the color picker always visible. You can still hide / show it via
// 'pickr.hide()' and 'pickr.show()'. The save button keeps his functionality, so if
// you click it, it will fire the onSave event.
showAlways: false,
// Defines the position of the color-picker. Available options are
// top, left and middle relativ to the picker button.
// If clipping occurs, the color picker will automatically choose his position.
position: 'middle',
// Show or hide specific components.
// By default only the palette (and the save button) is visible.
components: {
preview: true, // Left side color comparison
opacity: true, // Opacity slider
hue: true, // Hue slider
// Bottom output bar, theoretically you could use 'true' as propery.
// But this would also hide the save-button.
output: {
hex: true, // hex option (hexadecimal representation of the rgb value)
rgba: true, // rgba option (red green blue and alpha)
hsla: true, // hsla option (hue saturation lightness and alpha)
hsva: true, // hsva option (hue saturation value and alpha)
cmyk: true, // cmyk option (cyan mangenta yellow key )
input: true, // input / output element
clear: true // Button which provides the ability to select no color
},
},
// User has changed the color
onChange(hsva, instance) {
hsva; // HSVa color object, if cleared null
instance; // Current Pickr instance
},
// User has clicked the save button
onSave(hsva, instance) {
// same as onChange
}
});
As default color representation is hsva (hue
, saturation
, value
and alpha
) used, but you can also convert it to other formats as listed below.
- hsva.toHSVA() - Converts the object to a hsva string / array.
- hsva.toHSLA() - Converts the object to a hsla string / array.
- hsva.toRGBA() - Converts the object to a rgba string / array.
- hsva.toHEX() - Converts the object to a hexa-decimal string / array.
- hsva.toCMYK() - Converts the object to a cymk string / array.
- hsva.clone() - Clones the color object.
The toString()
is overriden so you can get a color representaion string.
hsva.toRGBA(); // Returns [r, g, b, a]
hsva.toRGBA().toString(); // Returns rgba(r, g, b, a)
- pickr.setHSVA(h
:Number
,s:Number
,v:Number
,a:Float
) - Set an color. - pickr.setColor(string
:String
) - Parses a string which represents a color - pickr.show() - Shows the color-picker.
- pickr.hide() - Hides the color-picker.
- pickr.getRoot()
:HTMLElement
- Returns the root DOM-Element of the color-picker. - pickr.getColor()
:HSVaColor
- Returns the current HSVaColor object.
Pickr
- Pickr.create(options
:Object
):Pickr
- Creates a new instance.
Pickr.utils
- once(element
:HTMLElement
, event:String
, fn:Function
[, options:Object
]) - Attach an event handle which will be fired only once - on(elements
:HTMLElement(s)
, events:String(s)
, fn:Function
[, options:Object
]) - Attach an event handler function. - off(elements
:HTMLElement(s)
, event:String(s)
, fn:Function
[, options:Object
]) - Remove an event handler. - createElementFromString(html
:String
):HTMLElement
- Creates an new HTML Element out of this string. - eventPath(evt
:Event
):[HTMLElement]
- A polyfill for the event-path event propery.
If you want to open a issue, create a Pull Request or simply want to know how you can run it on your local machine, please read the Contributing guide.