color-bits 0.1.0

package/README.md

@@ -0,0 +1,3 @@
+# color-bits
+
+Fast & efficient color manipulation library.

package/babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    "@babel/preset-typescript"
+  ]
+}

package/jest.config.js

@@ -0,0 +1,9 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+export default {
+  extensionsToTreatAsEsm: ['.ts'],
+  transform: {
+    '\\.ts$': ['ts-jest', {
+      useESM: true,
+    }],
+  },
+};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "color-bits",
+  "version": "0.1.0",
+  "main": "index.js",
+  "exports": {
+    ".": "./build/index.js",
+    "./*": "./build/*"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-typescript": "^7.24.7",
+    "@jest/globals": "^29.7.0",
+    "@types/chai": "^4.3.19",
+    "@types/jest": "^29.5.12",
+    "chai": "^5.1.1",
+    "jest": "^29.7.0",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.5.4"
+  },
+  "scripts": {
+    "build": "tsc",
+    "start": "tsc --watch",
+    "test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest --watch"
+  }
+}

package/src/bit.ts

@@ -0,0 +1,27 @@
+// Bitwise functions
+//
+// The color representation would ideally be 32-bits unsigned, but JS bitwise
+// operators only work as 32-bits signed. The range of Smi values on V8 is also
+// 32-bits signed. Those two factors make it that it's much more efficient to just
+// use signed integers to represent the data.
+//
+// Colors with a R channel >= 0x80 will be a negative number, but that's not really
+// an issue at any point because the bits for signed and unsigned integers are always
+// the same, only their interpretation changes.
+
+const INT32_TO_UINT32_OFFSET = 2 ** 32;
+
+export function cast(n: number) {
+  if (n < 0) {
+    return n + INT32_TO_UINT32_OFFSET;
+  }
+  return n;
+}
+
+export function get(n: number, offset: number) {
+  return (n >> offset) & 0xff;
+}
+
+export function set(n: number, offset: number, byte: number) {
+  return n ^ ((n ^ (byte << offset)) & (0xff << offset)); 
+}

package/src/color.test.ts

@@ -0,0 +1,66 @@
+import { expect } from 'chai'
+import * as Color from './index';
+
+const c = Color.from;
+
+describe('Color', () => {
+  it('can encode/decode the representation', () => {
+    const color = Color.from(0x599eff80)
+    expect(Color.getRed(color)).to.equal(0x59)
+    expect(Color.getGreen(color)).to.equal(0x9e)
+    expect(Color.getBlue(color)).to.equal(0xff)
+    expect(Color.getAlpha(color)).to.equal(0x80)
+  });
+
+  it('can set channels', () => {
+    const color = Color.parse('#ffffff')
+    expect(Color.setRed(color, 0)).to.equal(c(0x00ffffff))
+    expect(Color.setGreen(color, 0)).to.equal(c(0xff00ffff))
+    expect(Color.setBlue(color, 0)).to.equal(c(0xffff00ff))
+    expect(Color.setAlpha(color, 0)).to.equal(c(0xffffff00))
+  });
+
+  describe('.parse():', () => {
+    it('parses CSS hexadecimal', () => {
+      expect(Color.parse('#59f')).to.equal(c(0x5599ffff));
+      expect(Color.parse('#5599ff')).to.equal(c(0x5599ffff));
+      expect(Color.parse('#5599ffff')).to.equal(c(0x5599ffff));
+    });
+
+    it('parses CSS color spaces', () => {
+      ['rgb', 'rgba'].forEach(type => {
+        expect(Color.parse(`${type}(255 153 85)`)).to.equal(c(0xff9955ff));
+        expect(Color.parse(`${type}(255, 153, 85)`)).to.equal(c(0xff9955ff));
+        expect(Color.parse(`${type}(255 153 85 / 50%)`)).to.equal(c(0xff995580));
+        expect(Color.parse(`${type}(255 153 85 /  .5)`)).to.equal(c(0xff995580));
+        expect(Color.parse(`${type}(255 153 85 / 0.5)`)).to.equal(c(0xff995580));
+      });
+
+      ['hsl', 'hsla'].forEach(type => {
+        expect(Color.parse(`${type}(50deg 80% 40% / 50%)`)).to.equal(c(0xb89c1480));
+        expect(Color.parse(`${type}(50deg 80% 40% / 0.5)`)).to.equal(c(0xb89c1480));
+        expect(Color.parse(`${type}(0 80% 40% / 0.5)`)).to.equal(c(0xb8141480));
+        expect(Color.parse(`${type}(none 80% 40% / 0.5)`)).to.equal(c(0xb8141480));
+        expect(Color.parse(`${type}(1turn 80% 40% / 0.5)`)).to.equal(c(0xb8141480));
+        expect(Color.parse(`${type}(400grad 80% 40% / 0.5)`)).to.equal(c(0xb8141480));
+        expect(Color.parse(`${type}(0rad 80% 40% / 0.5)`)).to.equal(c(0xb8141480));
+      });
+
+      expect(Color.parse('hwb(12 50% 0%)')).to.equal(c(0xff9980ff));
+      expect(Color.parse('hwb(50deg 30% 40%)')).to.equal(c(0x998c4dff));
+      expect(Color.parse('hwb(0.5turn 10% 0% / .5)')).to.equal(c(0x1affff80));
+
+      // FIXME:
+      // expect(Color.parse('lab(50% 40 59.5 / 0.5)')).to.equal(c(0xbf570080))
+      // expect(Color.parse('lch(52.2% 72.2 50 / 0.5)')).to.equal(c(0xcd561a80))
+
+      expect(Color.parse('color(srgb         1 0.5 0 / 0.5)')).to.equal(c(0xff800080))
+      expect(Color.parse('color(srgb-linear  1 0.5 0 / 0.5)')).to.equal(c(0xffbc0080))
+      expect(Color.parse('color(display-p3   1 0.5 0 / 0.5)')).to.equal(c(0xff760080))
+      expect(Color.parse('color(a98-rgb      1 0.5 0 / 0.5)')).to.equal(c(0xff810080))
+      expect(Color.parse('color(prophoto-rgb 1 0.5 0 / 0.5)')).to.equal(c(0xff630080))
+      expect(Color.parse('color(rec2020      1 0.5 0 / 0.5)')).to.equal(c(0xff720080))
+    });
+
+  });
+});

