Author: | toolcool-org |
---|---|
Views Total: | 1,084 views |
Official Page: | Go to website |
Last Update: | July 22, 2022 |
License: | MIT |
Preview:

Description:
An easy-to-use color picker & color manipulation web component for both browser and node.js.
It supports all major color formats including HEX, HEX8, RGB (Red-Green-Blue), RGBa (Red-Green-Blue-Alpha), HSL (Hue-Saturation-Lightness), HSLa (Hue-Saturation-Lightness-Alpha), HSV (Hue-Saturation-Value), and HSVa (Hue-Saturation-Value-Alpha).
How to use it:
1. Download the package and import the Tool Cool Color Picker.
# NPM $ npm i toolcool-color-picker
// node.js import 'toolcool-color-picker'; // Browser <script src="js/toolcool-color-picker.min.js"></script> // TypeScript import 'toolcool-color-picker'; import ColorPicker from 'toolcool-color-picker/src/app/color-picker';
2. Add the <toolcool-color-picker /> component to the app and define the initial color as follows:
<toolcool-color-picker color="#ff0000" id="example"> </toolcool-color-picker>
3. Change the color (hex, hex8, RGB, rgba, hsl, hsla, hsv, hsva).
// get the reference const $colorPicker = document.getElementById('example'); // change the color $colorPicker.color = '#000000';
4. Get the current color.
// hex $colorPicker.hex // hex8 $colorPicker.hex8 // rgb $colorPicker.rgb // rgba $colorPicker.rgba // hsl $colorPicker.hsl // hsla $colorPicker.hsla // hsv $colorPicker.hsv // hsva $colorPicker.hsva
5. Trigger a function every time the color changes.
$colorPicker.addEventListener('change', (evt) => { console.log(evt.detail.hex); console.log(evt.detail.hex8); console.log(evt.detail.rgb); console.log(evt.detail.rgba); console.log(evt.detail.hsl); console.log(evt.detail.hsla); console.log(evt.detail.hsv); console.log(evt.detail.hsva); console.log(evt.detail.color); });
6. Open & close the color picker popup manually.
// open color picker popup $colorPicker.opened = true; // close color picker popup $colorPicker.opened = false;
7. Customize the styles of the color picker component.
:root{ /* trigger button */ --tool-cool-color-picker-btn-bg: #b9b9b9; --tool-cool-color-picker-btn-border-color: #000; --tool-cool-color-picker-btn-border-color-inner: #363636; --tool-cool-color-picker-btn-border-radius: 1rem; --tool-cool-color-picker-btn-border-radius-inner: 1rem; /* color picker popup */ --tool-cool-color-picker-popup-bg: #b9b9b9; --tool-cool-color-picker-popup-border-color: #000; /* fields */ --tool-cool-color-picker-field-border-color: #363636; --tool-cool-color-picker-field-label-color: #1a3c6e; }