@texel/color 1.0.0

package/src/spaces/a98-rgb.js

@@ -0,0 +1,50 @@
+import { vec3 } from "../util.js";
+import {
+  linear_A98RGB_to_XYZ_M,
+  XYZ_to_linear_A98RGB_M,
+  linear_A98RGB_to_LMS_M,
+  LMS_to_linear_A98RGB_M,
+  OKLab_to_linear_A98RGB_coefficients,
+} from "../conversion_matrices.js";
+
+const A98RGBToLinear = (val) => {
+  let sign = val < 0 ? -1 : 1;
+  let abs = Math.abs(val);
+  return sign * Math.pow(abs, 563 / 256);
+};
+
+const A98RGBToGamma = (val) => {
+  let sign = val < 0 ? -1 : 1;
+  let abs = Math.abs(val);
+  return sign * Math.pow(abs, 256 / 563);
+};
+
+export const A98RGBLinear = {
+  id: "a98-rgb-linear",
+  toXYZ_M: linear_A98RGB_to_XYZ_M,
+  fromXYZ_M: XYZ_to_linear_A98RGB_M,
+  toLMS_M: linear_A98RGB_to_LMS_M,
+  fromLMS_M: LMS_to_linear_A98RGB_M,
+};
+
+export const A98RGB = {
+  id: "a98-rgb",
+  base: A98RGBLinear,
+  toBase: (vec, out = vec3()) => {
+    out[0] = A98RGBToLinear(vec[0]);
+    out[1] = A98RGBToLinear(vec[1]);
+    out[2] = A98RGBToLinear(vec[2]);
+    return out;
+  },
+  fromBase: (vec, out = vec3()) => {
+    out[0] = A98RGBToGamma(vec[0]);
+    out[1] = A98RGBToGamma(vec[1]);
+    out[2] = A98RGBToGamma(vec[2]);
+    return out;
+  },
+};
+
+export const A98RGBGamut = {
+  space: A98RGB,
+  coefficients: OKLab_to_linear_A98RGB_coefficients,
+};

package/src/spaces/display-p3.js

@@ -0,0 +1,28 @@
+import {
+  linear_DisplayP3_to_LMS_M,
+  linear_DisplayP3_to_XYZ_M,
+  LMS_to_linear_DisplayP3_M,
+  XYZ_to_linear_DisplayP3_M,
+  OKLab_to_linear_DisplayP3_coefficients,
+} from "../conversion_matrices.js";
+import { sRGBGammaToLinearVec3, sRGBLinearToGammaVec3 } from "./util.js";
+
+export const DisplayP3Linear = {
+  id: "display-p3-linear",
+  toXYZ_M: linear_DisplayP3_to_XYZ_M,
+  fromXYZ_M: XYZ_to_linear_DisplayP3_M,
+  toLMS_M: linear_DisplayP3_to_LMS_M,
+  fromLMS_M: LMS_to_linear_DisplayP3_M,
+};
+
+export const DisplayP3 = {
+  id: "display-p3",
+  base: DisplayP3Linear,
+  toBase: sRGBGammaToLinearVec3,
+  fromBase: sRGBLinearToGammaVec3,
+};
+
+export const DisplayP3Gamut = {
+  space: DisplayP3,
+  coefficients: OKLab_to_linear_DisplayP3_coefficients,
+};

package/src/spaces/oklab.js