package/src/convert.ts

@@ -0,0 +1,392 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+//
+// Source: https://github.com/ChromeDevTools/devtools-frontend/blob/c51201e6ee70370f7f1ac8a1a49dca7d4561aeaa/front_end/core/common/ColorConverter.ts
+// License: https://github.com/ChromeDevTools/devtools-frontend/blob/c51201e6ee70370f7f1ac8a1a49dca7d4561aeaa/LICENSE
+
+/**
+ * Implementation of this module and all the tests are heavily influenced by
+ * https://source.chromium.org/chromium/chromium/src/+/main:ui/gfx/color_conversions.cc
+ */
+
+// https://en.wikipedia.org/wiki/CIELAB_color_space#Converting_between_CIELAB_and_CIEXYZ_coordinates
+const D50_X = 0.9642;
+const D50_Y = 1.0;
+const D50_Z = 0.8251;
+
+type Matrix3x3 = [
+  [number, number, number],
+  [number, number, number],
+  [number, number, number],
+];
+
+type Vector3 = [number, number, number];
+
+function multiply(matrix: Matrix3x3, other: Vector3): Vector3 {
+  const dst = [0, 0, 0] as Vector3;
+  for (let row = 0; row < 3; ++row) {
+    dst[row] = matrix[row][0] * other[0] + matrix[row][1] * other[1] +
+        matrix[row][2] * other[2];
+  }
+  return dst;
+}
+
+// A transfer function mapping encoded values to linear values,
+// represented by this 7-parameter piecewise function:
+//
+//   linear = sign(encoded) *  (c*|encoded| + f)       , 0 <= |encoded| < d
+//          = sign(encoded) * ((a*|encoded| + b)^g + e), d <= |encoded|
+//
+// (A simple gamma transfer function sets g to gamma and a to 1.)
+class TransferFunction {
+  g: number;
+  a: number;
+  b: number;
+  c: number;
+  d: number;
+  e: number;
+  f: number;
+
+  constructor(g: number, a: number, b: number = 0, c: number = 0, d: number = 0, e: number = 0, f: number = 0) {
+    this.g = g;
+    this.a = a;
+    this.b = b;
+    this.c = c;
+    this.d = d;
+    this.e = e;
+    this.f = f;
+  }
+
+  eval(val: number): number {
+    const sign = val < 0 ? -1.0 : 1.0;
+    const abs = val * sign;
+
+    // 0 <= |encoded| < d path
+    if (abs < this.d) {
+      return sign * (this.c * abs + this.f);
+    }
+
+    // d <= |encoded| path
+    return sign * (Math.pow(this.a * abs + this.b, this.g) + this.e);
+  }
+}
+
+const NAMED_TRANSFER_FN = {
+  sRGB: new TransferFunction(2.4, (1 / 1.055), (0.055 / 1.055), (1 / 12.92), 0.04045, 0.0, 0.0),
+  sRGB_INVERSE: new TransferFunction(0.416667, 1.13728, -0, 12.92, 0.0031308, -0.0549698, -0),
+
+  proPhotoRGB: new TransferFunction(1.8, 1),
+  proPhotoRGB_INVERSE: new TransferFunction(0.555556, 1, -0, 0, 0, 0, 0),
+
+  k2Dot2: new TransferFunction(2.2, 1.0),
+  k2Dot2_INVERSE: new TransferFunction(0.454545, 1),
+
+  rec2020: new TransferFunction(2.22222, 0.909672, 0.0903276, 0.222222, 0.0812429, 0, 0),
+  rec2020_INVERSE: new TransferFunction(0.45, 1.23439, -0, 4.5, 0.018054, -0.0993195, -0),
+};
+
+const NAMED_GAMUTS = {
+  sRGB: [
+    [0.436065674, 0.385147095, 0.143066406],
+    [0.222488403, 0.716873169, 0.060607910],
+    [0.013916016, 0.097076416, 0.714096069],
+  ] as Matrix3x3,
+  sRGB_INVERSE: [
+    [3.134112151374599, -1.6173924597114966, -0.4906334036481285],
+    [-0.9787872938826594, 1.9162795854799963, 0.0334547139520088],
+    [0.07198304248352326, -0.2289858493321844, 1.4053851325241447],
+  ] as Matrix3x3,
+  displayP3: [
+    [0.515102, 0.291965, 0.157153],
+    [0.241182, 0.692236, 0.0665819],
+    [-0.00104941, 0.0418818, 0.784378],
+  ] as Matrix3x3,
+  displayP3_INVERSE: [
+    [2.404045155982687, -0.9898986932663839, -0.3976317191366333],
+    [-0.8422283799266768, 1.7988505115115485, 0.016048170293157416],
+    [0.04818705979712955, -0.09737385156228891, 1.2735066448052303],
+  ] as Matrix3x3,
+  adobeRGB: [
+    [0.60974, 0.20528, 0.14919],
+    [0.31111, 0.62567, 0.06322],
+    [0.01947, 0.06087, 0.74457],
+  ] as Matrix3x3,
+  adobeRGB_INVERSE: [
+    [1.9625385510109137, -0.6106892546501431, -0.3413827467482388],
+    [-0.9787580455521, 1.9161624707082339, 0.03341676594241408],
+    [0.028696263137883395, -0.1406807819331586, 1.349252109991369],
+  ] as Matrix3x3,
+  rec2020: [
+    [0.673459, 0.165661, 0.125100],
+    [0.279033, 0.675338, 0.0456288],
+    [-0.00193139, 0.0299794, 0.797162],
+  ] as Matrix3x3,
+  rec2020_INVERSE: [
+    [1.647275201661012, -0.3936024771460771, -0.23598028884792507],
+    [-0.6826176165196962, 1.647617775014935, 0.01281626807852422],
+    [0.029662725298529837, -0.06291668721366285, 1.2533964313435522],
+  ] as Matrix3x3,
+  xyz: [
+    [1.0, 0.0, 0.0],
+    [0.0, 1.0, 0.0],
+    [0.0, 0.0, 1.0],
+  ] as Matrix3x3,
+
+};
+
+function degToRad(deg: number): number {
+  return deg * (Math.PI / 180);
+}
+
+function radToDeg(rad: number): number {
+  return rad * (180 / Math.PI);
+}
+
+function applyTransferFns(fn: TransferFunction, r: number, g: number, b: number): [number, number, number] {
+  return [fn.eval(r), fn.eval(g), fn.eval(b)];
+}
+
+const OKLAB_TO_LMS_MATRIX = [
+  [0.99999999845051981432, 0.39633779217376785678, 0.21580375806075880339],
+  [1.0000000088817607767, -0.1055613423236563494, -0.063854174771705903402],
+  [1.0000000546724109177, -0.089484182094965759684, -1.2914855378640917399],
+] as Matrix3x3;
+
+// Inverse of the OKLAB_TO_LMS_MATRIX
+const LMS_TO_OKLAB_MATRIX = [
+  [0.2104542553, 0.7936177849999999, -0.0040720468],
+  [1.9779984951000003, -2.4285922049999997, 0.4505937099000001],
+  [0.025904037099999982, 0.7827717662, -0.8086757660000001],
+] as Matrix3x3;
+
+const XYZ_TO_LMS_MATRIX = [
+  [0.8190224432164319, 0.3619062562801221, -0.12887378261216414],
+  [0.0329836671980271, 0.9292868468965546, 0.03614466816999844],
+  [0.048177199566046255, 0.26423952494422764, 0.6335478258136937],
+] as Matrix3x3;
+// Inverse of XYZ_TO_LMS_MATRIX
+const LMS_TO_XYZ_MATRIX = [
+  [1.226879873374156, -0.5578149965554814, 0.2813910501772159],
+  [-0.040575762624313734, 1.1122868293970596, -0.07171106666151703],
+  [-0.07637294974672144, -0.4214933239627915, 1.586924024427242],
+] as Matrix3x3;
+
+const PRO_PHOTO_TO_XYZD50_MATRIX = [
+  [0.7976700747153241, 0.13519395152800417, 0.03135596341127167],
+  [0.28803902352472205, 0.7118744007923554, 0.00008661179538844252],
+  [2.739876695467402e-7, -0.0000014405226518969991, 0.825211112593861],
+] as Matrix3x3;
+// Inverse of PRO_PHOTO_TO_XYZD50_MATRIX
+const XYZD50_TO_PRO_PHOTO_MATRIX = [
+  [1.3459533710138858, -0.25561367037652133, -0.051116041522131374],
+  [-0.544600415668951, 1.5081687311475767, 0.020535163968720935],
+  [-0.0000013975622054109725, 0.000002717590904589903, 1.2118111696814942],
+] as Matrix3x3;
+
+const XYZD65_TO_XYZD50_MATRIX = [
+  [1.0478573189120088, 0.022907374491829943, -0.050162247377152525],
+  [0.029570500050499514, 0.9904755577034089, -0.017061518194840468],
+  [-0.00924047197558879, 0.015052921526981566, 0.7519708530777581],
+] as Matrix3x3;
+// Inverse of XYZD65_TO_XYZD50_MATRIX
+const XYZD50_TO_XYZD65_MATRIX = [
+  [0.9555366447632887, -0.02306009252137888, 0.06321844147263304],
+  [-0.028315378228764922, 1.009951351591575, 0.021026001591792402],
+  [0.012308773293784308, -0.02050053471777469, 1.3301947294775631],
+] as Matrix3x3;
+
+const XYZD65_TO_SRGB_MATRIX = [
+  [3.2408089365140573, -1.5375788839307314, -0.4985609572551541],
+  [-0.9692732213205414, 1.876110235238969, 0.041560501141251774],
+  [0.05567030990267439, -0.2040007921971802, 1.0571046720577026],
+] as Matrix3x3;
+
+export function labToXyzd50(l: number, a: number, b: number): [number, number, number] {
+  let y = (l + 16.0) / 116.0;
+  let x = y + a / 500.0;
+  let z = y - b / 200.0;
+
+  function labInverseTransferFunction(t: number): number {
+    const delta = (24.0 / 116.0);
+
+    if (t <= delta) {
+      return (108.0 / 841.0) * (t - (16.0 / 116.0));
+    }
+
+    return t * t * t;
+  }
+
+  x = labInverseTransferFunction(x) * D50_X;
+  y = labInverseTransferFunction(y) * D50_Y;
+  z = labInverseTransferFunction(z) * D50_Z;
+
+  return [x, y, z];
+}
+
+export function xyzd50ToLab(x: number, y: number, z: number): [number, number, number] {
+  function labTransferFunction(t: number): number {
+    const deltaLimit: number = (24.0 / 116.0) * (24.0 / 116.0) * (24.0 / 116.0);
+
+    if (t <= deltaLimit) {
+      return (841.0 / 108.0) * t + (16.0 / 116.0);
+    }
+    return Math.pow(t, 1.0 / 3.0);
+  }
+
+  x = labTransferFunction(x / D50_X);
+  y = labTransferFunction(y / D50_Y);
+  z = labTransferFunction(z / D50_Z);
+
+  const l = 116.0 * y - 16.0;
+  const a = 500.0 * (x - y);
+  const b = 200.0 * (y - z);
+
+  return [l, a, b];
+}
+
+export function oklabToXyzd65(l: number, a: number, b: number): [number, number, number] {
+  const labInput = [l, a, b] as Vector3;
+  const lmsIntermediate = multiply(OKLAB_TO_LMS_MATRIX, labInput);
+  lmsIntermediate[0] = lmsIntermediate[0] * lmsIntermediate[0] * lmsIntermediate[0];
+  lmsIntermediate[1] = lmsIntermediate[1] * lmsIntermediate[1] * lmsIntermediate[1];
+  lmsIntermediate[2] = lmsIntermediate[2] * lmsIntermediate[2] * lmsIntermediate[2];
+  const xyzOutput = multiply(LMS_TO_XYZ_MATRIX, lmsIntermediate);
+  return xyzOutput;
+}
+
+export function xyzd65ToOklab(x: number, y: number, z: number): [number, number, number] {
+  const xyzInput = [x, y, z] as Vector3;
+  const lmsIntermediate = multiply(XYZ_TO_LMS_MATRIX, xyzInput);
+
+  lmsIntermediate[0] = Math.pow(lmsIntermediate[0], 1.0 / 3.0);
+  lmsIntermediate[1] = Math.pow(lmsIntermediate[1], 1.0 / 3.0);
+  lmsIntermediate[2] = Math.pow(lmsIntermediate[2], 1.0 / 3.0);
+
+  const labOutput = multiply(LMS_TO_OKLAB_MATRIX, lmsIntermediate);
+  return [labOutput[0], labOutput[1], labOutput[2]];
+}
+
+export function lchToLab(l: number, c: number, h: number|undefined): [number, number, number] {
+  if (h === undefined) {
+    return [l, 0, 0];
+  }
+
+  return [l, c * Math.cos(degToRad(h)), c * Math.sin(degToRad(h))];
+}
+
+export function labToLch(l: number, a: number, b: number): [number, number, number] {
+  return [l, Math.sqrt(a * a + b * b), radToDeg(Math.atan2(b, a))];
+}
+
+export function displayP3ToXyzd50(r: number, g: number, b: number): [number, number, number] {
+  const [mappedR, mappedG, mappedB] = applyTransferFns(NAMED_TRANSFER_FN.sRGB, r, g, b);
+  const rgbInput = [mappedR, mappedG, mappedB] as Vector3;
+  const xyzOutput = multiply(NAMED_GAMUTS.displayP3, rgbInput);
+  return xyzOutput;
+}
+
+export function xyzd50ToDisplayP3(x: number, y: number, z: number): [number, number, number] {
+  const xyzInput = [x, y, z] as Vector3;
+  const rgbOutput = multiply(NAMED_GAMUTS.displayP3_INVERSE, xyzInput);
+  return applyTransferFns(
+      NAMED_TRANSFER_FN.sRGB_INVERSE, rgbOutput[0], rgbOutput[1], rgbOutput[2]);
+}
+
+export function proPhotoToXyzd50(r: number, g: number, b: number): [number, number, number] {
+  const [mappedR, mappedG, mappedB] = applyTransferFns(NAMED_TRANSFER_FN.proPhotoRGB, r, g, b);
+  const rgbInput = [mappedR, mappedG, mappedB] as Vector3;
+  const xyzOutput = multiply(PRO_PHOTO_TO_XYZD50_MATRIX, rgbInput);
+  return xyzOutput;
+}
+
+export function xyzd50ToProPhoto(x: number, y: number, z: number): [number, number, number] {
+  const xyzInput = [x, y, z] as Vector3;
+  const rgbOutput = multiply(XYZD50_TO_PRO_PHOTO_MATRIX, xyzInput);
+  return applyTransferFns(
+      NAMED_TRANSFER_FN.proPhotoRGB_INVERSE, rgbOutput[0], rgbOutput[1], rgbOutput[2]);
+}
+
+export function adobeRGBToXyzd50(r: number, g: number, b: number): [number, number, number] {
+  const [mappedR, mappedG, mappedB] = applyTransferFns(NAMED_TRANSFER_FN.k2Dot2, r, g, b);
+  const rgbInput = [mappedR, mappedG, mappedB] as Vector3;
+  const xyzOutput = multiply(NAMED_GAMUTS.adobeRGB, rgbInput);
+  return xyzOutput;
+}
+
+export function xyzd50ToAdobeRGB(x: number, y: number, z: number): [number, number, number] {
+  const xyzInput = [x, y, z] as Vector3;
+  const rgbOutput = multiply(NAMED_GAMUTS.adobeRGB_INVERSE, xyzInput);
+  return applyTransferFns(
+      NAMED_TRANSFER_FN.k2Dot2_INVERSE, rgbOutput[0], rgbOutput[1], rgbOutput[2]);
+}
+
+export function rec2020ToXyzd50(r: number, g: number, b: number): [number, number, number] {
+  const [mappedR, mappedG, mappedB] = applyTransferFns(NAMED_TRANSFER_FN.rec2020, r, g, b);
+  const rgbInput = [mappedR, mappedG, mappedB] as Vector3;
+  const xyzOutput = multiply(NAMED_GAMUTS.rec2020, rgbInput);
+  return xyzOutput;
+}
+
+export function xyzd50ToRec2020(x: number, y: number, z: number): [number, number, number] {
+  const xyzInput = [x, y, z] as Vector3;
+  const rgbOutput = multiply(NAMED_GAMUTS.rec2020_INVERSE, xyzInput);
+  return applyTransferFns(
+      NAMED_TRANSFER_FN.rec2020_INVERSE, rgbOutput[0], rgbOutput[1], rgbOutput[2]);
+}
+
+export function xyzd50ToD65(x: number, y: number, z: number): [number, number, number] {
+  const xyzInput = [x, y, z] as Vector3;
+  const xyzOutput = multiply(XYZD50_TO_XYZD65_MATRIX, xyzInput);
+  return xyzOutput;
+}
+
+export function xyzd65ToD50(x: number, y: number, z: number): [number, number, number] {
+  const xyzInput = [x, y, z] as Vector3;
+  const xyzOutput = multiply(XYZD65_TO_XYZD50_MATRIX, xyzInput);
+  return xyzOutput;
+}
+
+export function xyzd65TosRGBLinear(x: number, y: number, z: number): [number, number, number] {
+  const xyzInput = [x, y, z] as Vector3;
+  const rgbResult = multiply(XYZD65_TO_SRGB_MATRIX, xyzInput);
+  return rgbResult;
+}
+
+export function xyzd50TosRGBLinear(x: number, y: number, z: number): [number, number, number] {
+  const xyzInput = [x, y, z] as Vector3;
+  const rgbResult = multiply(NAMED_GAMUTS.sRGB_INVERSE, xyzInput);
+  return rgbResult;
+}
+
+export function srgbLinearToXyzd50(r: number, g: number, b: number): [number, number, number] {
+  const rgbInput = [r, g, b] as Vector3;
+  const xyzOutput = multiply(NAMED_GAMUTS.sRGB, rgbInput);
+  return xyzOutput;
+}
+
+export function srgbToXyzd50(r: number, g: number, b: number): [number, number, number] {
+  const [mappedR, mappedG, mappedB] = applyTransferFns(NAMED_TRANSFER_FN.sRGB, r, g, b);
+  const rgbInput = [mappedR, mappedG, mappedB] as Vector3;
+  const xyzOutput = multiply(NAMED_GAMUTS.sRGB, rgbInput);
+  return xyzOutput;
+}
+
+export function xyzd50ToSrgb(x: number, y: number, z: number): [number, number, number] {
+  const xyzInput = [x, y, z] as Vector3;
+  const rgbOutput = multiply(NAMED_GAMUTS.sRGB_INVERSE, xyzInput);
+  return applyTransferFns(
+      NAMED_TRANSFER_FN.sRGB_INVERSE, rgbOutput[0], rgbOutput[1], rgbOutput[2]);
+}
+
+export function oklchToXyzd50(lInput: number, c: number, h: number): [number, number, number] {
+  const [l, a, b] = lchToLab(lInput, c, h);
+  const [x65, y65, z65] = oklabToXyzd65(l, a, b);
+  return xyzd65ToD50(x65, y65, z65);
+}
+
+export function xyzd50ToOklch(x: number, y: number, z: number): [number, number, number] {
+  const [x65, y65, z65] = xyzd50ToD65(x, y, z);
+  const [l, a, b] = xyzd65ToOklab(x65, y65, z65);
+  return labToLch(l, a, b);
+}

