https://github.com/argyleink/css-color-component
a modern color picker for the web with support for all spaces
https://github.com/argyleink/css-color-component
Last synced: 6 days ago
JSON representation
a modern color picker for the web with support for all spaces
- Host: GitHub
- URL: https://github.com/argyleink/css-color-component
- Owner: argyleink
- License: mit
- Created: 2025-10-24T05:19:18.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-02-25T06:32:02.000Z (16 days ago)
- Last Synced: 2026-02-25T11:55:15.587Z (16 days ago)
- Language: TypeScript
- Homepage: https://color-input.netlify.app/
- Size: 980 KB
- Stars: 150
- Watchers: 2
- Forks: 7
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - css-color-component
README
# ``
A standalone web component color picker using [colorjs.io](http://colorjs.io/) and [Preact signals](https://github.com/preactjs/signals).
- One script import, one custom element tag
- Colorspaces: srgb, hsl, hwb, lab, lch, oklch, oklab and wide-gamut RGB-like spaces
- Popover UI with automatic positioning and Shadow DOM encapsulation
Try on [CodePen](https://codepen.io/argyleink/pen/dPGBYZg) or get it on [NPM](https://www.npmjs.com/package/hdr-color-input)
> Consider this as a beta or alpha build, needing battle testing, contributions and possibly a couple more features before being production ready
## Usage
### With CDN
```html
```
## API
- Attributes: `value`, `theme` (auto|light|dark), `no-alpha` (boolean)
- Properties: `value`, `colorspace`, `theme`, `noAlpha`, readonly: `gamut`, `contrastColor`
- Methods: `show()`, `close()`, `setAnchor(element)`
- Events: `change`, `open`, `close`
### Attributes
#### `no-alpha`
When present, hides the alpha channel control from the color picker. The alpha value will still be preserved in the color value, but users won't be able to modify it through the UI.
```html
```
## Dev
- Dev docs: `npm run dev` (serves docs/)
- Build library: `npm run build` (outputs to dist/)
- Tests: `npm test`