@@ -0,0 +1,70 @@
+// Oklab and related spaces: OKLCH, OKHSV(sRGB), OKHSL(sRGB)
+
+import { constrainAngle, vec3 } from "../util.js";
+import {
+  OKHSLToOKLab,
+  OKHSVToOKLab,
+  OKLabToOKHSL,
+  OKLabToOKHSV,
+} from "../okhsl.js";
+
+import { sRGBGamut } from "./srgb.js";
+
+// based on colorjs.io, could perhaps use a more specific number than this
+const ACHROMATIC_EPSILON = (0.4 - 0.0) / 100000;
+
+export const OKLab = {
+  id: "oklab",
+};
+
+export const OKLCH = {
+  id: "oklch",
+  base: OKLab,
+  toBase: (oklch, out = vec3()) => {
+    // Note: newer version of Colorjs.io clamps oklch chroma
+    // However, this means that oklch(0.5, -0.36, 90) -> srgb will result in an in-gamut rgb
+    // which seems a bit odd; you'd expect it to be out of gamut. So we will leave
+    // chroma unclamped for this conversion.
+    // const C = Math.max(0, oklch[1]);
+
+    const C = oklch[1];
+    const H = oklch[2];
+    out[0] = oklch[0]; // L remains the same
+    out[1] = C * Math.cos((H * Math.PI) / 180); // a
+    out[2] = C * Math.sin((H * Math.PI) / 180); // b
+    return out;
+  },
+  fromBase: (oklab, out = vec3()) => {
+    // These methods are used for other polar forms as well, so we can't hardcode the ε
+    const a = oklab[1];
+    const b = oklab[2];
+    let isAchromatic =
+      Math.abs(a) < ACHROMATIC_EPSILON && Math.abs(b) < ACHROMATIC_EPSILON;
+    let hue = isAchromatic
+      ? 0
+      : constrainAngle((Math.atan2(b, a) * 180) / Math.PI);
+    let C = isAchromatic ? 0 : Math.sqrt(a * a + b * b);
+    out[0] = oklab[0]; // L remains the same
+    out[1] = C; // Chroma
+    out[2] = hue; // Hue, in degrees [0 to 360)
+    return out;
+  },
+};
+
+export const OKHSL = {
+  // Note: sRGB gamut only
+  // For other gamuts, use okhsl method directly
+  id: "okhsl",
+  base: OKLab,
+  toBase: (okhsl, out = vec3()) => OKHSLToOKLab(okhsl, sRGBGamut, out),
+  fromBase: (oklab, out = vec3()) => OKLabToOKHSL(oklab, sRGBGamut, out),
+};
+
+export const OKHSV = {
+  // Note: sRGB gamut only
+  // For other gamuts, use okhsv method directly
+  id: "okhsv",
+  base: OKLab,
+  toBase: (okhsl, out = vec3()) => OKHSVToOKLab(okhsl, sRGBGamut, out),
+  fromBase: (oklab, out = vec3()) => OKLabToOKHSV(oklab, sRGBGamut, out),
+};

package/src/spaces/prophoto-rgb.js