package/src/core.ts

@@ -0,0 +1,58 @@
+import { cast, get, set } from './bit';
+
+export type Color = number;
+
+export const OFFSET_R = 24;
+export const OFFSET_G = 16;
+export const OFFSET_B =  8;
+export const OFFSET_A =  0;
+
+export function newColor(r: number, g: number, b: number, a: number) {
+  return (
+    (r << OFFSET_R) +
+    (g << OFFSET_G) +
+    (b << OFFSET_B) +
+    (a << OFFSET_A)
+  );
+}
+
+export function from(hex: number) {
+  return newColor(
+    get(hex, OFFSET_R),
+    get(hex, OFFSET_G),
+    get(hex, OFFSET_B),
+    get(hex, OFFSET_A),
+  );
+}
+
+export function toNumber(color: Color) {
+  return cast(color);
+}
+
+export function getRed(c: Color) { return get(c, OFFSET_R); }
+export function getGreen(c: Color) { return get(c, OFFSET_G); }
+export function getBlue(c: Color) { return get(c, OFFSET_B); }
+export function getAlpha(c: Color) { return get(c, OFFSET_A); }
+
+export function setRed(c: Color, value: number) { return set(c, OFFSET_R, value); }
+export function setGreen(c: Color, value: number) { return set(c, OFFSET_G, value); }
+export function setBlue(c: Color, value: number) { return set(c, OFFSET_B, value); }
+export function setAlpha(c: Color, value: number) { return set(c, OFFSET_A, value); }
+
+/**
+ * Map 8-bits value to its hexadecimal representation
+ * ['00', '01', '02', ..., 'fe', 'ff']
+ */
+const FORMAT_HEX =
+  Array.from({ length: 256 })
+    .map((_, byte) => byte.toString(16).padStart(2, '0'))
+
+export function format(color: Color): string {
+  /*
+   * Implementing this as `cast(color).toString(16).padStart(8, '0')` would be simpler,
+   * but `cast()` makes the color a non-Smi value on V8, as well as allocates more strings
+   * and makes more function calls.
+   * This version is about 4 times faster than the simple one.
+   */
+  return '#' + FORMAT_HEX[getRed(color)] + FORMAT_HEX[getGreen(color)] + FORMAT_HEX[getBlue(color)] + FORMAT_HEX[getAlpha(color)];
+}

