oklab v0.0.2-alpha.1
Oklab color space in JavaScript
Oklab is a color space suitable for color manipulation and image processing. Based on public domain C++ code published by Björn Ottosson.
The main attraction is a pair of functions to convert between linear SRGB and Oklab:
import {linearSrgbToOklab, oklabToLinearSrgb} from 'oklab';
const greenSrgb = {r: 0, g: 1, b: 0};
// Convert from linear SRGB to Oklab and back
// (Expect a small precision error on a roundtrip like this)
const greenOklab = linearSrgbToOklab(greenSrgb);
// {L: 0.866439…, a: -0.233920…, b: 0.179423…}
oklabToLinearSrgb(greenOklab);
// {r: 0.000000…, g: 1.000000…, b: 0.000000…}
Linear SRGB color is represented as an object {r, g, b}
, with channels between 0
and 1
.
Oklab is represented as an object {L, a, b}
where L
is between 0
and 1
for normal SRGB colors. a
and b
have a less clearly defined range, but will normally be between -0.5
and +0.5
. Neutral gray colors will have a
and b
at zero (or very close).
To convert SRGB to grayscale with Oklab, you only need L
(lightness). linearSrgbToOklabLightness()
returns the value of L
directly:
import {linearSrgbToOklabLightness} from 'oklab';
linearSrgbToOklabLightness({r: 0, g: 1, b: 0});
// 0.866439…
For convenience, there's also mixOklab()
which takes two Oklab {L, a, b}
objects and blends them by a factor 0
-1
(defaults to 0.5
).
import {linearSrgbToOklab, oklabToLinearSrgb, mixOklab} from 'oklab';
const white = linearSrgbToOklab({r: 1, g: 1, b: 1});
const blue = linearSrgbToOklab({r: 0, g: 0, b: 1});
const mix25 = mixOklab(white, blue, 0.25);
// {L: 0.862998…, a: -0.008088…, b: -0.077993…}
const mix50 = mixOklab(white, blue);
// {L: 0.726009…, a: -0.016185…, b: -0.155868…}
const mix75 = mixOklab(white, blue, 0.75);
// {L: 0.589019…, a: -0.024281…, b: -0.233744…}
oklabToLinearSrgb(mix50);
// {r: 0.173162…, g: 0.364795…, b: 1.083732…}
As you can see in the blue channel in the last example, mixing two colors in gamut can create colors that are out of gamut.