Skip to content
color-input

color-input

A wide-gamut color picker web component for modern CSS color workflows
Get Started API Reference

Try it out

Section titled “Try it out”
Value
#0bf8
Color Space
oklch
Gamut
—
Contrast Color
—
View Code 
<color-input value="#0bf8"></color-input>

Features

Section titled “Features”

Wide-Gamut Colors

Work with sRGB, Display P3, A98 RGB, Rec2020, ProPhoto, XYZ, and perceptual spaces like OKLCH and OKLab. The picker also detects which gamut contains the current color.

Multiple Editing Modes

Edit the same color through text input, sliders, numeric fields, a colorspace select, and a 2D area picker without losing sync.

Gamut-Aware Area Picker

The 2D picker adapts to the active colorspace and can render gamut-aware boundaries for perceptual and wide-gamut workflows.

Customizable UI

Shadow DOM keeps the component self-contained while CSS parts expose the trigger, panel, input, controls, area, and readouts for styling.

What it includes

Section titled “What it includes”

<color-input> is more than a swatch and a few sliders. The current picker UI includes:

  • an inline text field for raw CSS color strings
  • numeric channel inputs paired with sliders
  • a colorspace selector
  • a 2D area picker that changes model per space
  • a preview area with copy and EyeDropper tools
  • a gamut indicator and black/white contrast readouts

These pieces stay synchronized whether the value changes through the UI, attributes, or properties.

Quick Start

Section titled “Quick Start”
<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>

How the picker behaves

Section titled “How the picker behaves”

The component chooses a different editing plane depending on the current colorspace:

  • srgb and hex use an OKHSV-style plane for practical RGB picking
  • hsl uses saturation × lightness
  • oklch, lch, and wide-gamut RGB-like spaces use a chroma × lightness plane
  • oklab and lab use an a × b plane around the origin
  • hwb uses whiteness × blackness

For spaces that benefit from it, the area picker can render gamut boundaries and stretch the interactive mapping so the useful region fills more of the canvas.

Who this is for

Section titled “Who this is for”

Use it when you want a custom element that:

  • works outside a framework or inside one
  • accepts modern CSS color syntax
  • can expose wide-gamut colors instead of collapsing everything to sRGB
  • still gives users a familiar picker UI with copy, eyedropper, and keyboard support

Next Steps

Section titled “Next Steps”
  • API Reference — Attributes, properties, methods, and events
  • Styling — Themes, CSS parts, and customization patterns
  • Advanced — Architecture, gamut behavior, and performance