charts.interpolate-color

Imports name this capability’s declared dependencies, which fune builds next to it in your project; each one links to its page.

import { parseHex } from "./charts_color_parse_hex.ts";
import { toHex } from "./charts_color_to_hex.ts";
import { srgbToLinear } from "./charts_color_srgb_to_linear.ts";
import { linearToSrgb } from "./charts_color_linear_to_srgb.ts";
import { pow } from "./math_pow.ts";  ← from math.pow ^1.0.0 · built alongside by fune

type Lab = [number, number, number];

// Björn Ottosson's matrices, "A perceptual color space for image processing"
// (2020), https://bottosson.github.io/posts/oklab/, applied to linear sRGB.
function toOklab(hex: string): Lab {
  const c = parseHex(hex);
  const r = srgbToLinear(c.r);
  const g = srgbToLinear(c.g);
  const b = srgbToLinear(c.b);
  const l = pow(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b, 1 / 3);
  const m = pow(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b, 1 / 3);
  const s = pow(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b, 1 / 3);
  return [
    0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
    1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
    0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
  ];
}

function fromOklab(lab: Lab): string {
  const [L, A, B] = lab;
  const l0 = L + 0.3963377774 * A + 0.2158037573 * B;
  const m0 = L - 0.1055613458 * A - 0.0638541728 * B;
  const s0 = L - 0.0894841775 * A - 1.2914855480 * B;
  const l = l0 * l0 * l0;
  const m = m0 * m0 * m0;
  const s = s0 * s0 * s0;
  return toHex({
    r: linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
    g: linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
    b: linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s),
  });
}

/**
 * The colour a fraction t of the way along a ramp of evenly spaced stops.
 *
 * Mixing is done in OKLab, where equal steps look like equal steps. Mixing
 * the stored sRGB numbers (what a naive lerp of hex digits does) makes the
 * middle of a blue-to-yellow ramp a dull grey and bunches lightness at one end.
 */
export function interpolateColor(ramp: readonly string[], t: number): string {
  if (ramp.length < 2) throw new RangeError(`ramp needs at least 2 colours, received ${ramp.length}`);
  if (typeof t !== "number" || !Number.isFinite(t) || t < 0 || t > 1) {
    throw new RangeError(`t must be between 0 and 1, received ${t}`);
  }
  const position = t * (ramp.length - 1);
  let i = Math.floor(position);
  if (i > ramp.length - 2) i = ramp.length - 2;
  const u = position - i;
  const a = toOklab(ramp[i]);
  const b = toOklab(ramp[i + 1]);
  return fromOklab([a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u, a[2] + (b[2] - a[2]) * u]);
}