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.
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();
