color-elements 0.0.1

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

@@ -0,0 +1,53 @@
+import ColorSpace from "../space.js";
+import Jzazbz from "./jzazbz.js";
+import {constrain as constrainAngle} from "../angles.js";
+
+export default new ColorSpace({
+	id: "jzczhz",
+	name: "JzCzHz",
+	coords: {
+		jz: {
+			refRange: [0, 1],
+			name: "Jz",
+		},
+		cz: {
+			refRange: [0, 1],
+			name: "Chroma",
+		},
+		hz: {
+			refRange: [0, 360],
+			type: "angle",
+			name: "Hue",
+		},
+	},
+
+	base: Jzazbz,
+	fromBase (jzazbz) {
+		// Convert to polar form
+		let [Jz, az, bz] = jzazbz;
+		let hue;
+		const ε = 0.0002; // chromatic components much smaller than a,b
+
+		if (Math.abs(az) < ε && Math.abs(bz) < ε) {
+			hue = NaN;
+		}
+		else {
+			hue = Math.atan2(bz, az) * 180 / Math.PI;
+		}
+
+		return [
+			Jz, // Jz is still Jz
+			Math.sqrt(az ** 2 + bz ** 2), // Chroma
+			constrainAngle(hue), // Hue, in degrees [0 to 360)
+		];
+	},
+	toBase (jzczhz) {
+		// Convert from polar form
+		// debugger;
+		return [
+			jzczhz[0], // Jz is still Jz
+			jzczhz[1] * Math.cos(jzczhz[2] * Math.PI / 180), // az
+			jzczhz[1] * Math.sin(jzczhz[2] * Math.PI / 180),  // bz
+		];
+	},
+});

package/lib/colorjs.io/src/spaces/lab-d65.js

@@ -0,0 +1,74 @@
+import ColorSpace from "../space.js";
+import {WHITES} from "../adapt.js";
+import xyz_d65 from "./xyz-d65.js";
+
+// κ * ε  = 2^3 = 8
+const ε = 216 / 24389;  // 6^3/29^3 == (24/116)^3
+const ε3 = 24 / 116;
+const κ = 24389 / 27;   // 29^3/3^3
+
+let white = WHITES.D65;
+
+export default new ColorSpace({
+	id: "lab-d65",
+	name: "Lab D65",
+	coords: {
+		l: {
+			refRange: [0, 100],
+			name: "Lightness",
+		},
+		a: {
+			refRange: [-125, 125],
+		},
+		b: {
+			refRange: [-125, 125],
+		},
+	},
+
+	// Assuming XYZ is relative to D65, convert to CIE Lab
+	// from CIE standard, which now defines these as a rational fraction
+	white,
+
+	base: xyz_d65,
+	// Convert D65-adapted XYZ to Lab
+	//  CIE 15.3:2004 section 8.2.1.1
+	fromBase (XYZ) {
+		// compute xyz, which is XYZ scaled relative to reference white
+		let xyz = XYZ.map((value, i) => value / white[i]);
+
+		// now compute f
+		let f = xyz.map(value => value > ε ? Math.cbrt(value) : (κ * value + 16) / 116);
+
+		return [
+			(116 * f[1]) - 16,   // L
+			500 * (f[0] - f[1]), // a
+			200 * (f[1] - f[2]),  // b
+		];
+	},
+	// Convert Lab to D65-adapted XYZ
+	// Same result as CIE 15.3:2004 Appendix D although the derivation is different
+	// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+	toBase (Lab) {
+		// compute f, starting with the luminance-related term
+		let f = [];
+		f[1] = (Lab[0] + 16) / 116;
+		f[0] = Lab[1] / 500 + f[1];
+		f[2] = f[1] - Lab[2] / 200;
+
+		// compute xyz
+		let xyz = [
+			f[0]   > ε3 ? Math.pow(f[0], 3)                : (116 * f[0] - 16) / κ,
+			Lab[0] > 8  ? Math.pow((Lab[0] + 16) / 116, 3) : Lab[0] / κ,
+			f[2]   > ε3 ? Math.pow(f[2], 3)                : (116 * f[2] - 16) / κ,
+		];
+
+		// Compute XYZ by scaling xyz by reference white
+		return xyz.map((value, i) => value * white[i]);
+	},
+
+	formats: {
+		"lab-d65": {
+			coords: ["<number> | <percentage>", "<number> | <percentage>[-1,1]", "<number> | <percentage>[-1,1]"],
+		},
+	},
+});

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

