color-elements 0.0.1

package/lib/colorjs.io/colorjs.io/src/spaces/hsl.js

@@ -0,0 +1,91 @@
+import ColorSpace from "../space.js";
+import sRGB from "./srgb.js";
+
+export default new ColorSpace({
+	id: "hsl",
+	name: "HSL",
+	coords: {
+		h: {
+			refRange: [0, 360],
+			type: "angle",
+			name: "Hue",
+		},
+		s: {
+			range: [0, 100],
+			name: "Saturation",
+		},
+		l: {
+			range: [0, 100],
+			name: "Lightness",
+		},
+	},
+
+	base: sRGB,
+
+	// Adapted from https://drafts.csswg.org/css-color-4/better-rgbToHsl.js
+	fromBase: rgb => {
+		let max = Math.max(...rgb);
+		let min = Math.min(...rgb);
+		let [r, g, b] = rgb;
+		let [h, s, l] = [NaN, 0, (min + max) / 2];
+		let d = max - min;
+
+		if (d !== 0) {
+			s = (l === 0 || l === 1) ? 0 : (max - l) / Math.min(l, 1 - l);
+
+			switch (max) {
+				case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+				case g: h = (b - r) / d + 2; break;
+				case b: h = (r - g) / d + 4;
+			}
+
+			h = h * 60;
+		}
+
+		// Very out of gamut colors can produce negative saturation
+		// If so, just rotate the hue by 180 and use a positive saturation
+		// see https://github.com/w3c/csswg-drafts/issues/9222
+		if (s < 0) {
+			h += 180;
+			s = Math.abs(s);
+		}
+
+		if (h >= 360) {
+			h -= 360;
+		}
+
+		return [h, s * 100, l * 100];
+	},
+
+	// Adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative
+	toBase: hsl => {
+		let [h, s, l] = hsl;
+		h = h % 360;
+
+		if (h < 0) {
+			h += 360;
+		}
+
+		s /= 100;
+		l /= 100;
+
+		function f (n) {
+			let k = (n + h / 30) % 12;
+			let a = s * Math.min(l, 1 - l);
+			return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+		}
+
+		return [f(0), f(8), f(4)];
+	},
+
+	formats: {
+		"hsl": {
+			coords: ["<number> | <angle>", "<percentage>", "<percentage>"],
+		},
+		"hsla": {
+			coords: ["<number> | <angle>", "<percentage>", "<percentage>"],
+			commas: true,
+			lastAlpha: true,
+		},
+	},
+});

package/lib/colorjs.io/colorjs.io/src/spaces/hsluv.js

