Skip to content
color-input

color-input

A wide-gamut color picker web component
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

sRGB, Display P3, Rec2020, and beyond. Automatic gamut detection shows which space contains your color.

Multiple Color Spaces

HSL, HWB, LAB, LCH, OKLCH, OKLAB, and wide-gamut RGB spaces with seamless conversion.

Area Picker

2D color area that adapts its axes to the active color space. Pointer drag and keyboard arrow-key support.

CSS Parts

Style every part of the picker with ::part() selectors — trigger, panel, sliders, and more.

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>

Next Steps

Section titled “Next Steps”