Easy Color Picker & Color Manipulation Web Component – Tool Cool Color Picker

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;
}