@@ -0,0 +1,162 @@
+/*
+Adapted from: https://github.com/hsluv/hsluv-javascript/blob/14b49e6cf9a9137916096b8487a5372626b57ba4/src/hsluv.ts
+
+Copyright (c) 2012-2022 Alexei Boronine
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import ColorSpace from "../space.js";
+import LCHuv from "./lchuv.js";
+import sRGB from "./srgb.js";
+import {fromXYZ_M} from "./srgb-linear.js";
+import {skipNone} from "../util.js";
+
+const ε = 216 / 24389;  // 6^3/29^3 == (24/116)^3
+const κ = 24389 / 27;   // 29^3/3^3
+
+const m_r0 = fromXYZ_M[0][0];
+const m_r1 = fromXYZ_M[0][1];
+const m_r2 = fromXYZ_M[0][2];
+const m_g0 = fromXYZ_M[1][0];
+const m_g1 = fromXYZ_M[1][1];
+const m_g2 = fromXYZ_M[1][2];
+const m_b0 = fromXYZ_M[2][0];
+const m_b1 = fromXYZ_M[2][1];
+const m_b2 = fromXYZ_M[2][2];
+
+function distanceFromOriginAngle (slope, intercept, angle) {
+	const d = intercept / (Math.sin(angle) - slope * Math.cos(angle));
+	return d < 0 ? Infinity : d;
+}
+
+export function calculateBoundingLines (l) {
+	const sub1 = Math.pow(l + 16, 3) / 1560896;
+	const sub2 = sub1 > ε ? sub1 : l / κ;
+	const s1r = sub2 * (284517 * m_r0 - 94839 * m_r2);
+	const s2r = sub2 * (838422 * m_r2 + 769860 * m_r1 + 731718 * m_r0);
+	const s3r = sub2 * (632260 * m_r2 - 126452 * m_r1);
+	const s1g = sub2 * (284517 * m_g0 - 94839 * m_g2);
+	const s2g = sub2 * (838422 * m_g2 + 769860 * m_g1 + 731718 * m_g0);
+	const s3g = sub2 * (632260 * m_g2 - 126452 * m_g1);
+	const s1b = sub2 * (284517 * m_b0 - 94839 * m_b2);
+	const s2b = sub2 * (838422 * m_b2 + 769860 * m_b1 + 731718 * m_b0);
+	const s3b = sub2 * (632260 * m_b2 - 126452 * m_b1);
+
+	return {
+		r0s: s1r / s3r,
+		r0i: s2r * l / s3r,
+		r1s: s1r / (s3r + 126452),
+		r1i: (s2r - 769860) * l / (s3r + 126452),
+		g0s: s1g / s3g,
+		g0i: s2g * l / s3g,
+		g1s: s1g / (s3g + 126452),
+		g1i: (s2g - 769860) * l / (s3g + 126452),
+		b0s: s1b / s3b,
+		b0i: s2b * l / s3b,
+		b1s: s1b / (s3b + 126452),
+		b1i: (s2b - 769860) * l / (s3b + 126452),
+	};
+}
+
+function calcMaxChromaHsluv (lines, h) {
+	const hueRad = h / 360 * Math.PI * 2;
+	const r0 = distanceFromOriginAngle(lines.r0s, lines.r0i, hueRad);
+	const r1 = distanceFromOriginAngle(lines.r1s, lines.r1i, hueRad);
+	const g0 = distanceFromOriginAngle(lines.g0s, lines.g0i, hueRad);
+	const g1 = distanceFromOriginAngle(lines.g1s, lines.g1i, hueRad);
+	const b0 = distanceFromOriginAngle(lines.b0s, lines.b0i, hueRad);
+	const b1 = distanceFromOriginAngle(lines.b1s, lines.b1i, hueRad);
+
+	return Math.min(r0, r1, g0, g1, b0, b1);
+}
+
+export default new ColorSpace({
+	id: "hsluv",
+	name: "HSLuv",
+	coords: {
+		h: {
+			refRange: [0, 360],
+			type: "angle",
+			name: "Hue",
+		},
+		s: {
+			range: [0, 100],
+			name: "Saturation",
+		},
+		l: {
+			range: [0, 100],
+			name: "Lightness",
+		},
+	},
+
+	base: LCHuv,
+	gamutSpace: sRGB,
+
+	// Convert LCHuv to HSLuv
+	fromBase (lch) {
+		let [l, c, h] = [skipNone(lch[0]), skipNone(lch[1]), skipNone(lch[2])];
+		let s;
+
+		if (l > 99.9999999) {
+			s = 0;
+			l = 100;
+		}
+		else if (l < 0.00000001) {
+			s = 0;
+			l = 0;
+		}
+		else {
+			let lines = calculateBoundingLines(l);
+			let max = calcMaxChromaHsluv(lines, h);
+			s = c / max * 100;
+		}
+
+		return [h, s, l];
+	},
+
+	// Convert HSLuv to LCHuv
+	toBase (hsl) {
+		let [h, s, l] = [skipNone(hsl[0]), skipNone(hsl[1]), skipNone(hsl[2])];
+		let c;
+
+		if (l > 99.9999999) {
+			l = 100;
+			c = 0;
+		}
+		else if (l < 0.00000001) {
+			l = 0;
+			c = 0;
+		}
+		else {
+			let lines = calculateBoundingLines(l);
+			let max = calcMaxChromaHsluv(lines, h);
+			c = max / 100 * s;
+		}
+
+		return [l, c, h];
+	},
+
+	formats: {
+		color: {
+			id: "--hsluv",
+			coords: ["<number> | <angle>", "<percentage> | <number>", "<percentage> | <number>"],
+		},
+	},
+});

package/lib/colorjs.io/colorjs.io/src/spaces/hsv.js

@@ -0,0 +1,65 @@
+import ColorSpace from "../space.js";
+import HSL from "./hsl.js";
+
+// The Hue, Whiteness Blackness (HWB) colorspace
+// See https://drafts.csswg.org/css-color-4/#the-hwb-notation
+// Note that, like HSL, calculations are done directly on
+// gamma-corrected sRGB values rather than linearising them first.
+
+export default new ColorSpace({
+	id: "hsv",
+	name: "HSV",
+	coords: {
+		h: {
+			refRange: [0, 360],
+			type: "angle",
+			name: "Hue",
+		},
+		s: {
+			range: [0, 100],
+			name: "Saturation",
+		},
+		v: {
+			range: [0, 100],
+			name: "Value",
+		},
+	},
+
+	base: HSL,
+	// https://en.wikipedia.org/wiki/HSL_and_HSV#Interconversion
+	fromBase (hsl) {
+		let [h, s, l] = hsl;
+		s /= 100;
+		l /= 100;
+
+		let v = l + s * Math.min(l, 1 - l);
+
+		return [
+			h, // h is the same
+			v === 0 ? 0 : 200 * (1 - l / v), // s
+			100 * v,
+		];
+	},
+	// https://en.wikipedia.org/wiki/HSL_and_HSV#Interconversion
+	toBase (hsv) {
+		let [h, s, v] = hsv;
+
+		s /= 100;
+		v /= 100;
+
+		let l = v * (1 - s / 2);
+
+		return [
+			h, // h is the same
+			(l === 0 || l === 1) ? 0 : ((v - l) / Math.min(l, 1 - l)) * 100,
+			l * 100,
+		];
+	},
+
+	formats: {
+		color: {
+			id: "--hsv",
+			coords: ["<number> | <angle>", "<percentage> | <number>", "<percentage> | <number>"],
+		},
+	},
+});

package/lib/colorjs.io/colorjs.io/src/spaces/hwb.js

@@ -0,0 +1,58 @@
+import ColorSpace from "../space.js";
+import HSV from "./hsv.js";
+
+// The Hue, Whiteness Blackness (HWB) colorspace
+// See https://drafts.csswg.org/css-color-4/#the-hwb-notation
+// Note that, like HSL, calculations are done directly on
+// gamma-corrected sRGB values rather than linearising them first.
+
+export default new ColorSpace({
+	id: "hwb",
+	name: "HWB",
+	coords: {
+		h: {
+			refRange: [0, 360],
+			type: "angle",
+			name: "Hue",
+		},
+		w: {
+			range: [0, 100],
+			name: "Whiteness",
+		},
+		b: {
+			range: [0, 100],
+			name: "Blackness",
+		},
+	},
+
+	base: HSV,
+	fromBase (hsv) {
+		let [h, s, v] = hsv;
+
+		return [h, v * (100 - s) / 100, 100 - v];
+	},
+	toBase (hwb) {
+		let [h, w, b] = hwb;
+
+		// Now convert percentages to [0..1]
+		w /= 100;
+		b /= 100;
+
+		// Achromatic check (white plus black >= 1)
+		let sum = w + b;
+		if (sum >= 1) {
+			let gray = w / sum;
+			return [h, 0, gray * 100];
+		}
+
+		let v = (1 - b);
+		let s = (v === 0) ? 0 : 1 - w / v;
+		return [h, s * 100, v * 100];
+	},
+
+	formats: {
+		"hwb": {
+			coords: ["<number> | <angle>", "<percentage> | <number>", "<percentage> | <number>"],
+		},
+	},
+});

package/lib/colorjs.io/colorjs.io/src/spaces/ictcp.js

@@ -0,0 +1,133 @@
+import ColorSpace from "../space.js";
+import {multiplyMatrices} from "../util.js";
+import XYZ_Abs_D65 from "./xyz-abs-d65.js";
+
+const c1 = 3424 / 4096;
+const c2 = 2413 / 128;
+const c3 = 2392 / 128;
+const m1 = 2610 / 16384;
+const m2 = 2523 / 32;
+const im1 = 16384 / 2610;
+const im2 = 32 / 2523;
+
+// The matrix below includes the 4% crosstalk components
+// and is from the Dolby "What is ICtCp" paper"
+const XYZtoLMS_M = [
+	[  0.3592832590121217,  0.6976051147779502, -0.0358915932320290 ],
+	[ -0.1920808463704993,  1.1004767970374321,  0.0753748658519118 ],
+	[  0.0070797844607479,  0.0748396662186362,  0.8433265453898765 ],
+];
+// linear-light Rec.2020 to LMS, again with crosstalk
+// rational terms from Jan Fröhlich,
+// Encoding High Dynamic Range andWide Color Gamut Imagery, p.97
+// and ITU-R BT.2124-0 p.2
+/*
+const Rec2020toLMS_M = [
+	[ 1688 / 4096,  2146 / 4096,   262 / 4096 ],
+	[  683 / 4096,  2951 / 4096,   462 / 4096 ],
+	[   99 / 4096,   309 / 4096,  3688 / 4096 ]
+];
+*/
+// this includes the Ebner LMS coefficients,
+// the rotation, and the scaling to [-0.5,0.5] range
+// rational terms from Fröhlich p.97
+// and ITU-R BT.2124-0 pp.2-3
+const LMStoIPT_M = [
+	[  2048 / 4096,   2048 / 4096,       0      ],
+	[  6610 / 4096, -13613 / 4096,  7003 / 4096 ],
+	[ 17933 / 4096, -17390 / 4096,  -543 / 4096 ],
+];
+
+// inverted matrices, calculated from the above
+const IPTtoLMS_M = [
+	[ 0.9999999999999998,  0.0086090370379328,  0.1110296250030260 ],
+	[ 0.9999999999999998, -0.0086090370379328, -0.1110296250030259 ],
+	[ 0.9999999999999998,  0.5600313357106791, -0.3206271749873188 ],
+];
+/*
+const LMStoRec2020_M = [
+	[ 3.4375568932814012112,   -2.5072112125095058195,   0.069654319228104608382],
+	[-0.79142868665644156125,   1.9838372198740089874,  -0.19240853321756742626 ],
+	[-0.025646662911506476363, -0.099240248643945566751, 1.1248869115554520431  ]
+];
+*/
+const LMStoXYZ_M = [
+	[  2.0701522183894223, -1.3263473389671563,  0.2066510476294053 ],
+	[  0.3647385209748072,  0.6805660249472273, -0.0453045459220347 ],
+	[ -0.0497472075358123, -0.0492609666966131,  1.1880659249923042 ],
+];
+
+// Only the PQ form of ICtCp is implemented here. There is also an HLG form.
+// from Dolby, "WHAT IS ICTCP?"
+// https://professional.dolby.com/siteassets/pdfs/ictcp_dolbywhitepaper_v071.pdf
+// and
+// Dolby, "Perceptual Color Volume
+// Measuring the Distinguishable Colors of HDR and WCG Displays"
+// https://professional.dolby.com/siteassets/pdfs/dolby-vision-measuring-perceptual-color-volume-v7.1.pdf
+export default new ColorSpace({
+	id: "ictcp",
+	name: "ICTCP",
+	// From BT.2100-2 page 7:
+	// During production, signal values are expected to exceed the
+	// range E′ = [0.0 : 1.0]. This provides processing headroom and avoids
+	// signal degradation during cascaded processing. Such values of E′,
+	// below 0.0 or exceeding 1.0, should not be clipped during production
+	// and exchange.
+	// Values below 0.0 should not be clipped in reference displays (even
+	// though they represent “negative” light) to allow the black level of
+	// the signal (LB) to be properly set using test signals known as “PLUGE”
+	coords: {
+		i: {
+			refRange: [0, 1],	// Constant luminance,
+			name: "I",
+		},
+		ct: {
+			refRange: [-0.5, 0.5],	// Full BT.2020 gamut in range [-0.5, 0.5]
+			name: "CT",
+		},
+		cp: {
+			refRange: [-0.5, 0.5],
+			name: "CP",
+		},
+	},
+
+	base: XYZ_Abs_D65,
+	fromBase (XYZ) {
+		// move to LMS cone domain
+		let LMS = multiplyMatrices(XYZtoLMS_M, XYZ);
+
+		return LMStoICtCp(LMS);
+	},
+	toBase (ICtCp) {
+		let LMS = ICtCptoLMS(ICtCp);
+
+		return multiplyMatrices(LMStoXYZ_M, LMS);
+	},
+});
+
+function LMStoICtCp (LMS) {
+	// apply the PQ EOTF
+	// we can't ever be dividing by zero because of the "1 +" in the denominator
+	let PQLMS = LMS.map (function (val) {
+		let num = c1 + (c2 * ((val / 10000) ** m1));
+		let denom = 1 + (c3 * ((val / 10000) ** m1));
+
+		return (num / denom)  ** m2;
+	});
+
+	// LMS to IPT, with rotation for Y'C'bC'r compatibility
+	return multiplyMatrices(LMStoIPT_M, PQLMS);
+}
+
+function ICtCptoLMS (ICtCp) {
+	let PQLMS = multiplyMatrices(IPTtoLMS_M, ICtCp);
+
+	// From BT.2124-0 Annex 2 Conversion 3
+	let LMS = PQLMS.map (function (val) {
+		let num  = Math.max((val ** im2) - c1, 0);
+		let denom = (c2 - (c3 * (val ** im2)));
+		return 10000 * ((num / denom) ** im1);
+	});
+
+	return LMS;
+}

