Chrome DevTools Like Color Picker Component – Colr Pickr

Category: Color , Javascript | August 22, 2020
Views Total:379 views
Official Page:Go to website
Last Update:August 22, 2020


Chrome DevTools Like Color Picker Component  – Colr Pickr


An easy-to-use, Chrome DevTools like color picker component built using vanilla JavaScript and SVG.


  • Click/tap the palette to pick a color.
  • Supports popular color formats: HEX, RGBA, and HSLA.
  • Hue and Opacity sliders.
  • Allows to save the selected colors in the local using local storage.
  • Responsive and touch/mobile-friendly.

How to use it:

1. Install and import the Colr Pickr.

$ npm i @r-tek/colr_pickr --save
import pickr from '@r-tek/colr_pickr';

2. Or load the necessary files from the build folder.

<link rel="stylesheet" href="build/colr_pickr.css" />
<script src="build/colr_pickr.js"></script>

3. Create a trigger element to launch the color picker.

<button id="trigger">Launch The Color Picker</button>

4. Initialize the color picker with default options.

const button = document.getElementById('trigger');
let picker = new ColorPicker(button);

5. Or initialize the color picker with an initial color.

const button = document.getElementById('trigger');
let picker = new ColorPicker(button, '#f7f7f7');

6. Pick a color programmatically.

picker.colorChange('#00ffff', button);

7. Fire an event when the color changes.

button.addEventListener('colorChange', function (event) {
  const color = event.detail.color;

8. Gets an array of all the saved custom colors.

const savedColor = colorPickerComp.getCustomColors();


v1.2.0 (08/22/2020)

  • Add function to get an array of saved colors
  • Made functions belong to an object instead of them being global
  • Added animation when opening the color picker
  • Fixed issues that arise when color is not set when the color picker instance is initiated

You Might Be Interested In:

Leave a Reply