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

Pickr

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

Instructions

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>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/pickr.min.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/pickr.min.js"></script>
    </body>
</html>

 

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

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

Leave a Reply

Top