Press "Enter" to skip to content

Simple and Responsive Color Picker Component | pickr

ColorPicker Library is a flat, simple, multi-feature, responsive, and touch-enabled color picker for your app. It also provides a function that converts default color values (HSVa) to HSLa, RGBa, HEX and CMYK values.

Supports HEX, RGB, HSL, HSV, CMYK and Alpha Channel color formats.

How to make use of it:

Install the pickr.

# NPM
$ npm install pickr-widget --save

Add the pickr’s JavaScript to the web page.

<script src="dist/pickr.min.js"></script>

Add a theme CSS to the web page – color picker from the screen.

<link href="themes/classic.min.css" rel="stylesheet">
<link href="themes/monolith.min.css" rel="stylesheet">
<link href="themes/nano.min.css" rel="stylesheet">

Create a container component to position 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 part.

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.

hsva.toHSVA()
hsva.toHSLA()
hsva.toRGBA()
hsva.toHEX() 
hsva.toCMYK()
hsva.clone()

Available options to customize the color picker.

const pickr = new Pickr({

  // custom classes
  appClass: null,

  // 'classic', 'monolith' or 'nano'
  theme: 'classic',

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

  // Padding in pixels
  padding: 8,

  // i18n
  i18n: {
    // Strings visible in the UI
    'ui:dialog': 'color picker dialog',
    'btn:toggle': 'toggle color picker dialog',
    'btn:swatch': 'color swatch',
    'btn:last-color': 'use previous color',
    'btn:save': 'Save',
    'btn:cancel': 'Cancel',
    'btn:clear': 'Clear',

    // Strings used for aria-labels
    'aria:btn:save': 'save and close',
    'aria:btn:cancel': 'cancel and close',
    'aria:btn:clear': 'clear and close',
    'aria:input': 'color input field',
    'aria:palette': 'color selection area',
    'aria:hue': 'hue selection slider',
    'aria:opacity': 'selection slider'
  },

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

  // Valid options are `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK`.
  defaultRepresentation: null,

  // Precision of output string (only effective if components.interaction.input is true)
  outputPrecision: 0,

  // move pickr in a non-alpha mode
  lockOpacity: false,

  // auto reposition the color picker to fit the screen
  autoReposition: true,

  // e.g. ['#F44336', '#E91E63', '#9C27B0', '#673AB7']
  swatches: null,

  // Enables inline mode
  inline: false,

  // 'v' => opacity- and hue-slider can both only moved vertically.
  // 'hv' => opacity-slider can be moved horizontally and hue-slider vertically.
  sliders: null,

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

  // Closes the picker on scroll
  closeOnScroll: 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 strategies.

// sets a color
myPickr.setHSVA(h,s,v,a)

// parses a string
myPickr.setColor(string)

// get selected color
myPickr.getSelectedColor()

// shows the color picker
myPickr.show()

// hides the color picker
myPickr.hide()

// disables the color picker
myPickr.disable()

// enables the color picker
myPickr.enable()

// checks if is ipen
myPickr.isOpen()

// returns the root DOM element
myPickr.getRoot():HTMLElement

// returns the current HSVa color
myPickr.getColor()

// destroy the color picker
myPickr.destroy()

// destroy the color picker and remove it from DOM
myPickr.destroyAndRemove()

// Changes the current color-representation. Valid options are HEX, RGBA, HSVA, HSLA and CMYK,
myPicker.setColorRepresentation(type:String);

// Saves the color
myPicker.applyColor(silent:Boolean);

// Adds a color to the swatch palette
myPicker.addSwatch(color:String);

// Removes a color from the swatch palette
myPicker.removeSwatch(index:Number);

Event handlers.

myPicker.on('init', instance => {
    console.log('init', instance);
}).on('save', (color, instance) => {
    console.log('save', color, instance);
}).on('change', (color, instance) => {
    console.log('change', color, instance);
}).on('swatchselect', (color, instance) => {
    console.log('swatchselect', color, instance);
}).on('clear', (instance) => {
    console.log('clear', instance);
}).on('cancel', (instance) => {
    console.log('cancel', instance);
}).on('hide', (instance) => {
    console.log('hide', instance);
}).on('show', (instance) => {
    console.log('show', instance);
}).on('changestop', (instance) => {
    console.log('changestop', instance);
});

Elegant Mobile-compatible Color Picker, Color-Picker Plugin/GitHub


See Demo And Download

Official Website(Simonwep): Click Here

This superior jQuery/javascript plugin is developed by Simonwep. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.