Flat, Simple, Hackable Color-Picker.
Fully Featured demo
Features
- Simple usage
- No jQuery
- No dependencies
- Multiple color representations
- Color comparison
- Opacity control
- Supports touch devices
- Nodejs support
- Lightweight, 8KB gzipped
Install
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.
Usage
const pickr = Pickr.create({
el: '.color-picker'
});
Optional options
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,
// If the color picker should have the body element as it's parent.
appendToBody: false,
// Close pickr with this specific key.
// Default is 'Escape'. Can be the event key or code.
closeWithKey: 'Escape',
// 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 rgba 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
},
},
// Button strings, brings the possibility to use a language other than English.
strings: {
save: 'Save', // Default for save button
clear: 'Clear' // Default for clear button
},
// 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
}
});
The HSVaColor object
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 array.
- hsva.toHSLA() - Converts the object to a hsla array.
- hsva.toRGBA() - Converts the object to a rgba array.
- hsva.toHEX() - Converts the object to a hexa-decimal array.
- hsva.toCMYK() - Converts the object to a cymk 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)
Methods
- pickr.setHSVA(h
:Number
,s:Number
,v:Number
,a:Float
, silent:Boolean
) - Set an color. - pickr.setColor(string
:String
, silent:Boolean
) - Parses a string which represents a color (e.g.#fff
,rgb(10, 156, 23)
).
If silent
is true (Default is false), the button won't change the current color.
- pickr.show() - Shows the color-picker.
- pickr.hide() - Hides the color-picker.
- pickr.isOpen() - Returns true if the color picker is currently open.
- pickr.getRoot()
:HTMLElement
- Returns the root DOM-Element of the color-picker. - pickr.getColor()
:HSVaColor
- Returns the current HSVaColor object. - pickr.destroy()
:HSVaColor
- Destroy's all functionality. - pickr.destroyAndRemove()
:HSVaColor
- Destroy's all functionality, moreover it removes the pickr element including the button.
Static methods
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. - removeAttribute(el
:HTMLElement
, name:String
) - Removes an attribute from a HTMLElement and returns the value. - createFromTemplate(str
:String
) - See inline doumentation
Contributing
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.