Pickr – Flat, Simple, Responsive and Hackable Color-Picker


With Pickr you will receive a modern, powerful, flat and really simple Color Picker, written in plain vanilla JavaScript. It doesn’t require ANY dependencies, except when you’re want to support the Internet Explorer (11+). Visit [this issue](https://github.com/Simonwep/pickr/issues/36) if this is the case on your project. The script itself is really lightweight, just 7KB gzipped, thanks to the orientation to modern browsers.

The library is available for the browser as well as AMD, UMD, ES and nodeJS module. It also supports Touch Devices and multiple color representations. You can also control the Opacity / Alpha Channel from the respective Color.

Download the latest version of Pickr as .ZIP or as .TAR package!

npm i pickr-widget --save

yarn add pickr-widget --save


The package itself contains the main Stylesheet as well as the main JavaScript. Both files are only available as minified version, but the JavaScript file comes also with an own Source Map. You can still visit the GitHub Repository, which contains the normal version as well as SCSS-Preprocessed Stylesheets.


Load Pickr

It’s recommended to load the Stylesheet within the header of your HTML document. The best location for the JavaScript file is immediately after the opened <body> tag. The library doesn’t require any further dependencies (on modern browsers, of course)!

<!DOCTYPE html>
        <meta charset="utf-8" />
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/pickr.min.css" />
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/pickr.min.js"></script>


Configure Pickr

The script offers some settings to configure the design and the behavior of the respective Pickr instances. It also has some public methods and converter functions, which are documented on the official GitHub repository!

document.addEventListener("DOMContentLoaded", {
    var new Pickr({
        el:                     ".color-picker",
        useAsButton:            false,
        disabled:               false,
        comparison:             true,
        default:                "fff",
        defaultRepresentation:  "HEX",
        showAlways:             false,
        parent:                 null,
        closeWithKey:           "Escape",
        position:               "middle",
        adjustableNumbers:      true,
        components: {
            preview:    true,
            opacity:    true,
            hue:        true,
            interaction: {
                hex:    true,
                rgba:   true,
                hsla:   true,
                hsva:   true,
                cmyk:   true,
                input:  true,
                clear:  true,
                save:   true
            strings: {
                save:   "Save",
                clear:  "Clear"
        onChange:               function(hsva, instance){ }
        onSave:                 function(hsva, instance){ }


Configure: Options

Selector or element which will be replaced with the actual color-picker. (Can also be a HTMLElement object instance)
Using the ‘el’ Element as button, won’t replace it with the pickr-button. If true, appendToBody will also be automatically true.
Start state. If true ‘disabled’ will be added to the button’s classlist.
If set to false it would directly apply the selected color on the button and preview.
The default color.
The default color reporesentation. Valid options are `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK`.
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.
Defines a parent for pickr, if useAsButton is true and a parent is NOT defined ‘body’ will be used as fallback.
Close pickr with this specific key. The Default is ‘Escape’. Can be the event key or code.
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.
Enables the ability to change numbers in an input field with the scroll-wheel. To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five.
Show or hide specific components. By default only the palette (and the save button) is visible.
Left side color comparison.
Opacity slider.
Hue Slider.
Bottom interaction bar, theoretically you could use ‘true’ as propery. But this would also hide the save-button.
HEX Option: Hexadecimal representation of the rgba value.
RGBA Option: Red, Green, Blue and Alpha values.
HSLA Option: Hue, Saturation, Lightness and Alpha values.
HSVA Option: Hue, Saturation, Value and Alpha values.
CMYK Option: Cyan, Magenta, Yellow and Key value.
Input / Output element.
Button which provides the ability to select no color.
Save button element.
Default string for the save button.
Default string for the clear button.
Callback which calls everytime when the user changes the color.
Callback which calls everytime when the user “saves” the color.

Leave a Reply