OKLCH

/** * Minimal OKLCH and sRGB math for the demos, following Bjorn Ottosson's * reference Oklab implementation (https://bottosson.github.io/posts/oklab/). * * The demos convert colours themselves instead of handing oklch() strings to * the browser so that out-of-gamut handling stays honest and visible: chroma * is clamped toward grey while lightness and hue are preserved, and the UI * can say exactly when that happened. *//** Gamma-encoded sRGB with channels in [0, 1] when in gamut. */export type Rgb = { r: number; g: number; b: number };/** sRGB transfer function, linear to gamma (IEC 61966-2-1). */function linearToGamma(x: number): number {  return x <= 0.0031308 ? 12.92 * x : 1.055 * x ** (1 / 2.4) - 0.055;}/** sRGB transfer function, gamma to linear. */function gammaToLinear(x: number): number {  return x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;}/** * OKLCH to linear sRGB, unclamped: channels stray outside [0, 1] when the * requested colour does not exist in sRGB. Hue is in degrees. */export function oklchToLinearRgb(l: number, c: number, h: number): Rgb {  const hr = (h * Math.PI) / 180;  const a = c * Math.cos(hr);  const b = c * Math.sin(hr);  const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;  const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;  const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;  return {    r: 4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,    g: -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,    b: -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_,  };}/** OKLCH to gamma sRGB, unclamped. Hue is in degrees. */export function oklchToRgb(l: number, c: number, h: number): Rgb {  const lin = oklchToLinearRgb(l, c, h);  return {    r: linearToGamma(lin.r),    g: linearToGamma(lin.g),    b: linearToGamma(lin.b),  };}/** Whether an sRGB triple is displayable, with a small numeric tolerance. */export function inSrgbGamut(rgb: Rgb, eps = 1e-4): boolean {  return (    rgb.r >= -eps &&    rgb.r <= 1 + eps &&    rgb.g >= -eps &&    rgb.g <= 1 + eps &&    rgb.b >= -eps &&    rgb.b <= 1 + eps  );}/** * Whether an OKLCH colour fits inside Display P3, checked in linear space. * Linear sRGB to linear P3 is a single matrix (both are D65), and the * transform stays valid for out-of-range sRGB channels because it is linear. */export function inP3Gamut(  l: number,  c: number,  h: number,  eps = 1e-4,): boolean {  const { r, g, b } = oklchToLinearRgb(l, c, h);  const pr = 0.8224621129 * r + 0.1775378871 * g;  const pg = 0.0331941988 * r + 0.9668058012 * g;  const pb = 0.0170826319 * r + 0.0723974406 * g + 0.9105199276 * b;  return (    pr >= -eps &&    pr <= 1 + eps &&    pg >= -eps &&    pg <= 1 + eps &&    pb >= -eps &&    pb <= 1 + eps  );}/** Largest chroma at (l, h) that still satisfies a gamut test, by bisection. */function maxChromaFor(  l: number,  h: number,  fits: (l: number, c: number, h: number) => boolean,): number {  const ceiling = 0.5;  if (!fits(l, 0, h)) return 0;  if (fits(l, ceiling, h)) return ceiling;  let lo = 0;  let hi = ceiling;  for (let i = 0; i < 24; i++) {    const mid = (lo + hi) / 2;    if (fits(l, mid, h)) lo = mid;    else hi = mid;  }  return lo;}/** The sRGB gamut edge at (l, h): the largest displayable chroma. */export function maxSrgbChroma(l: number, h: number): number {  return maxChromaFor(l, h, (ll, cc, hh) =>    inSrgbGamut(oklchToRgb(ll, cc, hh)),  );}/** The Display P3 gamut edge at (l, h). */export function maxP3Chroma(l: number, h: number): number {  return maxChromaFor(l, h, (ll, cc, hh) => inP3Gamut(ll, cc, hh));}/** * Chroma clamped to what sRGB can display at (l, h). Preserving L and H and * giving up only chroma is the gamut mapping the demos advertise. */export function clampChromaToSrgb(  l: number,  c: number,  h: number,): { c: number; clamped: boolean } {  if (inSrgbGamut(oklchToRgb(l, c, h))) return { c, clamped: false };  return { c: Math.min(c, maxSrgbChroma(l, h)), clamped: true };}/** Oklab coordinates; a and b are the rectangular chroma axes. */export type Oklab = { l: number; a: number; b: number };/** Gamma sRGB to Oklab, the inverse direction of oklchToRgb. */export function rgbToOklab(rgb: Rgb): Oklab {  const r = gammaToLinear(rgb.r);  const g = gammaToLinear(rgb.g);  const b = gammaToLinear(rgb.b);  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);  return {    l: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,    a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,    b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,  };}/** Perceptual (Oklab) lightness of a gamma sRGB colour. */export function rgbLightness(rgb: Rgb): number {  return rgbToOklab(rgb).l;}/** * The sRGB cusp at a hue: the lightness where the gamut reaches its largest * chroma, in other words the most colourful displayable colour of that hue. */export function srgbCusp(h: number): { l: number; c: number } {  let bestL = 0.5;  let bestC = 0;  for (let i = 1; i < 64; i++) {    const l = i / 64;    const c = maxSrgbChroma(l, h);    if (c > bestC) {      bestC = c;      bestL = l;    }  }  for (let step = 1 / 128; step > 1 / 2048; step /= 2) {    for (const l of [bestL - step, bestL + step]) {      const c = maxSrgbChroma(l, h);      if (c > bestC) {        bestC = c;        bestL = l;      }    }  }  return { l: bestL, c: bestC };}/** HSL to gamma sRGB (CSS definition). Hue in degrees, s and l in [0, 1]. */export function hslToRgb(h: number, s: number, l: number): Rgb {  const hue = ((h % 360) + 360) % 360;  const c = (1 - Math.abs(2 * l - 1)) * s;  const hp = hue / 60;  const x = c * (1 - Math.abs((hp % 2) - 1));  let rgb: [number, number, number];  if (hp < 1) rgb = [c, x, 0];  else if (hp < 2) rgb = [x, c, 0];  else if (hp < 3) rgb = [0, c, x];  else if (hp < 4) rgb = [0, x, c];  else if (hp < 5) rgb = [x, 0, c];  else rgb = [c, 0, x];  const m = l - c / 2;  return { r: rgb[0] + m, g: rgb[1] + m, b: rgb[2] + m };}/** Gamma sRGB to HSL (CSS definition). Hue in degrees, s and l in [0, 1]. */export function rgbToHsl(rgb: Rgb): { h: number; s: number; l: number } {  const r = Math.min(1, Math.max(0, rgb.r));  const g = Math.min(1, Math.max(0, rgb.g));  const b = Math.min(1, Math.max(0, rgb.b));  const max = Math.max(r, g, b);  const min = Math.min(r, g, b);  const l = (max + min) / 2;  const d = max - min;  if (d < 1e-9) return { h: 0, s: 0, l };  const s = d / (1 - Math.abs(2 * l - 1));  let h: number;  if (max === r) h = ((g - b) / d) % 6;  else if (max === g) h = (b - r) / d + 2;  else h = (r - g) / d + 4;  return { h: (((h * 60) % 360) + 360) % 360, s, l };}/** Hex string for an sRGB colour, clipping channels to [0, 1]. */export function rgbToHex(rgb: Rgb): string {  const channel = (x: number) =>    Math.round(Math.min(1, Math.max(0, x)) * 255)      .toString(16)      .padStart(2, "0");  return `#${channel(rgb.r)}${channel(rgb.g)}${channel(rgb.b)}`;}/** The grey with a given perceptual lightness, as hex. */export function greyHex(l: number): string {  return rgbToHex(oklchToRgb(l, 0, 0));}