package/lib/colorjs.io/colorjs.io/src/spaces/index-fn-hdr.js

@@ -0,0 +1,7 @@
+export {default as Jzazbz} from "./jzazbz.js";
+export {default as JzCzHz} from "./jzczhz.js";
+export {default as ICTCP} from "./ictcp.js";
+export {default as REC_2100_PQ} from "./rec2100-pq.js";
+export {default as REC_2100_HLG} from "./rec2100-hlg.js";
+export {default as ACEScg} from "./acescg.js";
+export {default as ACEScc} from "./acescc.js";

package/lib/colorjs.io/colorjs.io/src/spaces/index-fn.js

@@ -0,0 +1,29 @@
+export {default as XYZ_D65} from "./xyz-d65.js";
+export {default as XYZ_D50} from "./xyz-d50.js";
+export {default as XYZ_ABS_D65} from "./xyz-abs-d65.js";
+export {default as Lab_D65} from "./lab-d65.js";
+export {default as Lab} from "./lab.js";
+export {default as LCH} from "./lch.js";
+export {default as sRGB_Linear} from "./srgb-linear.js";
+export {default as sRGB} from "./srgb.js";
+export {default as HSL} from "./hsl.js";
+export {default as HWB} from "./hwb.js";
+export {default as HSV} from "./hsv.js";
+export {default as P3_Linear} from "./p3-linear.js";
+export {default as P3} from "./p3.js";
+export {default as A98RGB_Linear} from "./a98rgb-linear.js";
+export {default as A98RGB} from "./a98rgb.js";
+export {default as ProPhoto_Linear} from "./prophoto-linear.js";
+export {default as ProPhoto} from "./prophoto.js";
+export {default as REC_2020_Linear} from "./rec2020-linear.js";
+export {default as REC_2020} from "./rec2020.js";
+export {default as OKLab} from "./oklab.js";
+export {default as OKLCH} from "./oklch.js";
+export {default as CAM16_JMh} from "./cam16.js";
+export {default as HCT} from "./hct.js";
+export {default as Luv} from "./luv.js";
+export {default as LCHuv} from "./lchuv.js";
+export {default as HSLuv} from "./hsluv.js";
+export {default as HPLuv} from "./hpluv.js";
+
+export * from "./index-fn-hdr.js";

