@texel/color 1.0.3 → 1.0.5

package/README.md

@@ -93,9 +93,7 @@ import { gamutMapOKLCH, sRGBGamut, sRGBLinear, OKLCH } from "@texel/color";
 // gamut map to sRGB but return linear sRGB
 const lrgb = gamutMapOKLCH(oklch, sRGBGamut, sRGBLinear);
 
-// or gamut map to sRGB but return OKLCH
-// note, when finally converting this back to sRGB you will likely
-// want to clip the result to 0..1 bounds due to floating point loss
+// or gamut map to sRGB but return OKLCH (does not perform RGB clip)
 const lch = gamutMapOKLCH(oklch, sRGBGamut, OKLCH);
 ```
 
@@ -118,6 +116,8 @@ gamutMapOKLCH(oklch, sRGBGamut, sRGB, rgb, MapToL);
 
 The `cusp` can also be passed as the last parameter, allowing for faster evaluation for known hues. See below for calculating the cusp.
 
+> **Note:** If you map to an OKLab-based target (OKLCH, OKHSL etc), the final step of RGB clipping will be skipped. This produces more predictable OKLab and OKLCH based results, but you will likely want to perform a final clampedRGB() step when converting to a displayable color.
+
 #### `LC = findCuspOKLCH(a, b, gamut, out = [0, 0])`
 
 Finds the 'cusp' of a given OKLab hue plane (denoted with normalized `a` and `b` values in OKLab space), returning the `[L, C]` (lightness and chroma). This is useful for pre-computing aspects of gamut mapping when you are working across a known hue:
@@ -147,19 +147,35 @@ gamutMapOKLCH(oklch, gamut, gamut.space, out, MapToCuspL, cuspLC);
 
 The `a` and `b` can also be from OKLab coordinates, but must be normalized so `a^2 + b^2 == 1`.
 
-#### `str = serialize(coords, inputSpace = sRGB, outputSpace = inputSpace)`
+#### `str = serialize(coords, inputSpace, outputSpace = inputSpace)`
 
-Turns the specified `coords` (assumed to be in `inputSpace`) into a string, first converting if needed to the specified `outputSpace`. If the space is sRGB, a plain `rgb(r,g,b)` string (in bytes) will be used for browser compatibility and performance, otherwise a CSS color string will be returned. Note that not all spaces, such as certain linear spaces, are currently supported by CSS.
+Turns the specified `coords` (assumed to be in `inputSpace`) into a string, first converting if needed to the specified `outputSpace`. If the space is sRGB, a plain `rgb(r,g,b)` string (in bytes) will be used for browser compatibility and performance, otherwise a CSS color string will be returned. Note that not all spaces, such as certain linear spaces, are currently supported by CSS. You can optionally pass an `alpha` component (0..1 range) as the fourth element in the `coords` array for it to be considered.
 
 ```js
 import { serialize, sRGB, DisplayP3, OKLCH } from "@texel/color";
 
 serialize([0, 0.5, 1], sRGB); // "rgb(0, 128, 255)"
+serialize([0, 0.5, 1, 0.5], sRGB); // "rgba(0, 128, 255, 0.5)"
 serialize([0, 0.5, 1], DisplayP3); // "color(display-p3 0 0.5 1)"
