OKLCH Elements#

OKLCH-based color picker web components.

Development and build#

To work on it, use this:

bun install
bun dev

There is no build, see ./index.html for example usage.

Components#

There are four "base" components you can use individually,
and a fifth <oklch-picker> which bundles them into a single UI component.

<oklch-lightness value="0.7"></oklch-lightness>
<oklch-chroma value="0.1"></oklch-chroma>
<oklch-hue value="286"></oklch-hue>
<oklch-alpha value="1"></oklch-alpha>

and <oklch-picker l c h a>. Full color picker with all four channels.

Attributes:

• l - Lightness (0-1)
• c - Chroma (0-0.37)
• h - Hue (0-360)
• a - Alpha (0-1)
• value - Full OKLCH string (e.g., oklch(0.7 0.1 286 / 1))

Properties:

• value - Get/set the full OKLCH CSS string
• getValue() - Returns {l, c, h, a} object
• setValue({l?, c?, h?, a?}) - Set individual values

Events:

• change - Fired when any value changes
  • event.detail.value - Full OKLCH CSS string
  • event.detail.l, event.detail.c, event.detail.h, event.detail.a - Individual values

Individual Channel Components#

Each channel component (oklch-lightness, oklch-chroma, oklch-hue, oklch-alpha) follows the same pattern:

Attributes:

• value - The channel value

Events:

• lightness-change / chroma-change / hue-change / alpha-change
  • event.detail.value - The new value

Architecture#

This package is independent from the main project:

• colors.ts - Standalone color utilities (no build-time globals like the main project)
• canvas.ts - Canvas helpers with P3 support detection
• oklch-components.ts - The custom elements

The main difference from the parent project is that these components are hardcoded to OKLCH and don't require Vite's build-time constant injection.

License#

Based on the work of https://github.com/evilmartians/oklch-picker.