update color-helpers

packages/color-helpers/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changes to Color Helpers
 
+### Unreleased (patch)
+
+- Match latest changes made in `csswg-drafts` for:
+  - `gam_2020`
+  - `Lab_to_LCH`
+  - `lin_2020`
+  - `OKLab_to_OKLCH`
+  - `sRGB_to_HSL`
+  - `XYZ_D50_to_HWB`
+
+
 ### 6.0.0
 
 _January 14, 2026_

packages/color-helpers/scripts/hashes.json

@@ -1,10 +1,10 @@
 [
 	"384d52db3fcd98381e18743e1eba590a",
-	"cd99f5e1c28fc9df18684e351049e7a6",
+	"a69bf3dc21cfcc876c80ee311ca85f90",
 	"094c9859b0960c4e394947cc4832b54f",
 	"c9e2f2a3b2cba543a01cb8aa5d77c04a",
 	"7aba804ac76ce5d733956b4251194344",
-	"d575d036af8c4a813217192a15982021",
+	"38c990a8de107bb30600ef3288e1b391",
 	"f912dea8d7d9813556f3ece0730f5392",
-	"45dd3fb5a146c0865a4ed06d4d230eb0"
+	"cf51b4aff9abf7a7eff417c62a3b126d"
 ]

packages/color-helpers/src/conversions/gam-2020.ts

@@ -15,16 +15,9 @@ export function gam_2020(RGB: Color): Color {
 	]
 }
 
-const α = 1.09929682680944;
-const β = 0.018053968510807;
-
 function gam_2020_channel(val: number): number {
 	const sign = val < 0 ? -1 : 1;
 	const abs = Math.abs(val);
 
-	if (abs > β) {
-		return sign * (α * Math.pow(abs, 0.45) - (α - 1));
-	}
-
-	return 4.5 * val;
+	return sign * Math.pow(abs, 1 / 2.4);
 }

packages/color-helpers/src/conversions/lab-to-lch.ts

@@ -5,11 +5,21 @@ import type { Color } from '../types/color';
  * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
  */
 export function Lab_to_LCH(Lab: Color): Color {
-	// Convert to polar form
-	const hue = Math.atan2(Lab[2], Lab[1]) * 180 / Math.PI;
+	const epsilon = 0.0015;
+	const chroma = Math.sqrt(Math.pow(Lab[1], 2) + Math.pow(Lab[2], 2)); // Chroma
+
+	let hue = Math.atan2(Lab[2], Lab[1]) * 180 / Math.PI;
+	if (hue < 0) {
+		hue = hue + 360;
+	}
+
+	if (chroma <= epsilon) {
+		hue = NaN;
+	}
+
 	return [
 		Lab[0], // L is still L
-		Math.sqrt(Math.pow(Lab[1], 2) + Math.pow(Lab[2], 2)), // Chroma
-		hue >= 0 ? hue : hue + 360, // Hue, in degrees [0 to 360)
+		chroma, // Chroma
+		hue // Hue, in degrees [0 to 360)
 	];
 }

packages/color-helpers/src/conversions/lin-2020.ts

@@ -16,16 +16,9 @@ export function lin_2020(RGB: Color): Color {
 	]
 }
 
-const α = 1.09929682680944;
-const β = 0.018053968510807;
-
 function lin_2020_channel(val: number): number {
 	const sign = val < 0 ? -1 : 1;
 	const abs = Math.abs(val);
 
-	if (abs < β * 4.5) {
-		return val / 4.5;
-	}
-
-	return sign * (Math.pow((abs + α - 1) / α, 1 / 0.45));
+	return sign * Math.pow(abs, 2.4);
 }

packages/color-helpers/src/conversions/oklab-to-oklch.ts

@@ -6,10 +6,21 @@ import type { Color } from '../types/color';
  * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js
  */
 export function OKLab_to_OKLCH(OKLab: Color): Color {
-	const hue = Math.atan2(OKLab[2], OKLab[1]) * 180 / Math.PI;
+	const epsilon = 0.000004;
+	const chroma = Math.sqrt(OKLab[1] ** 2 + OKLab[2] ** 2);
+
+	let hue = Math.atan2(OKLab[2], OKLab[1]) * 180 / Math.PI;
+	if (hue < 0) {
+		hue = hue + 360;
+	}
+
+	if (chroma <= epsilon) {
+		hue = NaN;
+	}
+
 	return [
 		OKLab[0], // L is still L
-		Math.sqrt(OKLab[1] ** 2 + OKLab[2] ** 2), // Chroma
-		hue >= 0 ? hue : hue + 360, // Hue, in degrees [0 to 360)
+		chroma,
+		hue
 	];
 }

packages/color-helpers/src/conversions/srgb-to-hsl.ts

@@ -63,6 +63,11 @@ export function sRGB_to_HSL(RGB: Color): Color {
 		hue -= 360;
 	}
 