@@ -0,0 +1,72 @@
+import { vec3 } from "../util.js";
+import {
+  linear_ProPhotoRGB_to_XYZ_M,
+  XYZ_to_linear_ProPhotoRGB_M,
+} from "../conversion_matrices.js";
+import { D50_to_D65_M, D65_to_D50_M } from "./xyz.js";
+
+const Et = 1 / 512;
+const Et2 = 16 / 512;
+
+// Transfer curve is gamma 1.8 with a small linear portion
+const ProPhotoRGBToLinear = (v) => (v < Et2 ? v / 16 : v ** 1.8);
+const ProPhotoRGBToGamma = (v) => (v >= Et ? v ** (1 / 1.8) : 16 * v);
+
+// Note: below is a possibly improved transfer function proposed by CSS Module 4 spec
+// It is currently not matching the outputs of Colorjs.io when dealing with particular
+// negative values, such as convert([1,1,1], OKlab, ProPhotoRGB)
+
+// const ProPhotoRGBToLinear = (val) => {
+//   // convert an array of prophoto-rgb values
+//   // where in-gamut colors are in the range [0.0 - 1.0]
+//   // to linear light (un-companded) form.
+//   // Transfer curve is gamma 1.8 with a small linear portion
+//   let sign = val < 0 ? -1 : 1;
+//   let abs = Math.abs(val);
+//   return abs <= Et2 ? val / 16 : sign * Math.pow(abs, 1.8);
+// };
+
+// const ProPhotoRGBToGamma = (val) => {
+//   // convert an array of linear-light prophoto-rgb  in the range 0.0-1.0
+//   // to gamma corrected form
+//   // Transfer curve is gamma 1.8 with a small linear portion
+//   let sign = val < 0 ? -1 : 1;
+//   let abs = Math.abs(val);
+//   return abs >= Et ? sign * Math.pow(abs, 1 / 1.8) : 16 * val;
+// };
+
+export const ProPhotoRGBLinear = {
+  id: "prophoto-rgb-linear",
+  adapt: {
+    // chromatic adaptation to and from D65
+    to: D50_to_D65_M,
+    from: D65_to_D50_M,
+  },
+  // Note these are in D50
+  toXYZ_M: linear_ProPhotoRGB_to_XYZ_M,
+  fromXYZ_M: XYZ_to_linear_ProPhotoRGB_M,
+};
+
+export const ProPhotoRGB = {
+  id: "prophoto-rgb",
+  base: ProPhotoRGBLinear,
+  toBase: (vec, out = vec3()) => {
+    out[0] = ProPhotoRGBToLinear(vec[0]);
+    out[1] = ProPhotoRGBToLinear(vec[1]);
+    out[2] = ProPhotoRGBToLinear(vec[2]);
+    return out;
+  },
+  fromBase: (vec, out = vec3()) => {
+    out[0] = ProPhotoRGBToGamma(vec[0]);
+    out[1] = ProPhotoRGBToGamma(vec[1]);
+    out[2] = ProPhotoRGBToGamma(vec[2]);
+    return out;
+  },
+};
+
+// Note: this is currently not supported, some overflows are occurring
+// in the python script. Please file an issue or PR if you think you can help.
+// export const ProPhotoRGBGamut = {
+//   space: ProPhotoRGB,
+//   coefficients: OKLab_to_linear_ProPhotoRGB_coefficients,
+// };

package/src/spaces/rec2020.js

@@ -0,0 +1,47 @@
+import { vec3 } from "../util.js";
+import {
+  linear_Rec2020_to_LMS_M,
+  linear_Rec2020_to_XYZ_M,
+  LMS_to_linear_Rec2020_M,
+  XYZ_to_linear_Rec2020_M,
+  OKLab_to_linear_Rec2020_coefficients,
+} from "../conversion_matrices.js";
+
+const ALPHA = 1.09929682680944;
+const BETA = 0.018053968510807;
+
+const Rec2020ToLinear = (val) =>
+  val < BETA * 4.5 ? val / 4.5 : Math.pow((val + ALPHA - 1) / ALPHA, 1 / 0.45);
+
+const Rec2020ToGamma = (val) =>
+  val >= BETA ? ALPHA * Math.pow(val, 0.45) - (ALPHA - 1) : 4.5 * val;
+
+export const Rec2020Linear = {
+  id: "rec2020-linear",
+  toXYZ_M: linear_Rec2020_to_XYZ_M,
+  fromXYZ_M: XYZ_to_linear_Rec2020_M,
+  toLMS_M: linear_Rec2020_to_LMS_M,
+  fromLMS_M: LMS_to_linear_Rec2020_M,
+};
+
+export const Rec2020 = {
+  id: "rec2020",
+  base: Rec2020Linear,
+  toBase: (vec, out = vec3()) => {
+    out[0] = Rec2020ToLinear(vec[0]);
+    out[1] = Rec2020ToLinear(vec[1]);
+    out[2] = Rec2020ToLinear(vec[2]);
+    return out;
+  },
+  fromBase: (vec, out = vec3()) => {
+    out[0] = Rec2020ToGamma(vec[0]);
+    out[1] = Rec2020ToGamma(vec[1]);
+    out[2] = Rec2020ToGamma(vec[2]);
+    return out;
+  },
+};
+
+export const Rec2020Gamut = {
+  space: Rec2020,
+  coefficients: OKLab_to_linear_Rec2020_coefficients,
+};

