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: 3 months 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 (8 months ago)
• Default Branch: main
• Last Pushed: 2026-02-25T06:32:02.000Z (4 months ago)
• Last Synced: 2026-02-25T11:55:15.587Z (4 months 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 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/)