+serialize([0, 0.5, 1, 0.35], DisplayP3); // "color(display-p3 0 0.5 1 / 0.35)"
 serialize([1, 0, 0], OKLCH, sRGB); // "rgb(255, 255, 255)"
 serialize([1, 0, 0], OKLCH); // "oklch(1 0 0)"
 ```
 
+#### `coords = deserialize(colorString)`
+
+The inverse of `serialize`, this will take a string and determine the color space `id` it is referencing, and the 3 or 4 (for alpha) `coords`. This is intentionally limited in functionality, only supporting hex RGB, `rgb()` and `rgba()` bytes, and `oklch()`, `oklab()`, and plain `color()` functions with no modifiers.
+
+```js
+import { deserialize } from "@texel/color";
+
+const { coords, id } = deserialize("color(display-p3 0 0.5 1 / 0.35)");
+console.log(id); // "display-p3"
+console.log(coords); // [ 0, 0.5, 1, 0.35 ]
+```
+
+> **Note:** Parsing is still a WIP area of API design, and complex CSS color string handling is not within the scope of this library.
+
 #### `delta = deltaEOK(oklabA, oklabB)`
 
 Performs a color difference in OKLab space between two coordinates. As this is a perceptually uniform color space that improves upon CIELAB and its flaws, it should be suitable as a replacement for the CIEDE2000 color difference equation in many situations.
@@ -293,6 +309,8 @@ import {
   LMS_to_XYZ_M,
   XYZ_to_LMS_M,
   sRGB,
+  OKHSLToOKLab,
+  DisplayP3Gamut,
 } from "@texel/color";
 
 console.log(XYZ_to_linear_sRGB_M); // [ [a,b,c], ... ]
@@ -301,6 +319,10 @@ OKLab_from(xyzD65, XYZ_to_LMS_M); // XYZ D65 -> OKLab
 transform(xyzD65, XYZ_to_linear_sRGB_M); // XYZ D65 -> sRGBLinear
 sRGB.fromBase(in_linear_sRGB, out_sRGB); // linear to gamma transfer function
 sRGB.toBase(in_sRGB, out_linear_sRGB); // linear to gamma transfer function
+
+// OKHSL in a non-sRGB gamut
+// also see OKHSVToOKLab and their inverse functions
+OKHSLToOKLab([h, s, l], DisplayP3Gamut, optionalOutVec);
 ```
 
 ## Notes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texel/color",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "a minimal and modern color library",
   "type": "module",
   "main": "./src/index.js",

package/src/core.js

@@ -1,6 +1,6 @@
-import { floatToByte, vec3 } from "./util.js";
+import { clamp, floatToByte, hexToRGB, vec3 } from "./util.js";
 import { LMS_to_OKLab_M, OKLab_to_LMS_M } from "./conversion_matrices.js";
-import { XYZ } from "./spaces.js";
+import { listColorSpaces, sRGB, XYZ } from "./spaces.js";
 
 const tmp3 = vec3();
 
