Color Picker, a vanilla JavaScript Colr Pickr component built with SVGs, with features like colour saving. Design similar to chrome-dev-tools. An easy-to-use, Chrome DevTools like colour picker part constructed utilizing vanilla JavaScript and SVG.
Features:
- Drag the interactive color picker for the easy-to-use color finder, including the Saturation and Lightness box, the Hue slider, and the Opacity slider.
- Reads and outputs HEX, RGB, HSL, HEXA, RGBA, and HSLA color values.
- Save the custom colors for reuse when returning to the color picker.
- Full touch support.
- The file size is 4 KB, which means a superfast component of your app.
- It works on all major browsers.
- Flat, modern design interface, inspired by google chrome dev-tools color picker.
Modular Color Picker Plugin for Bootstrap | BS Colorpicker
How to make use of it:
1. Install and import the Colour Picker.
# NPM $ npm i @r-tek/colr_pickr --save
import pickr from '@r-tek/colr_pickr';
2. Load the mandatory records data from the construct
folder.
<link rel="stylesheet" href="build/colr_pickr.css"> <script src="build/colr_pickr.js"></script>
3. Create a set of the component to launch the colour picker.
<button id="trigger">Launch The Color Picker</button>
4. Initialize the colour picker with default choices.
const button = document.getElementById('trigger'); let picker = new ColorPicker(button);
5. Initialize the colour picker with a preliminary colour.
const button = document.getElementById('trigger'); let picker = new ColorPicker(button, '#f7f7f7');
6. Pick a colour programmatically.
picker.colorChange('#00ffff', button);
7. Fire an event when the colour modifications.
button.addEventListener('colorChange', function (event) { const color = event.detail.color; });
8. Gets an array of all of the saved customized colours.
const savedColor = colorPickerComp.getCustomColors();
Chrome DevTools Like Color Picker Component, How to Use Chrome Color Picker, Manipulating Colors with Color Picker in Chrome DevTools
See Demo And Download
Official Website(R-TEK): Click Here
This superior jQuery/javascript plugin is developed by R-TEK. For extra Advanced Usages, please go to the official website.
Be First to Comment