package/lib/colorjs.io/colorjs.io/src/spaces/index.js

@@ -0,0 +1,8 @@
+import ColorSpace from "../space.js";
+import * as spaces from "./index-fn.js";
+
+export * as spaces from "./index-fn.js";
+
+for (let key of Object.keys(spaces)) {
+	ColorSpace.register(spaces[key]);
+}

package/lib/colorjs.io/colorjs.io/src/spaces/jzazbz.js

@@ -0,0 +1,118 @@
+import ColorSpace from "../space.js";
+import {multiplyMatrices} from "../util.js";
+import XYZ_Abs_D65 from "./xyz-abs-d65.js";
+
+const b = 1.15;
+const g = 0.66;
+const n = 2610 / (2 ** 14);
+const ninv = (2 ** 14) / 2610;
+const c1 = 3424 / (2 ** 12);
+const c2 = 2413 / (2 ** 7);
+const c3 = 2392 / (2 ** 7);
+const p = 1.7 * 2523 / (2 ** 5);
+const pinv = (2 ** 5) / (1.7 * 2523);
+const d = -0.56;
+const d0 = 1.6295499532821566E-11;
+
+const XYZtoCone_M = [
+	[  0.41478972, 0.579999,  0.0146480 ],
+	[ -0.2015100,  1.120649,  0.0531008 ],
+	[ -0.0166008,  0.264800,  0.6684799 ],
+];
+// XYZtoCone_M inverted
+const ConetoXYZ_M = [
+	[  1.9242264357876067,  -1.0047923125953657,  0.037651404030618   ],
+	[  0.35031676209499907,  0.7264811939316552, -0.06538442294808501 ],
+	[ -0.09098281098284752, -0.3127282905230739,  1.5227665613052603  ],
+];
+const ConetoIab_M = [
+	[  0.5,       0.5,       0        ],
+	[  3.524000, -4.066708,  0.542708 ],
+	[  0.199076,  1.096799, -1.295875 ],
+];
+// ConetoIab_M inverted
+const IabtoCone_M = [
+	[ 1,                   0.1386050432715393,   0.05804731615611886 ],
+	[ 0.9999999999999999, -0.1386050432715393,  -0.05804731615611886 ],
+	[ 0.9999999999999998, -0.09601924202631895, -0.8118918960560388  ],
+];
+
+export default new ColorSpace({
+	id: "jzazbz",
+	name: "Jzazbz",
+	coords: {
+		jz: {
+			refRange: [0, 1],
+			name: "Jz",
+		},
+		az: {
+			refRange: [-0.5, 0.5],
+		},
+		bz: {
+			refRange: [-0.5, 0.5],
+		},
+	},
+
+	base: XYZ_Abs_D65,
+	fromBase (XYZ) {
+		// First make XYZ absolute, not relative to media white
+		// Maximum luminance in PQ is 10,000 cd/m²
+		// Relative XYZ has Y=1 for media white
+		// BT.2048 says media white Y=203 at PQ 58
+
+		let [ Xa, Ya, Za ] = XYZ;
+
+		// modify X and Y
+		let Xm = (b * Xa) - ((b - 1) * Za);
+		let Ym = (g * Ya) - ((g - 1) * Xa);
+
+		// move to LMS cone domain
+		let LMS = multiplyMatrices(XYZtoCone_M, [ Xm, Ym, Za ]);
+
+		// PQ-encode LMS
+		let PQLMS = LMS.map (function (val) {
+			let num = c1 + (c2 * ((val / 10000) ** n));
+			let denom = 1 + (c3 * ((val / 10000) ** n));
+
+			return (num / denom)  ** p;
+		});
+
+		// almost there, calculate Iz az bz
+		let [ Iz, az, bz] = multiplyMatrices(ConetoIab_M, PQLMS);
+		// console.log({Iz, az, bz});
+
+		let Jz = ((1 + d) * Iz) / (1 + (d * Iz)) - d0;
+		return [Jz, az, bz];
+	},
+	toBase (Jzazbz) {
+		let [Jz, az, bz] = Jzazbz;
+		let Iz = (Jz + d0) / (1 + d - d * (Jz + d0));
+
+		// bring into LMS cone domain
+		let PQLMS = multiplyMatrices(IabtoCone_M, [ Iz, az, bz ]);
+
+		// convert from PQ-coded to linear-light
+		let LMS = PQLMS.map(function (val) {
+			let num = (c1 - (val ** pinv));
+			let denom = (c3 * (val ** pinv)) - c2;
+			let x = 10000 * ((num / denom) ** ninv);
+
+			return (x); 	// luminance relative to diffuse white, [0, 70 or so].
+		});
+
+		// modified abs XYZ
+		let [ Xm, Ym, Za ] = multiplyMatrices(ConetoXYZ_M, LMS);
+
+		// restore standard D50 relative XYZ, relative to media white
+		let Xa = (Xm + ((b - 1) * Za)) / b;
+		let Ya = (Ym + ((g - 1) * Xa)) / g;
+		return [ Xa, Ya, Za ];
+	},
+
+	formats: {
+		// https://drafts.csswg.org/css-color-hdr/#Jzazbz
+		"color": {
+			coords: ["<number> | <percentage>", "<number> | <percentage>[-1,1]", "<number> | <percentage>[-1,1]"],
+		},
+	},
+});