oskar.tngl.sh / oklch-elements
this repo has no description
fork atom
oklch-elements / README.md
at main 2.0 kB view raw view code

OKLCH Elements#

OKLCH-based color picker web components.

https://oklch.0sk.ar/

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.