Elegant Mobile-compatible Color Picker Component – pickr

Category: Color , Javascript , Recommended | February 14, 2019
Author: Simonwep
Views Total: 1,597
Official Page: Go to website
Last Update: February 14, 2019
License: MIT


Elegant Mobile-compatible Color Picker Component – pickr


The pickr JavaScript library helps you create an elegant, customizable, touch-enabled color picker for your app.

Supports HEX, RGB, HSL, HSV, CMYK color formats and alpha channel.

Also provides a function that converts the default color values (HSVa) to HSLa, RGBa, HEX and CMYK values.

Supports both browser and node.js.

How to use it:

Install the pickr.

$ npm install pickr-widget --save

Add the pickr’s JavaScript and Stylesheet to the page.

<link href="dist/pickr.min.css" rel="stylesheet">
<script src="dist/pickr.min.js"></script>

Create a container element to place the color picker.

<div class="example"></div>

Initialize the pickr to generate a default color picker.

const pickr = new Pickr({
      el: '.example',
      default: '#42445A' // default color

Customize the position of the color picker when triggered.

const pickr = new Pickr({
      el: '.example',
      default: '#42445A',
      position: 'middle', // or 'top', 'left'

Customize the color picker component.

const myPickr = new Pickr({

      el: '.example',
      components: {

        // color preview
        preview: true,

        // enables opacity slider
        opacity: true,

        // enables HUE slider
        hue: true,     // Hue slider

        // shows/hides controls
        output: {
          hex: true,
          rgba: true,
          hsla: true,
          hsva: true,
          cmyk: true, 
          input: true


Available color converters.


Available options.

const pickr = new Pickr({

  // Selector or element which will be replaced with the actual color-picker.
  // Can be a HTMLElement.
  el: '.color-picker',

  // Using the 'el' Element as button, won't replace it with the pickr-button.
  // If true, appendToBody will also be automatically true.
  useAsButton: false,

  // Start state. If true 'disabled' will be added to the button's classlist.
  disabled: false,

  // If set to false it would directly apply the selected color on the button and preview.
  comparison: true,

  // 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 a parent for pickr, if useAsButton is true and a parent is NOT defined
  // 'body' will be used as fallback.
  parent: null,

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

  // 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
  adjustableNumbers: true,

  // 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 interaction bar, theoretically you could use 'true' as propery.
      // But this would also hide the save-button.
      interaction: {
          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,
          save: true   // Save button

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

API methods.

// sets a color

// parses a string

// shows the color picker

// hides the color picker

// disables the color picker

// enables the color picker

// checks if is ipen

// returns the root DOM element

// returns the current HSVa color

// destroy the color picker

// destroy the color picker and remove it from DOM

Callback functions.

const pickr = new Pickr({
      el: '.example',
      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



  • v0.3.5: Small fix


  • v0.3.4: Small layout fix


  • v0.3.3


  • More space between swatches


  • Add basic color swatches


  • Fix unexpected calling of onUpdate in init


  • v0.3.2: Fix issues with too late applied styles


  • v0.3.1: Fix invisible checkboard pattern if ancestor background set; Adjust css so that non-existing elements doesn’t take space


  • v0.3.0: Change to touchstart and mousdown events to detect blur; Update dependencies


  • v0.2.5: Remove appendToBody option; Add parent option; Fix broken mobile input and negative number overflow


  • v0.2.4: Fix delayed color-recalculation; Fix ignored move action in moveable; Remove basically useless function binding


  • v0.2.3: Prevent recalculation on user input and some refactoring; Fix broken useAsButton option


  • v0.2.2: Refactor helper classes to factory functions; Fix hsva representation and missing snipped in moveable; Only round color values on output; Use factory function for hsvacolor class


  • v0.1.7: Fixed Opening page on <iframe> prevents color picker modal to show on mobile devices; minor improvements, smaller code; add enable and disable functions; Fix losting focus on first input bug; Append save-button option to components


  • v0.1.6


  • v0.1.5: Add support for rtl attribute; bugfix


  • v0.1.4: Add support for rtl attribute


  • Add possibility to apply custom button strings


  • v0.1.3


  • v0.1.2: Add appendToBody option; Mask invalid characters in data URI’s;  Add parsing of hex representation with alpha channel

You Might Be Interested In:

Leave a Reply