colr_pickr.js | Creating an Easy-to-use Color Picker with JavaScript and SVG

colr_pickr.js is an easy-to-use javascript color picker based on javascript and svg. It allows us to create a web color picker and get color value easily in web applications.

colr_pickr.js - Creating an Easy-to-use Color Picker with JavaScript and SVG

AuthorLinksMade withLast update
R-TEKOffice HomeJavaScriptSep 18, 2020

How to create web color picker using colr_pickr.js?

1.Install colr_pickr.js

# NPM
$ npm i @r-tek/colr_pickr --save

2.Import colr_pickr.js.

import pickr from '@r-tek/colr_pickr';

Or load colr_pickr.js and colr_pickr.css in your web page

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

3.Create a button to triggle the color picker.

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

4.Create a ColorPicker instance with default options or default color value

Default options

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

Default color value

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

5.You can change the color by colorChange()

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

6.You also can add an event to a button to detect color changing

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

7.You also can get all saved custom colors by getCustomColors()

const savedColor = colorPickerComp.getCustomColors();

Leave a Reply

Your email address will not be published. Required fields are marked *