@@ -0,0 +1,74 @@
+import ColorSpace from "../space.js";
+import {WHITES} from "../adapt.js";
+import xyz_d50 from "./xyz-d50.js";
+
+// κ * ε  = 2^3 = 8
+const ε = 216 / 24389;  // 6^3/29^3 == (24/116)^3
+const ε3 = 24 / 116;
+const κ = 24389 / 27;   // 29^3/3^3
+
+let white = WHITES.D50;
+
+export default new ColorSpace({
+	id: "lab",
+	name: "Lab",
+	coords: {
+		l: {
+			refRange: [0, 100],
+			name: "Lightness",
+		},
+		a: {
+			refRange: [-125, 125],
+		},
+		b: {
+			refRange: [-125, 125],
+		},
+	},
+
+	// Assuming XYZ is relative to D50, convert to CIE Lab
+	// from CIE standard, which now defines these as a rational fraction
+	white,
+
+	base: xyz_d50,
+	// Convert D50-adapted XYX to Lab
+	//  CIE 15.3:2004 section 8.2.1.1
+	fromBase (XYZ) {
+		// compute xyz, which is XYZ scaled relative to reference white
+		let xyz = XYZ.map((value, i) => value / white[i]);
+
+		// now compute f
+		let f = xyz.map(value => value > ε ? Math.cbrt(value) : (κ * value + 16) / 116);
+
+		return [
+			(116 * f[1]) - 16,   // L
+			500 * (f[0] - f[1]), // a
+			200 * (f[1] - f[2]),  // b
+		];
+	},
+	// Convert Lab to D50-adapted XYZ
+	// Same result as CIE 15.3:2004 Appendix D although the derivation is different
+	// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+	toBase (Lab) {
+		// compute f, starting with the luminance-related term
+		let f = [];
+		f[1] = (Lab[0] + 16) / 116;
+		f[0] = Lab[1] / 500 + f[1];
+		f[2] = f[1] - Lab[2] / 200;
+
+		// compute xyz
+		let xyz = [
+			f[0]   > ε3 ? Math.pow(f[0], 3)                : (116 * f[0] - 16) / κ,
+			Lab[0] > 8  ? Math.pow((Lab[0] + 16) / 116, 3) : Lab[0] / κ,
+			f[2]   > ε3 ? Math.pow(f[2], 3)                : (116 * f[2] - 16) / κ,
+		];
+
+		// Compute XYZ by scaling xyz by reference white
+		return xyz.map((value, i) => value * white[i]);
+	},
+
+	formats: {
+		"lab": {
+			coords: ["<number> | <percentage>", "<number> | <percentage>[-1,1]", "<number> | <percentage>[-1,1]"],
+		},
+	},
+});

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