package/src/spaces/srgb.js

@@ -0,0 +1,29 @@
+import {
+  linear_sRGB_to_LMS_M,
+  linear_sRGB_to_XYZ_M,
+  LMS_to_linear_sRGB_M,
+  XYZ_to_linear_sRGB_M,
+  OKLab_to_linear_sRGB_coefficients,
+} from "../conversion_matrices.js";
+
+import { sRGBGammaToLinearVec3, sRGBLinearToGammaVec3 } from "./util.js";
+
+export const sRGBLinear = {
+  id: "srgb-linear",
+  toXYZ_M: linear_sRGB_to_XYZ_M,
+  fromXYZ_M: XYZ_to_linear_sRGB_M,
+  toLMS_M: linear_sRGB_to_LMS_M,
+  fromLMS_M: LMS_to_linear_sRGB_M,
+};
+
+export const sRGB = {
+  id: "srgb",
+  base: sRGBLinear,
+  toBase: sRGBGammaToLinearVec3,
+  fromBase: sRGBLinearToGammaVec3,
+};
+
+export const sRGBGamut = {
+  space: sRGB,
+  coefficients: OKLab_to_linear_sRGB_coefficients,
+};

package/src/spaces/util.js

@@ -0,0 +1,44 @@
+import { vec3 } from "../util.js";
+
+export const sRGBGammaToLinear = (val) => {
+  // convert a single channel value
+  // where in-gamut values are in the range [0 - 1]
+  // to linear light (un-companded) form.
+  // https://en.wikipedia.org/wiki/SRGB
+  // Extended transfer function:
+  // for negative values,  linear portion is extended on reflection of axis,
+  // then reflected power function is used.
+  let sign = val < 0 ? -1 : 1;
+  let abs = Math.abs(val);
+  return abs <= 0.04045
+    ? val / 12.92
+    : sign * Math.pow((abs + 0.055) / 1.055, 2.4);
+};
+
+export const sRGBLinearToGamma = (val) => {
+  // convert a single channel linear-light value in range 0-1
+  // to gamma corrected form
+  // https://en.wikipedia.org/wiki/SRGB
+  // Extended transfer function:
+  // For negative values, linear portion extends on reflection
+  // of axis, then uses reflected pow below that
+  let sign = val < 0 ? -1 : 1;
+  let abs = Math.abs(val);
+  return abs > 0.0031308
+    ? sign * (1.055 * Math.pow(abs, 1 / 2.4) - 0.055)
+    : 12.92 * val;
+};
+
+export const sRGBLinearToGammaVec3 = (vec, out = vec3()) => {
+  out[0] = sRGBLinearToGamma(vec[0]);
+  out[1] = sRGBLinearToGamma(vec[1]);
+  out[2] = sRGBLinearToGamma(vec[2]);
+  return out;
+};
+
+export const sRGBGammaToLinearVec3 = (vec, out = vec3()) => {
+  out[0] = sRGBGammaToLinear(vec[0]);
+  out[1] = sRGBGammaToLinear(vec[1]);
+  out[2] = sRGBGammaToLinear(vec[2]);
+  return out;
+};

package/src/spaces/xyz.js

