Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jmetaxas/color-dialog-box
A modern and lightweight color dialog box in vanilla js.
https://github.com/jmetaxas/color-dialog-box
color color-dialog color-dialog-box color-picker colordialog colorpicker customelement hex hsl vanilla-js webcomponent
Last synced: about 1 month ago
JSON representation
A modern and lightweight color dialog box in vanilla js.
- Host: GitHub
- URL: https://github.com/jmetaxas/color-dialog-box
- Owner: jmetaxas
- License: isc
- Created: 2024-05-27T10:06:15.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-29T11:50:02.000Z (6 months ago)
- Last Synced: 2024-10-02T06:43:52.796Z (about 1 month ago)
- Topics: color, color-dialog, color-dialog-box, color-picker, colordialog, colorpicker, customelement, hex, hsl, vanilla-js, webcomponent
- Language: TypeScript
- Homepage: https://jmetaxas.github.io/color-dialog-box/
- Size: 171 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://npmjs.org/package/color-dialog-box)
[](https://bundlephobia.com/result?p=color-dialog-box)
[](https://npmjs.org/package/color-dialog-box)
A simple and lightweight vanilla JS (no dependencies) color dialog box with alpha selection.
## User Features
- **HSLA** Sliders for precise color adjustments
- **Hex** input supporting #rrggbbaa notation
- Integrated **color picker**
- **EyeDropper** tool (only for Chromium-based browsers)
- Quick access to **[ColorHexa](https://www.colorhexa.com/)**, the color encyclopedia
## Features
- 🗜 **Lightweight**: Only 5.9 KB (minified and gzipped).
- âš¡ **Fast**: Built with standards based [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements).
- 😎 **Framework-agnostic**: Can be used with [any framework](https://custom-elements-everywhere.com/).
- 🛡 **Bulletproof**: Written in strict TypeScript with 100% test coverage.
- 📱 **Mobile-friendly**: Works well on mobile devices.
- 🧩 **No dependencies**
## Install
```
npm install color-dialog-box --save
```
You can also use one the following CDN:
[unpkg](https://unpkg.com/color-dialog-box):
```html
```
[ESM](https://esm.sh/color-dialog-box):
```html
```
## Basic Usage
```html
Open the color picker
import 'color-dialog-box';
const open = e => {
picker.setAttribute('open', true);
};
const update = e => {
console.log(e.detail.hex);
};
bt.addEventListener('click', open);
picker.addEventListener('update-color', update);
```
> **Note**
>
> You'll probably only want to add a single instance of ``, even if you need to change the color of different parts of the document. See an [advanced example](https://jmetaxas.github.io/color-dialog-box/) for more details.
>
## Customization
### Default Color
To set a default color, you can add a `hex` attribute to the `` element. For example:
```html
```
### Open on Load
By default, the color dialog box is hidden. To open it when the page loads, use the `open` attribute set to `true`:
```html
```
### Styling
color-dialog-box supports [CSS Shadow Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_shadow_parts) and CSS Variables for custom styling.
Supported part names:
`dialog`, `header`, `wrapper`, `hex`, `preview`, `area`, `sliders`
Example (of a dark theme) :
```css
color-picker {
--bg-primary: #212031;
--bg-secondary: #343445;
--border-color-primary: #494b6f;
--border-color-secondary: #6d7bff;
--bg-header: #15161b;
--txt-color-primary: #fff;
}
color-picker::part(cancel),
color-picker::part(eyedropper),
color-picker::part(info) {
filter: invert(1);
}
```
### Labels
You can change the labels by using the following attributes:
`label-title`, `label-hue`, `label-saturation`, `label-lightness`, `label-opacity`, `label-ok`
```html
```
## Project using color-dialog-box
* [ColorBeta](https://colorbeta.com/): Advanced CSS Gradient Generator