@@ -0,0 +1,67 @@
+import ColorSpace from "../space.js";
+import Lab from "./lab.js";
+import {constrain as constrainAngle} from "../angles.js";
+
+export default new ColorSpace({
+	id: "lch",
+	name: "LCH",
+	coords: {
+		l: {
+			refRange: [0, 100],
+			name: "Lightness",
+		},
+		c: {
+			refRange: [0, 150],
+			name: "Chroma",
+		},
+		h: {
+			refRange: [0, 360],
+			type: "angle",
+			name: "Hue",
+		},
+	},
+
+	base: Lab,
+	fromBase (Lab) {
+		// Convert to polar form
+		let [L, a, b] = Lab;
+		let hue;
+		const ε = 0.02;
+
+		if (Math.abs(a) < ε && Math.abs(b) < ε) {
+			hue = NaN;
+		}
+		else {
+			hue = Math.atan2(b, a) * 180 / Math.PI;
+		}
+
+		return [
+			L, // L is still L
+			Math.sqrt(a ** 2 + b ** 2), // Chroma
+			constrainAngle(hue), // Hue, in degrees [0 to 360)
+		];
+	},
+	toBase (LCH) {
+		// Convert from polar form
+		let [Lightness, Chroma, Hue] = LCH;
+		// Clamp any negative Chroma
+		if (Chroma < 0) {
+			Chroma = 0;
+		}
+		// Deal with NaN Hue
+		if (isNaN(Hue)) {
+			Hue = 0;
+		}
+		return [
+			Lightness, // L is still L
+			Chroma * Math.cos(Hue * Math.PI / 180), // a
+			Chroma * Math.sin(Hue * Math.PI / 180),  // b
+		];
+	},
+
+	formats: {
+		"lch": {
+			coords: ["<number> | <percentage>", "<number> | <percentage>", "<number> | <angle>"],
+		},
+	},
+});

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

@@ -0,0 +1,68 @@
+import ColorSpace from "../space.js";
+import Luv from "./luv.js";
+import {constrain as constrainAngle} from "../angles.js";
+
+export default new ColorSpace({
+	id: "lchuv",
+	name: "LChuv",
+	coords: {
+		l: {
+			refRange: [0, 100],
+			name: "Lightness",
+		},
+		c: {
+			refRange: [0, 220],
+			name: "Chroma",
+		},
+		h: {
+			refRange: [0, 360],
+			type: "angle",
+			name: "Hue",
+		},
+	},
+
+	base: Luv,
+	fromBase (Luv) {
+		// Convert to polar form
+		let [L, u, v] = Luv;
+		let hue;
+		const ε = 0.02;
+
+		if (Math.abs(u) < ε && Math.abs(v) < ε) {
+			hue = NaN;
+		}
+		else {
+			hue = Math.atan2(v, u) * 180 / Math.PI;
+		}
+
+		return [
+			L, // L is still L
+			Math.sqrt(u ** 2 + v ** 2), // Chroma
+			constrainAngle(hue), // Hue, in degrees [0 to 360)
+		];
+	},
+	toBase (LCH) {
+		// Convert from polar form
+		let [Lightness, Chroma, Hue] = LCH;
+		// Clamp any negative Chroma
+		if (Chroma < 0) {
+			Chroma = 0;
+		}
+		// Deal with NaN Hue
+		if (isNaN(Hue)) {
+			Hue = 0;
+		}
+		return [
+			Lightness, // L is still L
+			Chroma * Math.cos(Hue * Math.PI / 180), // u
+			Chroma * Math.sin(Hue * Math.PI / 180),  // v
+		];
+	},
+
+	formats: {
+		color: {
+			id: "--lchuv",
+			coords: ["<number> | <percentage>", "<number> | <percentage>", "<number> | <angle>"],
+		},
+	},
+});

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

