Skip to content
color-input

color-input

A modern color picker web component with wide-gamut support
Get Started View API

Features

Section titled “Features”

Wide-Gamut Colors

Support for sRGB, Display P3, Rec2020, and more. Automatic gamut detection shows you which color space contains your color.

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”

Interact with the color picker below. The readout updates as you adjust the color.

Value
oklch(75% 0.3 180)
Color Space
oklch
Gamut
—
Contrast Color
—
View Code 
<color-input
  value="oklch(75% 0.3 180)"
  colorspace="oklch"
  theme="auto"
></color-input>

Quick Start

Section titled “Quick Start”
<script type="module">
  import 'color-input'
</script>


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

Next Steps

Section titled “Next Steps”
  • API Reference - Explore all attributes, properties, methods, and events
  • Styling - Customize appearance with themes and CSS parts
  • Color Spaces - Learn which color space to use when
  • Advanced - Accessibility, architecture, and advanced features