@@ -0,0 +1,44 @@
+import { vec3 } from "../util.js";
+import { transform } from "../core.js";
+import { LMS_to_XYZ_M, XYZ_to_LMS_M } from "../conversion_matrices.js";
+
+// Bradford chromatic adaptation from D65 to D50
+// The matrix below is the result of three operations:
+// - convert from XYZ to retinal cone domain
+// - scale components from one reference white to another
+// - convert back to XYZ
+// see https://github.com/LeaVerou/color.js/pull/354/files
+export const D65_to_D50_M = [
+  [1.0479297925449969, 0.022946870601609652, -0.05019226628920524],
+  [0.02962780877005599, 0.9904344267538799, -0.017073799063418826],
+  [-0.009243040646204504, 0.015055191490298152, 0.7518742814281371],
+];
+
+// Bradford chromatic adaptation from D50 to D65
+// See https://github.com/LeaVerou/color.js/pull/360/files
+export const D50_to_D65_M = [
+  [0.955473421488075, -0.02309845494876471, 0.06325924320057072],
+  [-0.0283697093338637, 1.0099953980813041, 0.021041441191917323],
+  [0.012314014864481998, -0.020507649298898964, 1.330365926242124],
+];
+
+export const XYZD65ToD50 = (XYZ, out = vec3()) =>
+  transform(XYZ, D65_to_D50_M, out);
+
+export const XYZD50ToD65 = (XYZ, out = vec3()) =>
+  transform(XYZ, D50_to_D65_M, out);
+
+// XYZ using D65 whitepoint
+export const XYZ = {
+  id: "xyz", // xyz-d65
+  toLMS_M: XYZ_to_LMS_M,
+  fromLMS_M: LMS_to_XYZ_M,
+};
+
+// XYZ using D50 whitepoint
+export const XYZD50 = {
+  id: "xyz-d50",
+  base: XYZ,
+  toBase: XYZD50ToD65,
+  fromBase: XYZD65ToD50,
+};

package/src/spaces.js

@@ -0,0 +1,44 @@
+import { XYZ, XYZD50 } from "./spaces/xyz.js";
+import { OKLab, OKLCH, OKHSV, OKHSL } from "./spaces/oklab.js";
+import { sRGB, sRGBLinear, sRGBGamut } from "./spaces/srgb.js";
+import {
+  DisplayP3,
+  DisplayP3Linear,
+  DisplayP3Gamut,
+} from "./spaces/display-p3.js";
+import { Rec2020, Rec2020Linear, Rec2020Gamut } from "./spaces/rec2020.js";
+import { A98RGB, A98RGBLinear, A98RGBGamut } from "./spaces/a98-rgb.js";
+import { ProPhotoRGB, ProPhotoRGBLinear } from "./spaces/prophoto-rgb.js";
+
+export * from "./spaces/xyz.js";
+export * from "./spaces/oklab.js";
+export * from "./spaces/srgb.js";
+export * from "./spaces/display-p3.js";
+export * from "./spaces/rec2020.js";
+export * from "./spaces/a98-rgb.js";
+export * from "./spaces/prophoto-rgb.js";
+
+export const listColorSpaces = () => {
+  return [
+    XYZ, // D65
+    XYZD50,
+    OKLab,
+    OKLCH,
+    OKHSV,
+    OKHSL,
+    sRGB,
+    sRGBLinear,
+    DisplayP3,
+    DisplayP3Linear,
+    Rec2020,
+    Rec2020Linear,
+    A98RGB,
+    A98RGBLinear,
+    ProPhotoRGB,
+    ProPhotoRGBLinear,
+  ];
+};
+
+export const listColorGamuts = () => {
+  return [sRGBGamut, DisplayP3Gamut, Rec2020Gamut, A98RGBGamut];
+};

package/src/util.js