@@ -0,0 +1,85 @@
+import ColorSpace from "../space.js";
+import {WHITES} from "../adapt.js";
+import xyz_d65 from "./xyz-d65.js";
+import {uv} from "../chromaticity.js";
+import {isNone, skipNone} from "../util.js";
+
+let white = WHITES.D65;
+
+const ε = 216 / 24389;  // 6^3/29^3 == (24/116)^3
+const κ = 24389 / 27;   // 29^3/3^3
+const [U_PRIME_WHITE, V_PRIME_WHITE] = uv({space: xyz_d65, coords: white});
+
+export default new ColorSpace({
+	id: "luv",
+	name: "Luv",
+	coords: {
+		l: {
+			refRange: [0, 100],
+			name: "Lightness",
+		},
+		// Reference ranges from https://facelessuser.github.io/coloraide/colors/luv/
+		u: {
+			refRange: [-215, 215],
+		},
+		v: {
+			refRange: [-215, 215],
+		},
+	},
+
+	white: white,
+	base: xyz_d65,
+
+	// Convert D65-adapted XYZ to Luv
+	// https://en.wikipedia.org/wiki/CIELUV#The_forward_transformation
+	fromBase (XYZ) {
+		let xyz = [skipNone(XYZ[0]), skipNone(XYZ[1]), skipNone(XYZ[2])];
+		let y = xyz[1];
+
+		let [up, vp] = uv({space: xyz_d65, coords: xyz});
+
+		// Protect against XYZ of [0, 0, 0]
+		if (!Number.isFinite(up) || !Number.isFinite(vp)) {
+			return [0, 0, 0];
+		}
+
+		let L = y <= ε ? κ * y : 116 * Math.cbrt(y) - 16;
+		return [
+			L,
+			13 * L * (up - U_PRIME_WHITE),
+			13 * L * (vp - V_PRIME_WHITE),
+		 ];
+	},
+
+	// Convert Luv to D65-adapted XYZ
+	// https://en.wikipedia.org/wiki/CIELUV#The_reverse_transformation
+	toBase (Luv) {
+		let [L, u, v] = Luv;
+
+		// Protect against division by zero and NaN Lightness
+		if (L === 0 || isNone(L)) {
+			return [0, 0, 0];
+		}
+
+		u = skipNone(u);
+		v = skipNone(v);
+
+		let up = (u / (13 * L)) + U_PRIME_WHITE;
+		let vp = (v / (13 * L)) + V_PRIME_WHITE;
+
+		let y = L <= 8 ? L / κ : Math.pow((L + 16) / 116, 3);
+
+		return [
+			y * ((9 * up) / (4 * vp)),
+			y,
+			y * ((12 - 3 * up - 20 * vp) / (4 * vp)),
+		];
+	},
+
+	formats: {
+		color: {
+			id: "--luv",
+			coords: ["<number> | <percentage>", "<number> | <percentage>[-1,1]", "<number> | <percentage>[-1,1]"],
+		},
+	},
+});

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

@@ -0,0 +1,74 @@
+import ColorSpace from "../space.js";
+import {multiplyMatrices} from "../util.js";
+import XYZ_D65 from "./xyz-d65.js";
+
+// Recalculated for consistent reference white
+// see https://github.com/w3c/csswg-drafts/issues/6642#issuecomment-943521484
+const XYZtoLMS_M = [
+	[ 0.8190224379967030, 0.3619062600528904, -0.1288737815209879 ],
+	[ 0.0329836539323885, 0.9292868615863434,  0.0361446663506424 ],
+	[ 0.0481771893596242, 0.2642395317527308,  0.6335478284694309 ],
+];
+// inverse of XYZtoLMS_M
+const LMStoXYZ_M = [
+	[  1.2268798758459243, -0.5578149944602171,  0.2813910456659647 ],
+	[ -0.0405757452148008,  1.1122868032803170, -0.0717110580655164 ],
+	[ -0.0763729366746601, -0.4214933324022432,  1.5869240198367816 ],
+];
+const LMStoLab_M = [
+	[ 0.2104542683093140,  0.7936177747023054, -0.0040720430116193 ],
+	[ 1.9779985324311684, -2.4285922420485799,  0.4505937096174110 ],
+	[ 0.0259040424655478,  0.7827717124575296, -0.8086757549230774 ],
+];
+// LMStoIab_M inverted
+const LabtoLMS_M = [
+	[ 1.0000000000000000,  0.3963377773761749,  0.2158037573099136 ],
+	[ 1.0000000000000000, -0.1055613458156586, -0.0638541728258133 ],
+	[ 1.0000000000000000, -0.0894841775298119, -1.2914855480194092 ],
+];
+
+export default new ColorSpace({
+	id: "oklab",
+	name: "Oklab",
+	coords: {
+		l: {
+			refRange: [0, 1],
+			name: "Lightness",
+		},
+		a: {
+			refRange: [-0.4, 0.4],
+		},
+		b: {
+			refRange: [-0.4, 0.4],
+		},
+	},
+
+	// Note that XYZ is relative to D65
+	white: "D65",
+	base: XYZ_D65,
+	fromBase (XYZ) {
+		// move to LMS cone domain
+		let LMS = multiplyMatrices(XYZtoLMS_M, XYZ);
+
+		// non-linearity
+		let LMSg = LMS.map(val => Math.cbrt(val));
+
+		return multiplyMatrices(LMStoLab_M, LMSg);
+
+	},
+	toBase (OKLab) {
+		// move to LMS cone domain
+		let LMSg = multiplyMatrices(LabtoLMS_M, OKLab);
+
+		// restore linearity
+		let LMS = LMSg.map(val => val ** 3);
+
+		return multiplyMatrices(LMStoXYZ_M, LMS);
+	},
+
+	formats: {
+		"oklab": {
+			coords: ["<percentage> | <number>", "<number> | <percentage>[-1,1]", "<number> | <percentage>[-1,1]"],
+		},
+	},
+});

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

