hub / github.com/argyleink/css-color-component
github.com/argyleink/css-color-component @cdn-v0.4.2
Chat with this repo
134 symbols
383 edges
40 files
10 documented · 7%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README
<color-input>
A standalone web component color picker built with colorjs.io and Preact 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, use it inline, or get it on NPM
Made with 🫀 by nerdy.dev
Extension points exported contracts — how you extend this code
ChangeDetail (Interface)(no doc)
src/color-input.ts
Rect (Interface)
(no doc)
src/utils/positioning.ts
HTMLElementTagNameMap (Interface)
(no doc)
src/color-input.ts
Size (Interface)
(no doc)
src/utils/positioning.ts
Candidate (Interface)
(no doc)
src/utils/positioning.ts
Core symbols most depended-on inside this repo
gencolorcalled by 48
src/utils/color-conversion.ts
formatChannel
called by 44
src/utils/channel-formatting.ts
toFixed
called by 43
src/utils/channel-formatting.ts
parseIntoChannels
called by 26
src/utils/color-conversion.ts
show
called by 16
src/color-input.ts
cfgYMin
called by 15
src/area-picker.ts
cfgYRange
called by 15
src/area-picker.ts
createTemplate
called by 15
src/utils/template.ts
Shape
Languages
TypeScript100%
Modules by API surface
src/color-input.ts42 symbols
src/area-picker.ts26 symbols
src/area-picker.worker.ts13 symbols
src/utils/positioning.ts10 symbols
src/color.ts8 symbols
tests/19-keyboard-modifiers.test.ts4 symbols
tests/18-new-space-controls.test.ts4 symbols
src/utils/channel-formatting.ts4 symbols
tests/16-text-input-validation.test.ts3 symbols
src/utils/color-conversion.ts3 symbols
tests/setup.ts1 symbols
tests/15-chroma-normalization.test.ts1 symbols
For agents
$ claude mcp add css-color-component \
-- python -m otcore.mcp_server <graph>