+	const epsilon = 1 / 100_000;   // max Sat is 1, in this code
+	if (sat <= epsilon) {
+		hue = NaN;
+	}
+
 	return [
 		hue,
 		sat * 100,

packages/color-helpers/src/conversions/xyz/index.ts

@@ -135,8 +135,15 @@ export function XYZ_D50_to_HWB(x: Color): Color {
 	const srgb = gam_sRGB(y);
 
 	const white = Math.min(srgb[0], srgb[1], srgb[2]);
-	const black = 1 - Math.max(srgb[0], srgb[1], srgb[2]);
-	return [sRGB_to_Hue(srgb), white * 100, black * 100];
+	const black = 1 - Math.max(srgb[0], srgb[1], srgb[2])
+
+	let hue = sRGB_to_Hue(srgb);
+	const epsilon = 1 / 100_000;  // account for multiply by 100
+	if (white + black >= 1 - epsilon) {
+		hue = NaN;
+	}
+
+	return [hue, white * 100, black * 100];
 }
 
 /**

packages/css-color-parser/test/basic/color-function.mjs

@@ -19,7 +19,7 @@ const tests = [
 	['color(a98-rgb 0.565 1 0.234)', 'rgb(1, 255, 0)'],
 	['color(prophoto-rgb 0.5402796954751572 0.9275945561561767 0.30435477084804174)', 'rgb(1, 255, 0)'],
 	['color(display-p3 0.45844420720487417 0.9852652233445233 0.29798036139719497)', 'rgb(1, 255, 0)'],
-	['color(rec2020 0.5675603321833232 0.9592792129938423 0.2686829491074993)', 'rgb(1, 255, 0)'],
+	['color(rec2020 0.6296393406173314 0.9656623497977268 0.3632776716731966)', 'rgb(1, 255, 0)'],
 	['color(xyz-d50 0.3851458288094242 0.7168862873215868 0.09696013568183873)', 'rgb(1, 255, 0)'],
 	['color(xyz-d65 0.35757130434515494 0.7151655154354521 0.11903355225337156)', 'rgb(1, 255, 0)'],
 	['color(xyz 0.35757130434515494 0.7151655154354521 0.11903355225337156)', 'rgb(1, 255, 0)'],
@@ -29,7 +29,7 @@ const tests = [
 	['color(a98-rgb 0.265 0.5134 0.5344)', 'rgb(0, 131, 135)'],
 	['color(prophoto-rgb 0.28284813138491105 0.41695332740189284 0.4586239337463392)', 'rgb(0, 131, 135)'],
 	['color(display-p3 0.18049383596973329 0.5091259470889726 0.5339002129941044)', 'rgb(0, 131, 135)'],
-	['color(rec2020 0.24657637908526203 0.44994210472189566 0.486194553499425)', 'rgb(0, 131, 135)'],
+	['color(rec2020 0.3584374937329418 0.5234107856368522 0.548844528912945)', 'rgb(0, 131, 135)'],
 	['color(xyz-d50 0.11786343156307554 0.1771045882551784 0.2028294891298204)', 'rgb(0, 131, 135)'],
 	['color(xyz-d65 0.12135537506539545 0.1797988884168019 0.2676568254682071)', 'rgb(0, 131, 135)'],
 	['color(xyz 0.12135537506539545 0.1797988884168019 0.2676568254682071)', 'rgb(0, 131, 135)'],
@@ -39,7 +39,7 @@ const tests = [
 	['color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695)', 'rgb(229, 125, 245)'],
 	['color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222)', 'rgb(229, 125, 245)'],
 	['color(display-p3 0.843565234 0.509345345 0.9342344435)', 'rgb(229, 125, 245)'],
-	['color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224)', 'rgb(229, 125, 245)'],
+	['color(rec2020 0.8075367152908116 0.5641142016050468 0.9339114003184052)', 'rgb(229, 125, 245)'],
 	['color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199)', 'rgb(229, 125, 245)'],
 	['color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693)', 'rgb(229, 125, 245)'],
 	['color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693)', 'rgb(229, 125, 245)'],

packages/css-color-parser/test/basic/color-mix-function.mjs

@@ -10,7 +10,7 @@ const tests = [
 	['color-mix(in srgb, green 40%, color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695))', 'rgb(137, 126, 147)'],
 	['color-mix(in srgb, green 40%, color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222))', 'rgb(137, 126, 147)'],
 	['color-mix(in srgb, green 40%, color(display-p3 0.843565234 0.509345345 0.9342344435))', 'rgb(137, 126, 147)'],
-	['color-mix(in srgb, green 40%, color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224))', 'rgb(137, 126, 147)'],
+	['color-mix(in srgb, green 40%, color(rec2020 0.807076644727751 0.5627572708703388 0.9326528689276063))', 'rgb(137, 126, 147)'],
 	['color-mix(in srgb, green 40%, color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199))', 'rgb(137, 126, 147)'],
 	['color-mix(in srgb, green 40%, color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(137, 126, 147)'],
 	['color-mix(in srgb, green 40%, color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(137, 126, 147)'],
@@ -22,7 +22,7 @@ const tests = [
 	['color-mix(in srgb-linear, green 40%, color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695))', 'rgb(182, 126, 195)'],
 	['color-mix(in srgb-linear, green 40%, color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222))', 'rgb(182, 126, 195)'],
 	['color-mix(in srgb-linear, green 40%, color(display-p3 0.843565234 0.509345345 0.9342344435))', 'rgb(182, 126, 195)'],
-	['color-mix(in srgb-linear, green 40%, color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224))', 'rgb(182, 126, 195)'],
+	['color-mix(in srgb-linear, green 40%, color(rec2020 0.807076644727751 0.5627572708703388 0.9326528689276063))', 'rgb(182, 126, 195)'],
 	['color-mix(in srgb-linear, green 40%, color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199))', 'rgb(182, 126, 195)'],
 	['color-mix(in srgb-linear, green 40%, color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(182, 126, 195)'],
 	['color-mix(in srgb-linear, green 40%, color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(182, 126, 195)'],
@@ -34,7 +34,7 @@ const tests = [
 	['color-mix(in xyz-d50, green 40%, color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695))', 'rgb(182, 126, 195)'],
 	['color-mix(in xyz-d50, green 40%, color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222))', 'rgb(182, 126, 195)'],
 	['color-mix(in xyz-d50, green 40%, color(display-p3 0.843565234 0.509345345 0.9342344435))', 'rgb(182, 126, 195)'],
-	['color-mix(in xyz-d50, green 40%, color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224))', 'rgb(182, 126, 195)'],
+	['color-mix(in xyz-d50, green 40%, color(rec2020 0.807076644727751 0.5627572708703388 0.9326528689276063))', 'rgb(182, 126, 195)'],
 	['color-mix(in xyz-d50, green 40%, color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199))', 'rgb(182, 126, 195)'],
 	['color-mix(in xyz-d50, green 40%, color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(182, 126, 195)'],
 	['color-mix(in xyz-d50, green 40%, color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(182, 126, 195)'],
@@ -46,7 +46,7 @@ const tests = [
 	['color-mix(in hsl, green 40%, color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695))', 'rgb(28, 88, 245)'],
 	['color-mix(in hsl, green 40%, color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222))', 'rgb(28, 88, 245)'],
 	['color-mix(in hsl, green 40%, color(display-p3 0.843565234 0.509345345 0.9342344435))', 'rgb(28, 88, 245)'],
-	['color-mix(in hsl, green 40%, color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224))', 'rgb(28, 88, 245)'],
+	['color-mix(in hsl, green 40%, color(rec2020 0.807076644727751 0.5627572708703388 0.9326528689276063))', 'rgb(28, 88, 245)'],
 	['color-mix(in hsl, green 40%, color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199))', 'rgb(28, 88, 245)'],
 	['color-mix(in hsl, green 40%, color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(28, 88, 245)'],
 	['color-mix(in hsl, green 40%, color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(28, 88, 245)'],
@@ -58,7 +58,7 @@ const tests = [
 	['color-mix(in oklch, green 40%, color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695))', 'rgb(0, 148, 253)'],
 	['color-mix(in oklch, green 40%, color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222))', 'rgb(0, 148, 253)'],
 	['color-mix(in oklch, green 40%, color(display-p3 0.843565234 0.509345345 0.9342344435))', 'rgb(0, 148, 253)'],
-	['color-mix(in oklch, green 40%, color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224))', 'rgb(0, 148, 253)'],
+	['color-mix(in oklch, green 40%, color(rec2020 0.807076644727751 0.5627572708703388 0.9326528689276063))', 'rgb(0, 148, 253)'],
 	['color-mix(in oklch, green 40%, color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199))', 'rgb(0, 148, 253)'],
 	['color-mix(in oklch, green 40%, color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(0, 148, 253)'],
 	['color-mix(in oklch, green 40%, color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(0, 148, 253)'],

plugins/postcss-color-function/test/basic.css

@@ -193,7 +193,7 @@
 	color-3: color(a98-rgb 0.265 0.5134 0.5344);
 	color-4: color(prophoto-rgb 0.28284813138491105 0.41695332740189284 0.4586239337463392);
 	color-5: color(display-p3 0.18049383596973329 0.5091259470889726 0.5339002129941044);
-	color-6: color(rec2020 0.24657637908526203 0.44994210472189566 0.486194553499425);
+	color-6: color(rec2020 0.3584374937329418 0.5234107856368522 0.548844528912945);
 	color-7: color(xyz-d50 0.11786343156307554 0.1771045882551784 0.2028294891298204);
 	color-8: color(xyz-d65 0.12135537506539545 0.1797988884168019 0.2676568254682071);
 	color-9: color(xyz 0.12135537506539545 0.1797988884168019 0.2676568254682071);
@@ -205,7 +205,7 @@
 	color-3: color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695);
 	color-4: color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222);
 	color-5: color(display-p3 0.843565234 0.509345345 0.9342344435);
-	color-6: color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224);
+	color-6: color(rec2020 0.8075367152908116 0.5641142016050468 0.9339114003184052);
 	color-7: color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199);
 	color-8: color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693);
 	color-9: color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693);

plugins/postcss-color-function/test/basic.expect.css

@@ -181,7 +181,7 @@
 	color-3: rgb(1, 255, 0);
 	color-4: rgb(1, 255, 0);
 	color-5: rgb(1, 255, 0);
-	color-6: rgb(1, 255, 0);
+	color-6: rgb(0, 248, 51);
 	color-7: rgb(1, 255, 0);
 	color-8: rgb(1, 255, 0);
 	color-9: rgb(1, 255, 0);

plugins/postcss-color-function/test/basic.preserve-true.expect.css

@@ -261,7 +261,7 @@
 	color-4: color(prophoto-rgb 0.5402796954751572 0.9275945561561767 0.30435477084804174);
 	color-5: rgb(1, 255, 0);
 	color-5: color(display-p3 0.45844420720487417 0.9852652233445233 0.29798036139719497);
-	color-6: rgb(1, 255, 0);
+	color-6: rgb(0, 248, 51);
 	color-6: color(rec2020 0.5675603321833232 0.9592792129938423 0.2686829491074993);
 	color-7: rgb(1, 255, 0);
 	color-7: color(xyz-d50 0.3851458288094242 0.7168862873215868 0.09696013568183873);
@@ -283,7 +283,7 @@
 	color-5: rgb(0, 131, 135);
 	color-5: color(display-p3 0.18049383596973329 0.5091259470889726 0.5339002129941044);
 	color-6: rgb(0, 131, 135);
-	color-6: color(rec2020 0.24657637908526203 0.44994210472189566 0.486194553499425);
+	color-6: color(rec2020 0.3584374937329418 0.5234107856368522 0.548844528912945);
 	color-7: rgb(0, 131, 135);
 	color-7: color(xyz-d50 0.11786343156307554 0.1771045882551784 0.2028294891298204);
 	color-8: rgb(0, 131, 135);
@@ -304,7 +304,7 @@
 	color-5: rgb(229, 125, 245);
 	color-5: color(display-p3 0.843565234 0.509345345 0.9342344435);
 	color-6: rgb(229, 125, 245);
-	color-6: color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224);
+	color-6: color(rec2020 0.8075367152908116 0.5641142016050468 0.9339114003184052);
 	color-7: rgb(229, 125, 245);
 	color-7: color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199);
 	color-8: rgb(229, 125, 245);

plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css

@@ -261,7 +261,7 @@
 	color-4: color(prophoto-rgb 0.5402796954751572 0.9275945561561767 0.30435477084804174);
 	color-5: rgb(1, 255, 0);
 	color-5: color(display-p3 0.45844420720487417 0.9852652233445233 0.29798036139719497);
-	color-6: rgb(1, 255, 0);
+	color-6: rgb(0, 248, 51);
 	color-6: color(rec2020 0.5675603321833232 0.9592792129938423 0.2686829491074993);
 	color-7: rgb(1, 255, 0);
 	color-7: color(xyz-d50 0.3851458288094242 0.7168862873215868 0.09696013568183873);
@@ -283,7 +283,7 @@
 	color-5: rgb(0, 131, 135);
 	color-5: color(display-p3 0.18049383596973329 0.5091259470889726 0.5339002129941044);
 	color-6: rgb(0, 131, 135);
-	color-6: color(rec2020 0.24657637908526203 0.44994210472189566 0.486194553499425);
+	color-6: color(rec2020 0.3584374937329418 0.5234107856368522 0.548844528912945);
 	color-7: rgb(0, 131, 135);
 	color-7: color(xyz-d50 0.11786343156307554 0.1771045882551784 0.2028294891298204);
 	color-8: rgb(0, 131, 135);
@@ -304,7 +304,7 @@
 	color-5: rgb(229, 125, 245);
 	color-5: color(display-p3 0.843565234 0.509345345 0.9342344435);
 	color-6: rgb(229, 125, 245);
-	color-6: color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224);
+	color-6: color(rec2020 0.8075367152908116 0.5641142016050468 0.9339114003184052);
 	color-7: rgb(229, 125, 245);
 	color-7: color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199);
 	color-8: rgb(229, 125, 245);