Lightweight & Fast Color Picker Web Component – color-dialog-box

Preview:

Description:

color-dialog-box is a tiny, easy-to-use, mobile-friendly color picker web component that enables you to pick a color with alpha selection in a draggable dialog box.

The color picker provides HSLA sliders for precise color adjustments, a hex input supporting #rrggbbaa notation, and an EyeDropper tool for Chromium-based browsers.

Additionally, it allows you to quickly access ColorHexa, a comprehensive color encyclopedia, by clicking the INFO icon on the color picker dialog box.

How to use it:

1. Install and import the color-dialog-box with NPM:

# NPM
$ npm install color-dialog-box

import 'color-dialog-box';

2. Alternatively, you can load it directly from a CDN:

<script type="module" src="https://unpkg.com/color-dialog-box"></script>

3. Insert the <color-picker /> custom element into your HTML:

<color-picker id="picker"></color-picker>

4. Add a button (or any other element) to launch the color picker:

<button id="example">Launch</button>

const bt = document.getElementById("example");
const picker = document.getElementById("picker");
const open = e => {
  // OPEN Callback
  picker.setAttribute('open', true);
};
const update = e => {
  // UPDATE Callback
  console.log(e.detail.hex);
};
bt.addEventListener('click', open);
picker.addEventListener('update-color', update);

5. Define the starting color using the hex attribute:

<color-picker hex="#ff0000"></color-picker>

6. Determine whether to open the color picker automatically on page load.

<color-picker open="true"></color-picker>

7. Modify the appearance of the color picker by overriding CSS variables:

color-picker {
  --modal-shadow: 0 3px 5px #00000020;
  --bg-primary: #fff;
  --bg-secondary: #fff;
  --border-color-primary: #d0d1e4;
  --border-color-secondary: #6d7bff;
  --bg-header: #f7f8ff;
  --txt-color-primary: #000;
  --bg-transparent: repeating-conic-gradient(from 0,#fff 0% 25%,#eee 25% 50%) 0 0 /1rem 1rem;
  --area-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset;
  --thumb-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 3px 10px 0 rgb(0 0 0 / 15%);
  --thumb-border: 0.5rem solid #fff;
  --hue: 0;
}