Wide-Gamut Colors
Support for sRGB, Display P3, Rec2020, and more. Automatic gamut detection shows you which color space contains your color.
color-input
A modern color picker web component with wide-gamut support
Features
Section titled “Features”Multiple Color Spaces
Choose from sRGB, HSL, HWB, LAB, LCH, OKLCH, OKLAB, and wide-gamut RGB spaces. Convert between them seamlessly.
Popover UI
Built-in popover with intelligent positioning. Respects viewport boundaries and safe areas automatically.
Signals & Reactivity
Powered by Preact Signals for efficient, fine-grained reactivity. Shadow DOM encapsulation keeps styles isolated.
CSS Parts
Customize every part of the picker with ::part() selectors. Style the
trigger, panel, sliders, and more.
Small Bundle
Tree-shakeable ES modules. Color math by colorjs.io. No framework dependencies.
Try it out
Section titled “Try it out”- Value
- #0bf8
- Color Space
- oklch
- Gamut
- —
- Contrast Color
-
—
View Code
<color-input value="#0bf8"></color-input>Quick Start
Section titled “Quick Start”Try it on Codepen!
<script type="module"> import 'https://cdn.jsdelivr.net/gh/argyleink/css-color-component/dist/index.js'</script>
<color-input value="oklch(75% 30% 180)"></color-input>- Value
- oklch(75% 30% 180)
- Color Space
- oklch
- Gamut
- —
- Contrast Color
-
—
Next Steps
Section titled “Next Steps”- API Reference - Explore all attributes, properties, methods, and events
- Styling - Customize appearance with themes and CSS parts
- Advanced - Accessibility, architecture, and advanced features