A standalone web component color picker using colorjs.io and Preact 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 or get it on NPM

Consider this as a beta or alpha build, needing battle testing, contributions and possibly a couple more features before being production ready

<script src="https://unpkg.com/hdr-color-input"></script>

<color-input value="oklch(75% 75% 180)"></color-input>

• 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

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.

<color-input value="oklch(75% 75% 180)" no-alpha></color-input>

• Dev docs: npm run dev (serves docs/)
• Build library: npm run build (outputs to dist/)
• Tests: npm test