OKLCH Kit

Practical OKLCH utilities for interfaces and visual systems.

colormix.dev

Blend two colours by averaging their sRGB channels and the midpoint comes out darker and duller than either end — blue to orange passes through grey. sRGB channel values are display voltages, not perceived colour, so the arithmetic mean of two of them is not the colour halfway between. OKLCH is perceptually uniform, so it is.

This is a small dependency-free set of helpers for doing that: convert into OKLCH, mix there, convert back.

Usage

import { mixOklch, oklchFromRgb, oklchToRgb } from "oklch-kit";

const blue = oklchFromRgb({ r: 0, g: 82, b: 255 });
const orange = oklchFromRgb({ r: 255, g: 150, b: 0 });

oklchToRgb(mixOklch(blue, orange, 0.5));
// { r: 226, g: 70, b: 177 } — a saturated magenta, not the grey sRGB gives you

API

| Export | Purpose | | --- | --- | | formatOklch(color) | OklchColor to a CSS oklch(L C H) string. | | parseOklch(value) | A CSS oklch() string to OklchColor. % lightness is normalised to 0–1. | | mixHue(from, to, progress) | Interpolates hue the short way around the wheel. | | mixOklch(from, to, progress) | Blends two OklchColors. progress is not clamped, so easing may overshoot. | | oklchFromRgb(rgb) | sRGB { r, g, b } (0–255) to OklchColor. | | oklchToRgb(color) | OklchColor back to sRGB, clipped per channel to the display gamut. |

OklchColor is { lightness, chroma, hue } — lightness 0–1, chroma from 0, hue in degrees. Conversions follow Björn Ottosson's OKLab reference and are tested against its published values.

Development

npm run build --workspace=oklch-kit
npm test --workspace=oklch-kit

MIT.