Add OkLrab and OkLrCh (#511)

* Add OkLrab and OkLrCh

Resolves #505

* Rebase accounting for null changes

* Refactor to account for recent changes

src/space-coord-accessors.d.ts

@@ -27,6 +27,8 @@ declare class SpaceAccessors {
 	okhsv: SpaceAccessor;
 	oklab: SpaceAccessor;
 	oklch: SpaceAccessor;
+	oklrab: SpaceAccessor;
+	oklrch: SpaceAccessor;
 	p3: SpaceAccessor;
 	p3_linear: SpaceAccessor;
 	prophoto: SpaceAccessor;

src/spaces/index-fn.js

@@ -23,6 +23,8 @@ 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 OKLrab} from "./oklrab.js";
+export {default as OKLrCH} from "./oklrch.js";
 export {default as Okhsl} from "./okhsl.js";
 export {default as Okhsv} from "./okhsv.js";
 export {default as CAM16_JMh} from "./cam16.js";

src/spaces/oklrab.js

@@ -0,0 +1,37 @@
+import ColorSpace from "../ColorSpace.js";
+import OKLab from "./oklab.js";
+import {toe, toeInv} from "./okhsl.js";
+
+export default new ColorSpace({
+	id: "oklrab",
+	name: "Oklrab",
+	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: OKLab,
+	fromBase (oklab) {
+		return [toe(oklab[0]), oklab[1], oklab[2]];
+	},
+	toBase (oklrab) {
+		return [toeInv(oklrab[0]), oklrab[1], oklrab[2]];
+	},
+
+	formats: {
+		"color": {
+			coords: ["<percentage> | <number>", "<number> | <percentage>[-1,1]", "<number> | <percentage>[-1,1]"],
+		},
+	},
+});

src/spaces/oklrch.js

@@ -0,0 +1,34 @@
+import ColorSpace from "../ColorSpace.js";
+import OKLrab from "./oklrab.js";
+import lch from "./lch.js";
+
+export default new ColorSpace({
+	id: "oklrch",
+	name: "Oklrch",
+	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: OKLrab,
+	fromBase: lch.fromBase,
+	toBase: lch.toBase,
+
+	formats: {
+		"color": {
+			coords: ["<percentage> | <number>", "<number> | <percentage>[0,1]", "<number> | <angle>"],
+		},
+	},
+});

test/conversions.js

@@ -430,22 +430,78 @@ const tests = {
 					expect: [1.0, 0.0, null],
 				},
 				{
-					name: "sRGB red (D65) to OKlab",
+					name: "sRGB red (D65) to OKlch",
 					args: "red",
 					expect: [0.6279553639214311, 0.2576833038053608, 29.23388027962784],
 				},
 				{
-					name: "sRGB lime (D65) to OKlab",
+					name: "sRGB lime (D65) to OKlch",
 					args: "lime",
 					expect: [0.8664396175234368, 0.2948272245426958, 142.4953450414439],
 				},
 				{
-					name: "sRGB blue (D65) to OKlab",
+					name: "sRGB blue (D65) to OKlch",
 					args: "blue",
 					expect: [0.45201371817442365, 0.3132143886344849, 264.0520226163699],
 				},
 			],
 		},
+		{
+			name: "OKLrab",
+			data: {
+				toSpace: "oklrab",
+			},
+			tests: [
+				{
+					name: "sRGB white (D65) to OKlrab",
+					args: "white",
+					expect:  [ 1.0000000000000002, -4.996003610813204e-16, 0 ],
+				},
+				{
+					name: "sRGB red (D65) to OKlrab",
+					args: "red",
+					expect: [ 0.5680846563197034, 0.2248630684262744, 0.125846277330585 ],
+				},
+				{
+					name: "sRGB lime (D65) to OKlrab",
+					args: "lime",
+					expect: [ 0.8445289714936317, -0.23388758093655815, 0.1794984451609376 ],
+				},
+				{
+					name: "sRGB blue (D65) to OKlrab",
+					args: "blue",
+					expect: [ 0.3665653391870817, -0.03245697517079771, -0.3115281656775778 ],
+				},
+			],
+		},
+		{
+			name: "OKLrCh",
+			data: {
+				toSpace: "oklrch",
+			},
+			tests: [
+				{
+					name: "sRGB white (D65) to OKlrch",
+					args: "white",
+					expect: [1.0, 0.0, null],
+				},
+				{
+					name: "sRGB red (D65) to OKlrch",
+					args: "red",
+					expect: [0.5680846563197034, 0.2576833038053608, 29.23388027962784],
+				},
+				{
+					name: "sRGB lime (D65) to OKlrch",
+					args: "lime",
+					expect: [0.8445289714936317, 0.2948272245426958, 142.4953450414439],
+				},
+				{
+					name: "sRGB blue (D65) to OKlrch",
+					args: "blue",
+					expect: [0.3665653391870817, 0.3132143886344849, 264.0520226163699],
+				},
+			],
+		},
 		{
 			name: "Linear-light sRGB",
 			data: {

types/src/spaces/oklrab.d.ts

@@ -0,0 +1,4 @@
+declare const _default: ColorSpace;
+export default _default;
+import ColorSpace from "../ColorSpace.js";
+//# sourceMappingURL=oklrab.d.ts.map

types/src/spaces/oklrch.d.ts

@@ -0,0 +1,4 @@
+declare const _default: ColorSpace;
+export default _default;
+import ColorSpace from "../ColorSpace.js";
+//# sourceMappingURL=oklrch.d.ts.map