# `<color-input>`

<img width="960" height="688" alt="Screenshot 2026-03-23 at 10 06 09 PM" src="https://github.com/user-attachments/assets/464342c2-0c02-44dd-8646-1a7ba508490f" />

<hr>

A standalone web component color picker built with [colorjs.io](http://colorjs.io/) and [Preact Signals](https://github.com/preactjs/signals).

It's meant to be easy to drop into any app while still supporting modern CSS color workflows:

- modern CSS color syntax, including wide-gamut spaces
- inline text editing, numeric inputs, sliders, and a 2D area picker
- automatic conversion between editing spaces
- popover UI, anchor positioning, and Shadow DOM + CSS parts
- gamut detection, contrast readouts, copy, and EyeDropper support

Try on [CodePen](https://codepen.io/argyleink/pen/dPGBYZg), use it [inline](https://codepen.io/argyleink/pen/wBzPvaE), or get it on [NPM](https://www.npmjs.com/package/hdr-color-input)

Made with 🫀 by [nerdy.dev](https://nerdy.dev/)