package/src/functions.ts

@@ -0,0 +1,27 @@
+import {
+  Color,
+  getRed,
+  getGreen,
+  getBlue,
+} from './core';
+
+/**
+ * The relative brightness of any point in a color space, normalized to 0 for
+ * darkest black and 1 for lightest white.
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ * @returns The relative brightness of the color in the range 0 - 1
+ */
+export function getLuminance(color: Color) {
+  const r = getRed(color) / 255;
+  const g = getGreen(color) / 255;
+  const b = getBlue(color) / 255;
+
+  const apply = (v: number) => v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+
+  const r1 = apply(r)
+  const g1 = apply(g)
+  const b1 = apply(b)
+
+  // Truncate at 3 digits
+  return Number((0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1).toFixed(3));
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './core';
+export * from './parse';
+export * from './functions';
+export * from './transform';

package/src/parse.ts

@@ -0,0 +1,392 @@
+import { Color, newColor } from './core';
+import * as convert from './convert'
+
+const HASH = '#'.charCodeAt(0);
+const PERCENT = '%'.charCodeAt(0);
+const G = 'g'.charCodeAt(0);
+const N = 'n'.charCodeAt(0);
+const D = 'd'.charCodeAt(0);
+const E = 'e'.charCodeAt(0);
+
+/**
+ * Approximative CSS colorspace string pattern, e.g. rgb(), color()
+ */
+const PATTERN = (() => {
+  const NAME = '(\\w+)'
+  const SEPARATOR = '[\\s,\\/]'
+  const VALUE = '([^\\s,\\/]+)'
+  const SEPARATOR_THEN_VALUE = `(?:${SEPARATOR}+${VALUE})`
+
+  return new RegExp(
+    `${NAME}\\(
+      ${SEPARATOR}*${VALUE}
+      ${SEPARATOR_THEN_VALUE}
+      ${SEPARATOR_THEN_VALUE}
+      ${SEPARATOR_THEN_VALUE}?
+      ${SEPARATOR_THEN_VALUE}?
+      ${SEPARATOR}*
+    \\)`.replace(/\s/g, '')
+  )
+})();
+
+
+/**
+ * Parse CSS color
+ * @param color CSS color string: #xxx, #xxxxxx, #xxxxxxxx, rgb(), rgba(), hsl(), hsla(), color()
+ */
+export function parse(color: string): Color {
+  if (color.charCodeAt(0) === HASH) {
+    return parseHex(color);
+  } else {
+    return parseColor(color);
+  }
+}
+
+/**
+ * Parse hexadecimal CSS color
+ * @param color Hex color string: #xxx, #xxxxxx, #xxxxxxxx
+ */
+export function parseHex(hex: string): Color {
+  let r = 0x00;
+  let g = 0x00;
+  let b = 0x00;
+  let a = 0xff;
+
+  switch (hex.length) {
+    // #59f
+    case 4: {
+      r = (hexValue(hex.charCodeAt(1)) << 4) + hexValue(hex.charCodeAt(1));
+      g = (hexValue(hex.charCodeAt(2)) << 4) + hexValue(hex.charCodeAt(2));
+      b = (hexValue(hex.charCodeAt(3)) << 4) + hexValue(hex.charCodeAt(3));
+      break;
+    }
+    // #5599ff
+    case 7: {
+      r = (hexValue(hex.charCodeAt(1)) << 4) + hexValue(hex.charCodeAt(2));
+      g = (hexValue(hex.charCodeAt(3)) << 4) + hexValue(hex.charCodeAt(4));
+      b = (hexValue(hex.charCodeAt(5)) << 4) + hexValue(hex.charCodeAt(6));
+      break;
+    }
+    // #5599ff88
+    case 9: {
+      r = (hexValue(hex.charCodeAt(1)) << 4) + hexValue(hex.charCodeAt(2));
+      g = (hexValue(hex.charCodeAt(3)) << 4) + hexValue(hex.charCodeAt(4));
+      b = (hexValue(hex.charCodeAt(5)) << 4) + hexValue(hex.charCodeAt(6));
+      a = (hexValue(hex.charCodeAt(7)) << 4) + hexValue(hex.charCodeAt(8));
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+
+  return newColor(r, g, b, a)
+}
+
+// https://lemire.me/blog/2019/04/17/parsing-short-hexadecimal-strings-efficiently/
+function hexValue(c: number) {
+  return (c & 0xF) + 9 * (c >> 6)
+}
+
+
+/**
+ * Parse CSS color
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+ * @param color CSS color string: rgb(), rgba(), hsl(), hsla(), color()
+ */
+export function parseColor(color: string): Color {
+  const match = PATTERN.exec(color);
+  if (match === null) {
+    throw new Error(`Color.parse(): invalid CSS color: "${color}"`);
+  }
+
+  const format = match[1];
+  const p1 = match[2];
+  const p2 = match[3];
+  const p3 = match[4];
+  const p4 = match[5];
+  const p5 = match[6];
+
+  switch (format) {
+    case 'rgb':
+    case 'rgba': {
+      const r = parseColorChannel(p1);
+      const g = parseColorChannel(p2);
+      const b = parseColorChannel(p3);
+      const a = p4 ? parseAlphaChannel(p4) : 255;
+
+      return newColor(r, g, b, a);
+    }
+    case 'hsl':
+    case 'hsla': {
+      const h = parseAngle(p1);
+      const s = parsePercentage(p2);
+      const l = parsePercentage(p3);
+      const a = p4 ? parseAlphaChannel(p4) : 255;
+
+      // https://stackoverflow.com/a/9493060/3112706
+      let r, g, b;
+      if (s === 0) {
+        r = g = b = Math.round(l * 255); // achromatic
+      } else {
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = Math.round(hueToRGB(p, q, h + 1 / 3) * 255);
+        g = Math.round(hueToRGB(p, q, h) * 255);
+        b = Math.round(hueToRGB(p, q, h - 1 / 3) * 255);
+      }
+
+      return newColor(r, g, b, a);
+    }
+    case 'hwb': {
+      const h = parseAngle(p1);
+      const w = parsePercentage(p2);
+      const bl = parsePercentage(p3);
+      const a = p4 ? parseAlphaChannel(p4) : 255;
+
+      /* https://drafts.csswg.org/css-color/#hwb-to-rgb */
+      const s = 1.0;
+      const l = 0.5;
+
+      // Same as HSL to RGB
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      let r = Math.round(hueToRGB(p, q, h + 1 / 3) * 255);
+      let g = Math.round(hueToRGB(p, q, h) * 255);
+      let b = Math.round(hueToRGB(p, q, h - 1 / 3) * 255);
+
+      // Then HWB
+      r = hwbApply(r, w, bl);
+      g = hwbApply(g, w, bl);
+      b = hwbApply(b, w, bl);
+
+      return newColor(r, g, b, a);
+    }
+    case 'lab': {
+      const l = parsePercentageOrValue(p1);
+      const aa = parsePercentageOrValue(p2);
+      const b = parsePercentageOrValue(p3);
+      const a = p4 ? parseAlphaChannel(p4) : 255;
+      return newColorFromArray(a,
+        convert.xyzd50ToSrgb(...convert.labToXyzd50(l, aa, b))
+      )
+    }
+    case 'lch': {
+      const l = parsePercentageOrValue(p1);
+      const c = parsePercentageOrValue(p2);
+      const h = parsePercentageOrValue(p3);
+      const a = p4 ? parseAlphaChannel(p4) : 255;
+      return newColorFromArray(a,
+        convert.xyzd50ToSrgb(...convert.labToXyzd50(...convert.lchToLab(l, c, h)))
+      )
+    }
+    case 'oklab': {
+      const l = parsePercentageOrValue(p1);
+      const aa = parsePercentageOrValue(p2);
+      const b = parsePercentageOrValue(p3);
+      const a = p4 ? parseAlphaChannel(p4) : 255;
+      return newColorFromArray(a,
+        convert.xyzd50ToSrgb(...convert.oklchToXyzd50(l, aa, b))
+      )
+    }
+    case 'oklch': {
+      const l = parsePercentageOrValue(p1);
+      const c = parsePercentageOrValue(p2);
+      const h = parsePercentageOrValue(p3);
+      const a = p4 ? parseAlphaChannel(p4) : 255;
+      return newColorFromArray(a,
+        convert.xyzd50ToSrgb(...convert.oklchToXyzd50(l, c, h))
+      )
+    }
+    case 'color': {
+      // https://drafts.csswg.org/css-color-4/#color-function
+
+      const colorspace = p1;
+      const c1 = parsePercentageOrValue(p2);
+      const c2 = parsePercentageOrValue(p3);
+      const c3 = parsePercentageOrValue(p4);
+      const a = p5 ? parseAlphaChannel(p5) : 255;
+
+      switch (colorspace) {
+        // RGB color spaces
+        case 'srgb': {
+          return newColorFromArray(a, 
+            [c1, c2, c3]
+          )
+        }
+        case 'srgb-linear': {
+          return newColorFromArray(a, 
+            convert.xyzd50ToSrgb(...convert.srgbLinearToXyzd50(c1, c2, c3))
+          )
+        }
+        case 'display-p3': {
+          return newColorFromArray(a, 
+            convert.xyzd50ToSrgb(...convert.displayP3ToXyzd50(c1, c2, c3))
+          )
+        }
+        case 'a98-rgb': {
+          return newColorFromArray(a, 
+            convert.xyzd50ToSrgb(...convert.adobeRGBToXyzd50(c1, c2, c3))
+          )
+        }
+        case 'prophoto-rgb': {
+          return newColorFromArray(a, 
+            convert.xyzd50ToSrgb(...convert.proPhotoToXyzd50(c1, c2, c3))
+          )
+        }
+        case 'rec2020': {
+          return newColorFromArray(a, 
+            convert.xyzd50ToSrgb(...convert.rec2020ToXyzd50(c1, c2, c3))
+          )
+        }
+        // XYZ color spaces
+        case 'xyz':
+        case 'xyz-d65': {
+          return newColorFromArray(a, 
+            convert.xyzd50ToSrgb(...convert.xyzd65ToD50(c1, c2, c3))
+          )
+        }
+        case 'xyz-d50': {
+          return newColorFromArray(a, 
+            convert.xyzd50ToSrgb(c1, c2, c3)
+          )
+        }
+        default:
+      }
+    }
+    default:
+  }
+  throw new Error(`Color.parse(): invalid CSS color: "${color}"`);
+}
+
+/**
+ * Accepts: "50%", "128"
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#values
+ * @returns a value in the 0 to 255 range
+ */
+function parseColorChannel(channel: string): number {
+  if (channel.charCodeAt(channel.length - 1) === PERCENT) {
+    return Math.round((parseFloat(channel) / 100) * 255);
+  }
+  return Math.round(parseFloat(channel));
+}
+
+/**
+ * Accepts: "50%", ".5", "0.5"
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/alpha-value
+ * @returns a value in the [0, 255] range
+ */
+function parseAlphaChannel(channel: string): number {
+  return Math.round(parseAlphaValue(channel) * 255);
+}
+
+/**
+ * Accepts: "50%", ".5", "0.5"
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/alpha-value
+ * @returns a value in the [0, 1] range
+ */
+function parseAlphaValue(channel: string): number {
+  if (channel.charCodeAt(0) === N) {
+    return 0;
+  }
+  if (channel.charCodeAt(channel.length - 1) === PERCENT) {
+    return parseFloat(channel) / 100;
+  }
+  return parseFloat(channel);
+}
+
+/**
+ * Accepts: "360", "360deg", "400grad", "6.28rad", "1turn", "none"
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/angle
+ * @returns a value in the 0.0 to 1.0 range
+ */
+function parseAngle(angle: string): number {
+  let factor = 1;
+  switch (angle.charCodeAt(angle.length - 1)) {
+    case E: {
+      // 'none'
+      return 0;
+    }
+    case D: {
+      // 'rad', 'grad'
+      if (angle.charCodeAt(Math.max(0, angle.length - 4)) === G) {
+        // 'grad'
+        factor = 400;
+      } else {
+        // 'rad'
+        factor = 2 * Math.PI; // TAU
+      }
+      break;
+    }
+    case N: {
+      // 'turn'
+      factor = 1;
+      break;
+    }
+    // case G: // 'deg', but no need to check as it's also the default
+    default: {
+      factor = 360;
+    }
+  }
+  return parseFloat(angle) / factor;
+}
+
+/**
+ * Accepts: "100%", "none"
+ * @returns a value in the 0.0 to 1.0 range
+ */
+function parsePercentage(value: string): number {
+  if (value.charCodeAt(0) === N) {
+    return 0;
+  }
+  return parseFloat(value) / 100;
+}
+
+/**
+ * Accepts: "1.0", "100%", "none"
+ * @returns a value in the 0.0 to 1.0 range
+ */
+function parsePercentageOrValue(value: string): number {
+  if (value.charCodeAt(0) === N) {
+    return 0;
+  }
+  if (value.charCodeAt(value.length - 1) === PERCENT) {
+    return parseFloat(value) / 100;
+  }
+  return parseFloat(value);
+}
+
+
+// HSL functions
+
+function hueToRGB(p: number, q: number, t: number) {
+  if (t < 0) { t += 1 };
+  if (t > 1) { t -= 1 };
+  if (t < 1 / 6) { return p + (q - p) * 6 * t };
+  if (t < 1 / 2) { return q };
+  if (t < 2 / 3) { return p + (q - p) * (2 / 3 - t) * 6 };
+  { return p };
+}
+
+// HWB functions
+
+function hwbApply(channel: number, w: number, b: number) {
+  let result = channel / 255
+
+  result *= 1 - w - b
+  result += w
+
+  return Math.round(result * 255)
+}
+
+
+function clamp(value: number) {
+  return Math.max(0, Math.min(255, value))
+}
+
+function newColorFromArray(a: number, rgb: [number, number, number]) {
+  const r = clamp(Math.round(rgb[0] * 255))
+  const g = clamp(Math.round(rgb[1] * 255))
+  const b = clamp(Math.round(rgb[2] * 255))
+  return newColor(r, g, b, a)
+}

package/src/transform.ts

@@ -0,0 +1,58 @@
+import {
+  Color,
+  getRed,
+  getGreen,
+  getBlue,
+  getAlpha,
+  setAlpha,
+  newColor,
+} from './core';
+
+/**
+ * Modifies color alpha channel.
+ * @param color - Color
+ * @param value - Value in the range [0, 1]
+ */
+export function alpha(color: Color, value: number): Color {
+  return setAlpha(color, Math.round(value * 255))
+}
+
+/**
+ * Darkens a color.
+ * @param color - Color
+ * @param coefficient - Multiplier in the range [0, 1]
+ */
+export function darken(color: Color, coefficient: number): Color {
+  const r = getRed(color);
+  const g = getGreen(color);
+  const b = getBlue(color);
+  const a = getAlpha(color);
+
+  const factor = 1 - coefficient;
+
+  return newColor(
+    r * factor,
+    g * factor,
+    b * factor,
+    a,
+  )
+}
+
+/**
+ * Lighten a color.
+ * @param color - Color
+ * @param coefficient - Multiplier in the range [0, 1]
+ */
+export function lighten(color: Color, coefficient: number): Color {
+  const r = getRed(color);
+  const g = getGreen(color);
+  const b = getBlue(color);
+  const a = getAlpha(color);
+
+  return newColor(
+    r + (255 - r) * coefficient,
+    g + (255 - g) * coefficient,
+    b + (255 - b) * coefficient,
+    a,
+  )
+}

package/src/transformString.ts

@@ -0,0 +1,7 @@
+import { from } from './core'
+import { parse } from './parse'
+import * as Transform from './transform'
+
+export function alpha(color: string, value: number) { return from(Transform.alpha(parse(color), value)) }
+export function darken(color: string, value: number) { return from(Transform.darken(parse(color), value)) }
+export function lighten(color: string, value: number) { return from(Transform.lighten(parse(color), value)) }

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "ES2022",
+    "lib": ["ES2017"],
+    "strict": true,
+    "noImplicitAny": true,
+    "esModuleInterop": true,
+    "preserveConstEnums": true,
+    "outDir": "./build",
+    "sourceMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["**/*.test.ts"]
+}