@@ -0,0 +1,68 @@
+import ColorSpace from "../space.js";
+import OKLab from "./oklab.js";
+import {constrain as constrainAngle} from "../angles.js";
+
+export default new ColorSpace({
+	id: "oklch",
+	name: "Oklch",
+	coords: {
+		l: {
+			refRange: [0, 1],
+			name: "Lightness",
+		},
+		c: {
+			refRange: [0, 0.4],
+			name: "Chroma",
+		},
+		h: {
+			refRange: [0, 360],
+			type: "angle",
+			name: "Hue",
+		},
+	},
+	white: "D65",
+
+	base: OKLab,
+	fromBase (oklab) {
+		// Convert to polar form
+		let [L, a, b] = oklab;
+		let h;
+		const ε = 0.0002; // chromatic components much smaller than a,b
+
+		if (Math.abs(a) < ε && Math.abs(b) < ε) {
+			h = NaN;
+		}
+		else {
+			h = Math.atan2(b, a) * 180 / Math.PI;
+		}
+
+		return [
+			L, // OKLab L is still L
+			Math.sqrt(a ** 2 + b ** 2), // Chroma
+			constrainAngle(h), // Hue, in degrees [0 to 360)
+		];
+	},
+	// Convert from polar form
+	toBase (oklch) {
+		let [L, C, h] = oklch;
+		let a, b;
+
+		// check for NaN hue
+		if (isNaN(h)) {
+			a = 0;
+			b = 0;
+		}
+		else {
+			a = C * Math.cos(h * Math.PI / 180);
+			b = C * Math.sin(h * Math.PI / 180);
+		}
+
+		return [ L, a, b ];
+	},
+
+	formats: {
+		"oklch": {
+			coords: ["<percentage> | <number>", "<number> | <percentage>[0,1]", "<number> | <angle>"],
+		},
+	},
+});

package/lib/colorjs.io/src/spaces/p3-linear.js

@@ -0,0 +1,22 @@
+import RGBColorSpace from "../rgbspace.js";
+
+const toXYZ_M = [
+	[0.4865709486482162, 0.26566769316909306, 0.1982172852343625],
+	[0.2289745640697488, 0.6917385218365064,  0.079286914093745],
+	[0.0000000000000000, 0.04511338185890264, 1.043944368900976],
+];
+
+const fromXYZ_M = [
+	[ 2.493496911941425,   -0.9313836179191239, -0.40271078445071684],
+	[-0.8294889695615747,   1.7626640603183463,  0.023624685841943577],
+	[ 0.03584583024378447, -0.07617238926804182, 0.9568845240076872],
+];
+
+export default new RGBColorSpace({
+	id: "p3-linear",
+	cssId: "--display-p3-linear",
+	name: "Linear P3",
+	white: "D65",
+	toXYZ_M,
+	fromXYZ_M,
+});

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

