Merge pull request #5 from jamesnw/css-rec2020

Add CSS Rec2020 variant
color-js · Jun 13, 2024 · 13d65cb · 13d65cb
2 parents 604fed7 + 28accb4
commit 13d65cb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/gamut-mapping/gradients.js b/gamut-mapping/gradients.js
@@ -12,7 +12,7 @@ let app = createApp({
 		const urlToColor = params.get("to");
 		const from =  urlFromColor || "oklch(90% .4 250)";
 		const to = urlToColor || "oklch(40% .1 20)";
-		const methods = ["none", "clip", "scale-lh", "css", "raytrace", "edge-seeker", "chromium"];
+		const methods = ["none", "clip", "scale-lh", "css", "css-rec2020", "raytrace", "edge-seeker", "chromium"];
 		const runResults = {};
 		methods.forEach(method => runResults[method] = []);
 		return {

diff --git a/gamut-mapping/methods.js b/gamut-mapping/methods.js
@@ -19,6 +19,16 @@ const methods = {
 		label: "CSS",
 		description: "CSS Color 4 gamut mapping method.",
 	},
+	"css-rec2020": {
+		label: "CSS Rec2020",
+		description: "CSS Color 4 gamut mapping to rec2020, then Naïve clipping to the P3 gamut.",
+		compute: (color) => {
+			return color
+				.clone()
+				.toGamut({ space: "rec2020", method: "css" })
+				.toGamut({ space: "p3", method: "clip" });
+		},
+	},
 	"scale-lh": {
 		label: "Scale LH",
 		description: "Runs Scale, sets L, H to those of the original color, then runs Scale again.",