@@ -0,0 +1,119 @@
+const GAMUT_EPSILON = 0.000075;
+
+export const clamp = (value, min, max) => Math.max(Math.min(value, max), min);
+
+export const lerp = (min, max, t) => min * (1 - t) + max * t;
+
+export const degToRad = (n) => (n * Math.PI) / 180;
+
+export const radToDeg = (n) => (n * 180) / Math.PI;
+
+export const constrainAngle = (angle) => ((angle % 360) + 360) % 360;
+
+export const hexToRGB = (str, out = vec3()) => {
+  let hex = str.replace(/#/, "");
+  if (hex.length === 3) {
+    // expand shorthand
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  } else if (hex.length > 6) {
+    // discard alpha
+    hex = hex.slice(0, 6);
+  }
+  const rgb = parseInt(hex, 16);
+  out[0] = ((rgb >> 16) & 0xff) / 0xff;
+  out[1] = ((rgb >> 8) & 0xff) / 0xff;
+  out[2] = (rgb & 0xff) / 0xff;
+  return out;
+};
+
+export const RGBtoHex = (rgb) =>
+  `#${rgb.map((n) => floatToByte(n).toString(16).padStart(2, "0")).join("")}`;
+
+export const isRGBInGamut = (lrgb, ep = GAMUT_EPSILON) => {
+  const r = lrgb[0];
+  const g = lrgb[1];
+  const b = lrgb[2];
+  return (
+    r >= -ep &&
+    r <= 1 + ep &&
+    g >= -ep &&
+    g <= 1 + ep &&
+    b >= -ep &&
+    b <= 1 + ep
+  );
+};
+
+export const clampedRGB = (rgb, out = vec3()) => {
+  out[0] = clamp(rgb[0], 0, 1);
+  out[1] = clamp(rgb[1], 0, 1);
+  out[2] = clamp(rgb[2], 0, 1);
+  return out;
+};
+
+export const xyY_to_XYZ = (arg, out = vec3()) => {
+  let X, Y, Z, x, y;
+  x = arg[0];
+  y = arg[1];
+  Y = arg[2];
+  if (y === 0) {
+    out[0] = out[1] = out[2] = 0;
+    return out;
+  }
+  X = (x * Y) / y;
+  Z = ((1 - x - y) * Y) / y;
+  out[0] = X;
+  out[1] = Y;
+  out[2] = Z;
+  return out;
+};
+
+export const XYZ_to_xyY = (arg, out = vec3()) => {
+  let sum, X, Y, Z;
+  X = arg[0];
+  Y = arg[1];
+  Z = arg[2];
+  sum = X + Y + Z;
+  if (sum === 0) {
+    out[0] = out[1] = 0;
+    out[2] = Y;
+    return out;
+  }
+  out[0] = X / sum;
+  out[1] = Y / sum;
+  out[2] = Y;
+  return out;
+};
+
+export const floatToByte = (n) => clamp(Math.round(255 * n), 0, 255);
+
+// Undocumented
+
+export const vec3 = () => [0, 0, 0];
+
+// export const normalizeHue = (hue) => ((hue = hue % 360) < 0 ? hue + 360 : hue);
+
+// in degrees
+// export const angle_delta = (angle1, angle2) => {
+//   const diff = ((angle2 - angle1 + 180) % 360) - 180;
+//   return diff < -180 ? diff + 360 : diff;
+// };
+
+// function shortAngleDistRad(a0, a1) {
+//   var max = Math.PI * 2;
+//   var da = (a1 - a0) % max;
+//   return ((2 * da) % max) - da;
+// }
+
+// function shortAngleDistDeg(a0, a1) {
+//   var max = 360;
+//   var da = (a1 - a0) % max;
+//   return ((2 * da) % max) - da;
+// }
+
+// function lerpAngleRad(a0, a1, t) {
+//   return a0 + shortAngleDistRad(a0, a1) * t;
+// }
+
+// function lerpAngleDeg(a0, a1, t) {
+//   return radToDeg(lerpAngleRad(degToRad(a0), degToRad(a1), t));
+// }

package/test/almost-equal.js

@@ -0,0 +1,15 @@
+const EPSILON = Math.pow(2, -33); // ~= 0.0000000001
+
+export default function arrayAlmostEqual(a, b, tolerance = EPSILON) {
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    const p0 = a[i];
+    const p1 = b[i];
+    if (p0 !== p1) {
+      const diff = Math.abs(p1 - p0);
+      if (diff > tolerance) return false;
+    }
+  }
+  return true;
+}