@@ -0,0 +1,13 @@
+import RGBColorSpace from "../rgbspace.js";
+import P3Linear from "./p3-linear.js";
+import sRGB from "./srgb.js";
+
+export default new RGBColorSpace({
+	id: "p3",
+	cssId: "display-p3",
+	name: "P3",
+	base: P3Linear,
+	// Gamma encoding/decoding is the same as sRGB
+	fromBase: sRGB.fromBase,
+	toBase: sRGB.toBase,
+});

package/lib/colorjs.io/src/spaces/prophoto-linear.js

@@ -0,0 +1,28 @@
+import RGBColorSpace from "../rgbspace.js";
+import XYZ_D50 from "./xyz-d50.js";
+
+// convert an array of  prophoto-rgb values to CIE XYZ
+// using  D50 (so no chromatic adaptation needed afterwards)
+// matrix cannot be expressed in rational form, but is calculated to 64 bit accuracy
+// see https://github.com/w3c/csswg-drafts/issues/7675
+const toXYZ_M = [
+	[ 0.79776664490064230,  0.13518129740053308,  0.03134773412839220 ],
+	[ 0.28807482881940130,  0.71183523424187300,  0.00008993693872564 ],
+	[ 0.00000000000000000,  0.00000000000000000,  0.82510460251046020 ],
+];
+
+const fromXYZ_M = [
+	[  1.34578688164715830, -0.25557208737979464, -0.05110186497554526 ],
+	[ -0.54463070512490190,  1.50824774284514680,  0.02052744743642139 ],
+	[  0.00000000000000000,  0.00000000000000000,  1.21196754563894520 ],
+];
+
+export default new RGBColorSpace({
+	id: "prophoto-linear",
+	cssId: "--prophoto-rgb-linear",
+	name: "Linear ProPhoto",
+	white: "D50",
+	base: XYZ_D50,
+	toXYZ_M,
+	fromXYZ_M,
+});

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

@@ -0,0 +1,19 @@
+import RGBColorSpace from "../rgbspace.js";
+import ProPhotoLinear from "./prophoto-linear.js";
+
+const Et = 1 / 512;
+const Et2 = 16 / 512;
+
+export default new RGBColorSpace({
+	id: "prophoto",
+	cssId: "prophoto-rgb",
+	name: "ProPhoto",
+	base: ProPhotoLinear,
+	toBase (RGB) {
+		// Transfer curve is gamma 1.8 with a small linear portion
+		return RGB.map(v => v < Et2 ? v / 16 : v ** 1.8);
+	},
+	fromBase (RGB) {
+		return RGB.map(v => v >= Et ? v ** (1 / 1.8) : 16 * v);
+	},
+});

package/lib/colorjs.io/src/spaces/rec2020-linear.js

@@ -0,0 +1,27 @@
+import RGBColorSpace from "../rgbspace.js";
+
+// convert an array of linear-light rec2020 values to CIE XYZ
+// using  D65 (no chromatic adaptation)
+// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+// 0 is actually calculated as  4.994106574466076e-17
+const toXYZ_M = [
+	[ 0.6369580483012914, 0.14461690358620832,  0.1688809751641721  ],
+	[ 0.2627002120112671, 0.6779980715188708,   0.05930171646986196 ],
+	[ 0.000000000000000,  0.028072693049087428, 1.060985057710791   ],
+];
+
+// from ITU-R BT.2124-0 Annex 2 p.3
+const fromXYZ_M = [
+	[  1.716651187971268,  -0.355670783776392, -0.253366281373660  ],
+	[ -0.666684351832489,   1.616481236634939,  0.0157685458139111 ],
+	[  0.017639857445311,  -0.042770613257809,  0.942103121235474  ],
+];
+
+export default new RGBColorSpace({
+	id: "rec2020-linear",
+	cssId: "--rec2020-linear",
+	name: "Linear REC.2020",
+	white: "D65",
+	toXYZ_M,
+	fromXYZ_M,
+});