@@ -51,25 +51,131 @@ const vec3Copy = (input, output) => {
 
 export const serialize = (input, inputSpace, outputSpace = inputSpace) => {
   if (!inputSpace) throw new Error(`must specify an input space`);
+  // extract alpha if present
+  let alpha = 1;
+  if (input.length > 3) {
+    alpha = input[3];
+  }
+  // copy into temp
+  vec3Copy(input, tmp3);
+  // convert if needed
   if (inputSpace !== outputSpace) {
     convert(input, inputSpace, outputSpace, tmp3);
-  } else {
-    vec3Copy(input, tmp3);
   }
-
   const id = outputSpace.id;
   if (id == "srgb") {
     const r = floatToByte(tmp3[0]);
     const g = floatToByte(tmp3[1]);
     const b = floatToByte(tmp3[2]);
-    return `rgb(${r}, ${g}, ${b})`;
-  } else if (id == "oklab" || id == "oklch") {
-    return `${id}(${tmp3[0]} ${tmp3[1]} ${tmp3[2]})`;
+    const rgb = `${r}, ${g}, ${b}`;
+    return alpha === 1 ? `rgb(${rgb})` : `rgba(${rgb}, ${alpha})`;
   } else {
-    return `color(${id} ${tmp3[0]} ${tmp3[1]} ${tmp3[2]})`;
+    const alphaSuffix = alpha === 1 ? "" : ` / ${alpha}`;
+    if (id == "oklab" || id == "oklch") {
+      return `${id}(${tmp3[0]} ${tmp3[1]} ${tmp3[2]}${alphaSuffix})`;
+    } else {
+      return `color(${id} ${tmp3[0]} ${tmp3[1]} ${tmp3[2]}${alphaSuffix})`;
+    }
   }
 };
 
+const stripAlpha = (coords) => {
+  if (coords.length >= 4 && coords[3] === 1) return coords.slice(0, 3);
+  return coords;
+};
+
+export const deserialize = (input) => {
+  if (typeof input !== "string") {
+    throw new Error(`expected a string as input`);
+  }
+  input = input.trim();
+  if (input.charAt(0) === "#") {
+    const rgbIn = input.slice(0, 7);
+    let alphaByte = input.length > 7 ? parseInt(input.slice(7, 9), 16) : 255;
+    let alpha = isNaN(alphaByte) ? 1 : alphaByte / 255;
+    const coords = hexToRGB(rgbIn);
+    if (alpha !== 1) coords.push(alpha);
+    return {
+      id: "srgb",
+      coords,
+    };
+  } else {
+    const parts = /^(rgb|rgba|oklab|oklch|color)\((.+)\)$/i.exec(input);
+    if (!parts) {
+      throw new Error(`could not parse color string ${input}`);
+    }
+    const fn = parts[1].toLowerCase();
+    if (/^rgba?$/i.test(fn)) {
+      const hasAlpha = fn == "rgba";
+      const coords = parts[2]
+        .split(",")
+        .map((v, i) =>
+          i < 3 ? clamp(parseInt(v, 10) || 0, 0, 255) / 255 : parseFloat(v)
+        );
+      const expectedLen = hasAlpha ? 4 : 3;
+      if (coords.length !== expectedLen) {
+        throw new Error(
+          `got ${fn} with incorrect number of coords, expected ${expectedLen}`
+        );
+      }
+      return {
+        id: "srgb",
+        coords: stripAlpha(coords),
+      };
+    } else {
+      let id, coordsStrings;
+      if (fn === "color") {
+        const params =
+          /([^\s]+)\s+([^\s]+)\s+([^\s]+)\s+([^\s/]+)(?:\s?\/\s?([^\s]+))?/.exec(
+            parts[2]
+          );
+        if (!params)
+          throw new Error(`could not parse color() function ${input}`);
+        id = params[1].toLowerCase();
+        coordsStrings = params.slice(2, 6);
+      } else if (/^(oklab|oklch)$/.test(fn)) {
+        id = fn;
+        const params =
+          /([^\s]+)\s+([^\s]+)\s+([^\s/]+)(?:\s?\/\s?([^\s]+))?/.exec(parts[2]);
+        if (!params)
+          throw new Error(`could not parse color() function ${input}`);
+        coordsStrings = params.slice(1, 6);
+      }
+
+      if (coordsStrings[3] == null) {
+        coordsStrings = coordsStrings.slice(0, 3);
+      }
+
+      const coords = coordsStrings.map((f) => parseFloat(f));
+      if (coords.length < 3 || coords.length > 4)
+        throw new Error(`invalid number of coordinates`);
+      return {
+        id,
+        coords: stripAlpha(coords),
+      };
+    }
+  }
+};
+export const parse = (input, targetSpace, out = vec3()) => {
+  if (!targetSpace)
+    throw new Error(`must specify a target space to parse into`);
+
+  const { coords, id } = deserialize(input);
+  const space = listColorSpaces().find((f) => id === f.id);
+  if (!space) throw new Error(`could not find space with the id ${id}`);
+  const alpha = coords.length === 4 ? coords[3] : 1;
+
+  // copy 3D coords to output and convert
+  vec3Copy(coords, out);
+  convert(out, space, targetSpace, out);
+
+  // store alpha
+  if (alpha !== 1) out[3] = alpha;
+  // reduce to 3D
+  if (alpha == 1 && out.length === 4) out.pop();
+  return out;
+};
+
 export const convert = (input, fromSpace, toSpace, out = vec3()) => {
   // place into output
   vec3Copy(input, out);

package/src/gamut.js

@@ -288,11 +288,16 @@ export const gamutMapOKLCH = (
   // convert oklch to base gamut space (i.e. linear sRGB)
   convert(out, OKLCH, gamutSpaceBase, rgbVec);
 
-  // Note: if the distance lies under this threshold, it's unlikely
-  // that gamut mapping will do anything, and it may simply produce a new
-  // point that lies the same or similar distance away from the gamut edge
-  // see test/test-gamut-epsilon.js
-  const RGB_CLIP_EPSILON = 0.000074;
+  // Note: this is a possible area of performance improvement for some edge cases
+  // If you gamut map without clipping, you end up lying on the edge of the gamut,
+  // but in some cases very slightly out of gamut. Gamut mapping *again* is redundant
+  // as it will produce the same result; and in those cases, it should just skip straight
+  // to clipping. So, in theory, a small epsilon like 1e-7 would catch these and prevent redundant gamut mapping.
+  // See test/check-gamut-epsilon.js
+  // However, in practice, inputs to this function are likely not going to be already-mapped-but-not-clipped points,
+  // so we are talking about a very negligible improvement, and it is probably better to be accurate in as many cases
+  // as possible than to shave off a little time.
+  const RGB_CLIP_EPSILON = 0;
 
   // check where the point lies in gamut space
   if (!isRGBInGamut(rgbVec, RGB_CLIP_EPSILON)) {
@@ -320,6 +325,19 @@ export const gamutMapOKLCH = (
     out[0] = lerp(LTarget, L, t);
     out[1] *= t;
 
+    // Note: if requested targetSpace is base=OKLCH, we can return early.
+    // note this creates a potential difference compared to going to other targetSpaces:
+    // a) mapping to sRGB then finally converting back to OKLCH the result may be lossy in
+    //    some coordinates that you might not expect, e.g. hue loss when hue should be unchanged
+    //    during gamut mapping, due to conversion / floating point math
+    // b) if you map to sRGB it will perform clipping, but if you map to OKLCH then no sRGB clipping
+    //    will be applied. The OKLCH result is _basically_ in gamut, but not exactly; you'll need to clip at final stage.
+    // I've documented this behaviour in the readme.
+    const targetSpaceBase = targetSpace.base ?? targetSpace;
+    if (targetSpaceBase.id == "oklab") {
+      return convert(out, OKLCH, targetSpace, out);
+    }
+
     // now that we have a LCH that sits on (or nearly on) the gamut, convert again to linear space
     convert(out, OKLCH, gamutSpaceBase, rgbVec);
   }

package/test/canvas-graph.js

@@ -13,12 +13,13 @@ import {
   constrainAngle,
   floatToByte,
   isRGBInGamut,
+  clampedRGB,
 } from "../src/index.js";
 import arrayAlmostEqual from "./almost-equal.js";
 
 const settings = {
   dimensions: [768, 768],
-  animate: true,
+  animate: false,
   playbackRate: "throttle",
   fps: 2,
   attributes: {
@@ -34,7 +35,8 @@ const sketch = ({ width, height }) => {
 
     context.fillStyle = "gray";
     context.fillRect(0, 0, width, height);
-    const H = constrainAngle((frame * 45) / 2);
+    const H = 264.1;
+    // const H = constrainAngle((frame * 45) / 2);
 
     // console.time("map");
     // console.profile("map");
@@ -123,7 +125,7 @@ const sketch = ({ width, height }) => {
         context.lineTo(...LCtoXY(mapped));
         context.stroke();
         context.globalAlpha = 1;
-        drawLCPoint(context, mapped.slice(0, 2), radius, "white");
+        drawLCPoint(context, mapped.slice(0, 2), radius / 4, "white");
       } else {
         drawLCPoint(context, lc, radius);
       }

package/test/check-gamut-epsilon.js

@@ -0,0 +1,136 @@
+// When gamut mapping with OKLCH approximation,
+// the resulting points do not always lie exactly in gamut.
+// The same may be true of OKHSL to RGB spaces.
+// Let's figure out how far away they are:
+// if a given point is under this threshold, gamut mapping
+// will be redundant as it will just produce the same epsilon.
+// This value is used in gamut.js as the RGB_CLIP_EPSILON
+
+import {
+  clampedRGB,
+  convert,
+  degToRad,
+  findCuspOKLCH,
+  findGamutIntersectionOKLCH,
+  gamutMapOKLCH,
+  isRGBInGamut,
+  lerp,
+  MapToCuspL,
+  OKLCH,
+  sRGB,
+  sRGBGamut,
+  sRGBLinear,
+} from "../src/index.js";
+
+const gamut = sRGBGamut;
+const target = gamut.space.base; // linear form
+
+// slice the plane into a square
+const slices = 100;
+let avgDelta = 0;
+let avgCount = 0;
+let minDelta = Infinity;
+let maxDelta = -Infinity;
+
+// a very small number which still catches many gamut-mapped points
+// but produces very little difference in practical and visual results
+const RGB_CLIP_EPSILON = 0.0000001;
+let totalPointsOutOfGamut = 0;
+let totalPointsUnderEpsilon = 0;
+let totalPointsUnderEpsilonBeforeMapping = 0;
+
+// this particular hue is a little funky
+// https://github.com/color-js/color.js/issues/81
+// it produces out of gamut sRGB, however, the oklab gamut approximation seems to handle it fine
+const hue = 264.1;
+const lightness = 0.4;
+for (let chroma = 0.22; chroma < 0.285; chroma += 0.001) {
+  const oklch = [lightness, chroma, hue];
+  const rgb = convert(oklch, OKLCH, sRGBLinear);
+  if (!isRGBInGamut(rgb, 0)) {
+    const mappedOKLCH = gamutMapWithoutClipOKLCH(oklch);
+    const mappedRGB = convert(mappedOKLCH, OKLCH, sRGBLinear);
+    const delta = clipDelta(mappedRGB);
+    if (!delta.every((n) => n == 0)) console.log("hue", hue, "delta", delta);
+  }
+}
+
+// test all hue planes Nº difference apart
+// we will see some gamut mapped points still do not lie exactly in gamut
+for (let H = 0; H < 360; H += 0.5) {
+  for (let y = 0; y < slices; y++) {
+    for (let x = 0; x < slices; x++) {
+      const u = x / (slices - 1);
+      const v = y / (slices - 1);
+      const L = 1 - v;
+      const C = u * 0.4;
+
+      // try conversion
+      let rgbl = convert([L, C, H], OKLCH, target);
+
+      // not exactly in space
+      if (!isRGBInGamut(rgbl, 0)) {
+        // check epsilons
+        if (isRGBInGamut(rgbl, RGB_CLIP_EPSILON)) {
+          totalPointsUnderEpsilonBeforeMapping++;
+        }
+
+        const oklch = gamutMapWithoutClipOKLCH([L, C, H]);
+        rgbl = convert(oklch, OKLCH, target);
+
+        const [dr, dg, db] = clipDelta(rgbl);
+        const avg = (dr + dg + db) / 3;
+        const min = Math.min(dr, dg, db);
+        const max = Math.max(dr, dg, db);
+        avgDelta += avg;
+        avgCount++;
+        minDelta = Math.min(min, minDelta);
+        maxDelta = Math.max(max, maxDelta);
+
+        totalPointsOutOfGamut++;
+        if (isRGBInGamut(rgbl, RGB_CLIP_EPSILON)) {
+          totalPointsUnderEpsilon++;
+        }
+      }
+    }
+  }
+}
+
+function clipDelta(rgb) {
+  const clipped = clampedRGB(rgb);
+  const dr = Math.abs(rgb[0] - clipped[0]);
+  const dg = Math.abs(rgb[1] - clipped[1]);
+  const db = Math.abs(rgb[2] - clipped[2]);
+  return [dr, dg, db];
+}
+
+function gamutMapWithoutClipOKLCH(oklch) {
+  const [L, C, H] = oklch;
+  // we aren't in gamut, so let's map toward it
+  const hueAngle = degToRad(H);
+  const aNorm = Math.cos(hueAngle);
+  const bNorm = Math.sin(hueAngle);
+
+  const out = [L, C, H];
+  // choose our strategy
+  const cusp = findCuspOKLCH(aNorm, bNorm, gamut);
+  const LTarget = MapToCuspL(out, cusp);
+
+  let t = findGamutIntersectionOKLCH(aNorm, bNorm, L, C, LTarget, cusp, gamut);
+  out[0] = lerp(LTarget, L, t);
+  out[1] *= t;
+  return out;
+}
+
+avgDelta /= avgCount;
+
+console.log("Min Epsilon:", minDelta);
+console.log("Max Epsilon:", maxDelta);
+console.log("Average Epsilon:", avgDelta);
+console.log("Compare against epsilon:", RGB_CLIP_EPSILON);
+console.log("Total points out of gamut:", totalPointsOutOfGamut);
+console.log(
+  "Total points under epsilon (before map):",
+  totalPointsUnderEpsilonBeforeMapping
+);
+console.log("Total points under epsilon (after map):", totalPointsUnderEpsilon);

package/test/test.js

@@ -42,6 +42,8 @@ import {
   A98RGBLinear,
   XYZ_to_linear_A98RGB_M,
   DisplayP3Gamut,
+  deserialize,
+  parse,
 } from "../src/index.js";
 
 test("should convert XYZ in different whitepoints", async (t) => {
@@ -229,6 +231,92 @@ test("should serialize", async (t) => {
   t.deepEqual(serialize([0, 0.5, 1], sRGBLinear), "color(srgb-linear 0 0.5 1)");
   t.deepEqual(serialize([1, 0, 0], OKLCH, sRGB), "rgb(255, 255, 255)");
   t.deepEqual(serialize([1, 0, 0], OKLCH), "oklch(1 0 0)");
+  t.deepEqual(serialize([1, 0, 0], OKLab), "oklab(1 0 0)");
+  t.deepEqual(
+    serialize([1, 0, 0, 0.4523], OKLCH, sRGB),
+    "rgba(255, 255, 255, 0.4523)"
+  );
+  t.deepEqual(
+    serialize([1, 0, 0, 0.4523], OKLCH, OKLCH),
+    "oklch(1 0 0 / 0.4523)"
+  );
+  t.deepEqual(serialize([1, 0, 0, 0.4523], OKLCH), "oklch(1 0 0 / 0.4523)");
+  t.deepEqual(
+    serialize([1, 0, 0, 0.4523], DisplayP3),
+    "color(display-p3 1 0 0 / 0.4523)"
+  );
+});
+
+test("should parse to a color coord", async (t) => {
+  t.deepEqual(parse("rgb(0, 128, 255)", sRGB), [0, 128 / 0xff, 255 / 0xff]);
+  t.deepEqual(parse("rgba(0, 128, 255, .25)", sRGB), [
+    0,
+    128 / 0xff,
+    255 / 0xff,
+    0.25,
+  ]);
+  let outVec = [0, 0, 0];
+  t.deepEqual(parse("rgba(0, 128, 255, 1)", sRGB), [0, 128 / 0xff, 255 / 0xff]);
+  let out;
+  out = parse("rgba(0, 128, 255, 1)", sRGB, outVec);
+  t.deepEqual(out, [0, 128 / 0xff, 255 / 0xff]);
+  t.equal(out, outVec);
+
+  // trims to 3
+  outVec = [0, 0, 0, 0];
+  out = parse("rgba(0, 128, 255, 1)", sRGB, outVec);
+  t.deepEqual(out, [0, 128 / 0xff, 255 / 0xff]);
+  t.equal(out, outVec);
+
+  // ensures 4
+  outVec = [0, 0, 0, 0];
+  out = parse("rgba(0, 128, 255, 0.91)", sRGB, outVec);
+  t.deepEqual(out, [0, 128 / 0xff, 255 / 0xff, 0.91]);
+  t.equal(out, outVec);
+
+  t.deepEqual(
+    serialize(parse("oklch(1 0 0)", sRGB), sRGB),
+    "rgb(255, 255, 255)"
+  );
+});
+
+test("should deserialize color string information", async (t) => {
+  t.deepEqual(deserialize("rgb(0, 128, 255)"), {
+    coords: [0, 128 / 0xff, 255 / 0xff],
+    id: "srgb",
+  });
+  t.deepEqual(deserialize("rgba(0, 128, 255, 0.35)"), {
+    coords: [0, 128 / 0xff, 255 / 0xff, 0.35],
+    id: "srgb",
+  });
+  t.deepEqual(deserialize("#ff00cc"), {
+    id: "srgb",
+    coords: [1, 0, 0.8],
+  });
+  t.deepEqual(deserialize("#ff00cccc"), {
+    id: "srgb",
+    coords: [1, 0, 0.8, 0.8],
+  });
+  t.deepEqual(deserialize("color(srgb-linear 0 0.5 1)"), {
+    id: "srgb-linear",
+    coords: [0, 0.5, 1],
+  });
+  t.deepEqual(deserialize("color(srgb-linear 0 0.5 1/0.25)"), {
+    id: "srgb-linear",
+    coords: [0, 0.5, 1, 0.25],
+  });
+  t.deepEqual(deserialize("color(srgb-linear 0 0.5 1 / 0.25)"), {
+    id: "srgb-linear",
+    coords: [0, 0.5, 1, 0.25],
+  });
+  t.deepEqual(deserialize("oklch(1 0 0)"), {
+    id: "oklch",
+    coords: [1, 0, 0],
+  });
+  t.deepEqual(deserialize("oklch(1 0 0/0.25)"), {
+    id: "oklch",
+    coords: [1, 0, 0, 0.25],
+  });
 });
 
 test("utils", async (t) => {

package/test/test-gamut-epsilon.js

@@ -1,107 +0,0 @@
-// When gamut mapping with OKLCH approximation,
-// the resulting points do not always lie exactly in gamut.
-// The same may be true of OKHSL to RGB spaces.
-// Let's figure out how far away they are:
-// if a given point is under this threshold, gamut mapping
-// will be redundant as it will just produce the same epsilon.
-// This value is used in gamut.js as the RGB_CLIP_EPSILON
-
-import {
-  A98RGBGamut,
-  clampedRGB,
-  convert,
-  degToRad,
-  DisplayP3Gamut,
-  findCuspOKLCH,
-  findGamutIntersectionOKLCH,
-  gamutMapOKLCH,
-  isRGBInGamut,
-  lerp,
-  MapToCuspL,
-  OKLCH,
-  Rec2020Gamut,
-  sRGBGamut,
-} from "../src/index.js";
-
-const huePlanes = Array(360)
-  .fill()
-  .map((_, i) => i);
-const gamut = sRGBGamut;
-const target = gamut.space.base; // linear form
-
-// slice the plane into a square
-const slices = 100;
-let avgDelta = 0;
-let avgCount = 0;
-let minDelta = Infinity;
-let maxDelta = -Infinity;
-
-const EPSILON = 0.000074;
-let totalPointsOutOfGamut = 0;
-let totalPointsUnderEpsilon = 0;
-
-for (let H = 0; H < 360; H += 0.5) {
-  for (let y = 0; y < slices; y++) {
-    for (let x = 0; x < slices; x++) {
-      const u = x / (slices - 1);
-      const v = y / (slices - 1);
-      const L = 1 - v;
-      const C = u * 0.4;
-
-      // try conversion
-      const rgbl = convert([L, C, H], OKLCH, target);
-
-      // not exactly in space
-      if (!isRGBInGamut(rgbl, 0)) {
-        // we aren't in gamut, so let's map toward it
-        const hueAngle = degToRad(H);
-        const aNorm = Math.cos(hueAngle);
-        const bNorm = Math.sin(hueAngle);
-
-        const out = [L, C, H];
-        // choose our strategy
-        const cusp = findCuspOKLCH(aNorm, bNorm, gamut);
-        const LTarget = MapToCuspL(out, cusp);
-
-        let t = findGamutIntersectionOKLCH(
-          aNorm,
-          bNorm,
-          L,
-          C,
-          LTarget,
-          cusp,
-          gamut
-        );
-        out[0] = lerp(LTarget, L, t);
-        out[1] *= t;
-
-        // convert again to rgb linear
-        const rgbl = convert(out, OKLCH, target);
-        const clipped = clampedRGB(rgbl);
-        const dr = Math.abs(rgbl[0] - clipped[0]);
-        const dg = Math.abs(rgbl[1] - clipped[1]);
-        const db = Math.abs(rgbl[2] - clipped[2]);
-        const avg = (dr + dg + db) / 3;
-        const min = Math.min(dr, dg, db);
-        const max = Math.max(dr, dg, db);
-        avgDelta += avg;
-        avgCount++;
-        minDelta = Math.min(min, minDelta);
-        maxDelta = Math.max(max, maxDelta);
-
-        totalPointsOutOfGamut++;
-        if (isRGBInGamut(rgbl, EPSILON)) {
-          totalPointsUnderEpsilon++;
-        }
-      }
-    }
-  }
-}
-avgDelta /= avgCount;
-
-console.log("Min Epsilon:", minDelta);
-console.log("Max Epsilon:", maxDelta);
-console.log("Average Epsilon:", avgDelta);
-console.log("Compare against epsilon:", EPSILON);
-console.log("Total points out of gamut:", totalPointsOutOfGamut);
-console.log("Total points under epsilon:", totalPointsUnderEpsilon);