Flat, simple and hackable Color-Picker. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize.
JavaScript CSS HTML
Switch branches/tags
Clone or download
Latest commit 2bae74e Jun 18, 2018



Flat, Simple, Hackable Color-Picker.

License MIT Webpack No dependencies Build Status npm package Current version


Fully Featured demo


  • 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'

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,

    // 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

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 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.

Static methods


  • Pickr.create(options:Object):Pickr - Creates a new instance.


  • 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.