diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 35002e5..479cdb4 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,21 @@
+2021-11-27  Sam Weinig  <weinig@apple.com>
+
+        [CSS Color 4] Add support for oklab() and oklch() colors
+        https://bugs.webkit.org/show_bug.cgi?id=233507
+
+        Reviewed by Cameron McCormack.
+
+        Update existing tests for lab() and lch() to also test oklab() and oklch().
+        As they have the same parsing rules, this is mostly done by templatizing
+        the tests and running them in a loop.
+
+        * fast/css/parsing-color-mix-expected.txt:
+        * fast/css/parsing-color-mix.html:
+        * fast/css/parsing-lab-colors-expected.txt:
+        * fast/css/parsing-lab-colors.html:
+        * fast/css/parsing-relative-color-syntax-expected.txt:
+        * fast/css/parsing-relative-color-syntax.html:
+
 2021-11-26  Tim Nguyen  <ntim@apple.com>
 
         Remove focus-after-close-expected.txt for glib as it is identical as the cross-platform file
diff --git a/LayoutTests/fast/css/parsing-color-mix-expected.txt b/LayoutTests/fast/css/parsing-color-mix-expected.txt
index c923bbd..d3714cd 100644
--- a/LayoutTests/fast/css/parsing-color-mix-expected.txt
+++ b/LayoutTests/fast/css/parsing-color-mix-expected.txt
@@ -39,6 +39,18 @@
 PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) 0%, lch(50% 60 70deg / .8))") is "lch(50% 60 70 / 0.8)"
 PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) -10%, lch(50% 60 70deg / .8))") is "lch(54% 64 74 / 0.84000003)"
 
+color-mix(in oklch, ...)
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4), oklch(50% 60 70deg / .8))") is "oklch(30% 40 50 / 0.6)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 25%, oklch(50% 60 70deg / .8))") is "oklch(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklch, 25% oklch(10% 20 30deg / .4), oklch(50% 60 70deg / .8))") is "oklch(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4), 25% oklch(50% 60 70deg / .8))") is "oklch(20% 30 40 / 0.5)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4), oklch(50% 60 70deg / .8) 25%)") is "oklch(20% 30 40 / 0.5)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 25%, oklch(50% 60 70deg / .8) 75%)") is "oklch(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 50%, oklch(50% 60 70deg / .8) 150%)") is "oklch(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 12.5%, oklch(50% 60 70deg / .8) 37.5%)") is "oklch(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 0%, oklch(50% 60 70deg / .8))") is "oklch(50% 60 70 / 0.8)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) -10%, oklch(50% 60 70deg / .8))") is "oklch(54% 64 74 / 0.84000003)"
+
 color-mix(in lab, ...)
 PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4), lab(50% 60 70 / .8))") is "lab(30% 40 50 / 0.6)"
 PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 25%, lab(50% 60 70 / .8))") is "lab(40% 50 60 / 0.7)"
@@ -51,12 +63,24 @@
 PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 0%, lab(50% 60 70 / .8))") is "lab(50% 60 70 / 0.8)"
 PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) -10%, lab(50% 60 70 / .8))") is "lab(54% 64 74 / 0.84000003)"
 
+color-mix(in oklab, ...)
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4), oklab(50% 60 70 / .8))") is "oklab(30% 40 50 / 0.6)"
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 25%, oklab(50% 60 70 / .8))") is "oklab(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklab, 25% oklab(10% 20 30 / .4), oklab(50% 60 70 / .8))") is "oklab(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4), 25% oklab(50% 60 70 / .8))") is "oklab(20% 30 40 / 0.5)"
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4), oklab(50% 60 70 / .8) 25%)") is "oklab(20% 30 40 / 0.5)"
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 25%, oklab(50% 60 70 / .8) 75%)") is "oklab(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 50%, oklab(50% 60 70 / .8) 150%)") is "oklab(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 12.5%, oklab(50% 60 70 / .8) 37.5%)") is "oklab(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 0%, oklab(50% 60 70 / .8))") is "oklab(50% 60 70 / 0.8)"
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) -10%, oklab(50% 60 70 / .8))") is "oklab(54% 64 74 / 0.84000003)"
+
 color-mix(in srgb, ...)
 PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4), color(srgb .5 .6 .7 / .8))") is "color(srgb 0.3 0.4 0.5 / 0.6)"
 PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 25%, color(srgb .5 .6 .7 / .8))") is "color(srgb 0.4 0.5 0.6 / 0.7)"
 PASS computedStyle("background-color", "color-mix(in srgb, 25% color(srgb .1 .2 .3 / .4), color(srgb .5 .6 .7 / .8))") is "color(srgb 0.4 0.5 0.6 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4), 25% color(srgb .5 .6 .7 / .8))") is "color(srgb 0.2 0.3 0.4 / 0.5)"
 PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4), color(srgb .5 .6 .7 / .8) 25%)") is "color(srgb 0.2 0.3 0.4 / 0.5)"
+PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4), 25% color(srgb .5 .6 .7 / .8))") is "color(srgb 0.2 0.3 0.4 / 0.5)"
 PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 25%, color(srgb .5 .6 .7 / .8) 75%)") is "color(srgb 0.4 0.5 0.6 / 0.7)"
 PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 50%, color(srgb .5 .6 .7 / .8) 150%)") is "color(srgb 0.4 0.5 0.6 / 0.7)"
 PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 12.5%, color(srgb .5 .6 .7 / .8) 37.5%)") is "color(srgb 0.4 0.5 0.6 / 0.7)"
diff --git a/LayoutTests/fast/css/parsing-color-mix.html b/LayoutTests/fast/css/parsing-color-mix.html
index 5517633..6e54757 100644
--- a/LayoutTests/fast/css/parsing-color-mix.html
+++ b/LayoutTests/fast/css/parsing-color-mix.html
@@ -58,57 +58,43 @@
     // What should happen if you provide a negative percent? https://github.com/w3c/csswg-drafts/issues/6047
     testComputed(`color-mix(in hwb, hwb(120deg 10% 20%) -10%, hwb(30deg 30% 40%))`, `rgb(148, 105, 82)`);
     
+    for (const colorSpace of [ "lch", "oklch" ]) {
+        debug('');
+        debug(`color-mix(in ${colorSpace}, ...)`);
 
-    debug('');
-    debug('color-mix(in lch, ...)');
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4), ${colorSpace}(50% 60 70deg / .8))`, `${colorSpace}(30% 40 50 / 0.6)`);
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 25%, ${colorSpace}(50% 60 70deg / .8))`, `${colorSpace}(40% 50 60 / 0.7)`);
+        testComputed(`color-mix(in ${colorSpace}, 25% ${colorSpace}(10% 20 30deg / .4), ${colorSpace}(50% 60 70deg / .8))`, `${colorSpace}(40% 50 60 / 0.7)`);
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4), 25% ${colorSpace}(50% 60 70deg / .8))`, `${colorSpace}(20% 30 40 / 0.5)`);
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4), ${colorSpace}(50% 60 70deg / .8) 25%)`, `${colorSpace}(20% 30 40 / 0.5)`);
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 25%, ${colorSpace}(50% 60 70deg / .8) 75%)`, `${colorSpace}(40% 50 60 / 0.7)`);
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 50%, ${colorSpace}(50% 60 70deg / .8) 150%)`, `${colorSpace}(40% 50 60 / 0.7)`); // Scale down > 100% sum.
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 12.5%, ${colorSpace}(50% 60 70deg / .8) 37.5%)`, `${colorSpace}(40% 50 60 / 0.7)`); // Scale up < 100% sum.
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 0%, ${colorSpace}(50% 60 70deg / .8))`, `${colorSpace}(50% 60 70 / 0.8)`);
 
-    testComputed(`color-mix(in lch, lch(10% 20 30deg / .4), lch(50% 60 70deg / .8))`, `lch(30% 40 50 / 0.6)`);
-    testComputed(`color-mix(in lch, lch(10% 20 30deg / .4) 25%, lch(50% 60 70deg / .8))`, `lch(40% 50 60 / 0.7)`);
-    testComputed(`color-mix(in lch, 25% lch(10% 20 30deg / .4), lch(50% 60 70deg / .8))`, `lch(40% 50 60 / 0.7)`);
-    testComputed(`color-mix(in lch, lch(10% 20 30deg / .4), 25% lch(50% 60 70deg / .8))`, `lch(20% 30 40 / 0.5)`);
-    testComputed(`color-mix(in lch, lch(10% 20 30deg / .4), lch(50% 60 70deg / .8) 25%)`, `lch(20% 30 40 / 0.5)`);
-    testComputed(`color-mix(in lch, lch(10% 20 30deg / .4) 25%, lch(50% 60 70deg / .8) 75%)`, `lch(40% 50 60 / 0.7)`);
-    testComputed(`color-mix(in lch, lch(10% 20 30deg / .4) 50%, lch(50% 60 70deg / .8) 150%)`, `lch(40% 50 60 / 0.7)`); // Scale down > 100% sum.
-    testComputed(`color-mix(in lch, lch(10% 20 30deg / .4) 12.5%, lch(50% 60 70deg / .8) 37.5%)`, `lch(40% 50 60 / 0.7)`); // Scale up < 100% sum.
-    testComputed(`color-mix(in lch, lch(10% 20 30deg / .4) 0%, lch(50% 60 70deg / .8))`, `lch(50% 60 70 / 0.8)`);
+        // What should happen if you provide a negative percent? https://github.com/w3c/csswg-drafts/issues/6047
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) -10%, ${colorSpace}(50% 60 70deg / .8))`, `${colorSpace}(54% 64 74 / 0.84000003)`);
+    }
 
-    // What should happen if you provide a negative percent? https://github.com/w3c/csswg-drafts/issues/6047
-    testComputed(`color-mix(in lch, lch(10% 20 30deg / .4) -10%, lch(50% 60 70deg / .8))`, `lch(54% 64 74 / 0.84000003)`);
+    for (const colorSpace of [ "lab", "oklab" ]) {
+        debug('');
+        debug(`color-mix(in ${colorSpace}, ...)`);
 
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4), ${colorSpace}(50% 60 70 / .8))`, `${colorSpace}(30% 40 50 / 0.6)`);
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 25%, ${colorSpace}(50% 60 70 / .8))`, `${colorSpace}(40% 50 60 / 0.7)`);
+        testComputed(`color-mix(in ${colorSpace}, 25% ${colorSpace}(10% 20 30 / .4), ${colorSpace}(50% 60 70 / .8))`, `${colorSpace}(40% 50 60 / 0.7)`);
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4), 25% ${colorSpace}(50% 60 70 / .8))`, `${colorSpace}(20% 30 40 / 0.5)`);
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4), ${colorSpace}(50% 60 70 / .8) 25%)`, `${colorSpace}(20% 30 40 / 0.5)`);
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 25%, ${colorSpace}(50% 60 70 / .8) 75%)`, `${colorSpace}(40% 50 60 / 0.7)`);
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 50%, ${colorSpace}(50% 60 70 / .8) 150%)`, `${colorSpace}(40% 50 60 / 0.7)`); // Scale down > 100% sum.
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 12.5%, ${colorSpace}(50% 60 70 / .8) 37.5%)`, `${colorSpace}(40% 50 60 / 0.7)`); // Scale up < 100% sum.
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 0%, ${colorSpace}(50% 60 70 / .8))`, `${colorSpace}(50% 60 70 / 0.8)`);
 
-    debug('');
-    debug('color-mix(in lab, ...)');
-
-    testComputed(`color-mix(in lab, lab(10% 20 30 / .4), lab(50% 60 70 / .8))`, `lab(30% 40 50 / 0.6)`);
-    testComputed(`color-mix(in lab, lab(10% 20 30 / .4) 25%, lab(50% 60 70 / .8))`, `lab(40% 50 60 / 0.7)`);
-    testComputed(`color-mix(in lab, 25% lab(10% 20 30 / .4), lab(50% 60 70 / .8))`, `lab(40% 50 60 / 0.7)`);
-    testComputed(`color-mix(in lab, lab(10% 20 30 / .4), 25% lab(50% 60 70 / .8))`, `lab(20% 30 40 / 0.5)`);
-    testComputed(`color-mix(in lab, lab(10% 20 30 / .4), lab(50% 60 70 / .8) 25%)`, `lab(20% 30 40 / 0.5)`);
-    testComputed(`color-mix(in lab, lab(10% 20 30 / .4) 25%, lab(50% 60 70 / .8) 75%)`, `lab(40% 50 60 / 0.7)`);
-    testComputed(`color-mix(in lab, lab(10% 20 30 / .4) 50%, lab(50% 60 70 / .8) 150%)`, `lab(40% 50 60 / 0.7)`); // Scale down > 100% sum.
-    testComputed(`color-mix(in lab, lab(10% 20 30 / .4) 12.5%, lab(50% 60 70 / .8) 37.5%)`, `lab(40% 50 60 / 0.7)`); // Scale up < 100% sum.
-    testComputed(`color-mix(in lab, lab(10% 20 30 / .4) 0%, lab(50% 60 70 / .8))`, `lab(50% 60 70 / 0.8)`);
-
-    // What should happen if you provide a negative percent? https://github.com/w3c/csswg-drafts/issues/6047
-    testComputed(`color-mix(in lab, lab(10% 20 30 / .4) -10%, lab(50% 60 70 / .8))`, `lab(54% 64 74 / 0.84000003)`);
+        // What should happen if you provide a negative percent? https://github.com/w3c/csswg-drafts/issues/6047
+        testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) -10%, ${colorSpace}(50% 60 70 / .8))`, `${colorSpace}(54% 64 74 / 0.84000003)`);
+    }
  
-    debug('');
-    debug('color-mix(in srgb, ...)');
-
-    testComputed(`color-mix(in srgb, color(srgb .1 .2 .3 / .4), color(srgb .5 .6 .7 / .8))`, `color(srgb 0.3 0.4 0.5 / 0.6)`);
-    testComputed(`color-mix(in srgb, color(srgb .1 .2 .3 / .4) 25%, color(srgb .5 .6 .7 / .8))`, `color(srgb 0.4 0.5 0.6 / 0.7)`);
-    testComputed(`color-mix(in srgb, 25% color(srgb .1 .2 .3 / .4), color(srgb .5 .6 .7 / .8))`, `color(srgb 0.4 0.5 0.6 / 0.7)`);
-    testComputed(`color-mix(in srgb, color(srgb .1 .2 .3 / .4), 25% color(srgb .5 .6 .7 / .8))`, `color(srgb 0.2 0.3 0.4 / 0.5)`);
-    testComputed(`color-mix(in srgb, color(srgb .1 .2 .3 / .4), color(srgb .5 .6 .7 / .8) 25%)`, `color(srgb 0.2 0.3 0.4 / 0.5)`);
-    testComputed(`color-mix(in srgb, color(srgb .1 .2 .3 / .4) 25%, color(srgb .5 .6 .7 / .8) 75%)`, `color(srgb 0.4 0.5 0.6 / 0.7)`);
-    testComputed(`color-mix(in srgb, color(srgb .1 .2 .3 / .4) 50%, color(srgb .5 .6 .7 / .8) 150%)`, `color(srgb 0.4 0.5 0.6 / 0.7)`); // Scale down > 100% sum.
-    testComputed(`color-mix(in srgb, color(srgb .1 .2 .3 / .4) 12.5%, color(srgb .5 .6 .7 / .8) 37.5%)`, `color(srgb 0.4 0.5 0.6 / 0.7)`); // Scale up < 100% sum.
-    testComputed(`color-mix(in srgb, color(srgb .1 .2 .3 / .4) 0%, color(srgb .5 .6 .7 / .8))`, `color(srgb 0.5 0.6 0.7 / 0.8)`);
-
-    // What should happen if you provide a negative percent? https://github.com/w3c/csswg-drafts/issues/6047
-    testComputed(`color-mix(in srgb, color(srgb .1 .2 .3 / .4) -10%, color(srgb .5 .6 .7 / .8))`, `color(srgb 0.54 0.64000005 0.74 / 0.84000003)`);
-
-    for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) {
+    for (const colorSpace of [ "srgb", "xyz", "xyz-d50", "xyz-d65" ]) {
         debug('');
         debug(`color-mix(in ${colorSpace}, ...)`);
   
diff --git a/LayoutTests/fast/css/parsing-lab-colors-expected.txt b/LayoutTests/fast/css/parsing-lab-colors-expected.txt
index e33d550..b2f8965 100644
--- a/LayoutTests/fast/css/parsing-lab-colors-expected.txt
+++ b/LayoutTests/fast/css/parsing-lab-colors-expected.txt
@@ -1,9 +1,10 @@
-Test the parsing of lab(...) and lch(...) colors.
+Test the parsing of lab(...), lch(...), oklab(...) and oklch(...) colors.
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-lab()
+
+lab(...)
 PASS computedStyle("background-color", "lab(0% 0 0)") is "lab(0% 0 0)"
 PASS computedStyle("background-color", "lab(0% 0 0 / 1)") is "lab(0% 0 0)"
 PASS computedStyle("background-color", "lab(0% 0 0 / 0.5)") is "lab(0% 0 0 / 0.5)"
@@ -19,7 +20,43 @@
 PASS computedStyle("background-color", "lab(50% -20 0)") is "lab(50% -20 0)"
 PASS computedStyle("background-color", "lab(50% 0 -20)") is "lab(50% 0 -20)"
 
-lch()
+Test invalid values
+PASS computedStyle("background-color", "lab(0 0 0)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "lab(0% 0% 0)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "lab(0% 0 0 1)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "lab(0% 0 0 10%)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "lab(0% 0 0deg)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "lab(0% 0% 0deg)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "lab(40% 0 0deg)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color(lab 20% 0 10 / 50%)") is "rgba(0, 0, 0, 0)"
+
+oklab(...)
+PASS computedStyle("background-color", "oklab(0% 0 0)") is "oklab(0% 0 0)"
+PASS computedStyle("background-color", "oklab(0% 0 0 / 1)") is "oklab(0% 0 0)"
+PASS computedStyle("background-color", "oklab(0% 0 0 / 0.5)") is "oklab(0% 0 0 / 0.5)"
+PASS computedStyle("background-color", "oklab(20% 0 10/0.5)") is "oklab(20% 0 10 / 0.5)"
+PASS computedStyle("background-color", "oklab(20% 0 10/50%)") is "oklab(20% 0 10 / 0.5)"
+PASS computedStyle("background-color", "oklab(400% 0 10/50%)") is "oklab(400% 0 10 / 0.5)"
+PASS computedStyle("background-color", "oklab(50% -160 160)") is "oklab(50% -160 160)"
+PASS computedStyle("background-color", "oklab(50% -200 200)") is "oklab(50% -200 200)"
+PASS computedStyle("background-color", "oklab(0% 0 0 / -10%)") is "oklab(0% 0 0 / 0)"
+PASS computedStyle("background-color", "oklab(0% 0 0 / 110%)") is "oklab(0% 0 0)"
+PASS computedStyle("background-color", "oklab(0% 0 0 / 300%)") is "oklab(0% 0 0)"
+PASS computedStyle("background-color", "oklab(-40% 0 0)") is "oklab(0% 0 0)"
+PASS computedStyle("background-color", "oklab(50% -20 0)") is "oklab(50% -20 0)"
+PASS computedStyle("background-color", "oklab(50% 0 -20)") is "oklab(50% 0 -20)"
+
+Test invalid values
+PASS computedStyle("background-color", "oklab(0 0 0)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(0% 0% 0)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(0% 0 0 1)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(0% 0 0 10%)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(0% 0 0deg)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(0% 0% 0deg)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(40% 0 0deg)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color(oklab 20% 0 10 / 50%)") is "rgba(0, 0, 0, 0)"
+
+lch(...)
 PASS computedStyle("background-color", "lch(0% 0 0deg)") is "lch(0% 0 0)"
 PASS computedStyle("background-color", "lch(0% 0 0deg / 1)") is "lch(0% 0 0)"
 PASS computedStyle("background-color", "lch(0% 0 0deg / 0.5)") is "lch(0% 0 0 / 0.5)"
@@ -40,17 +77,36 @@
 PASS computedStyle("background-color", "lch(10% 20 -700)") is "lch(10% 20 20)"
 
 Test invalid values
-PASS computedStyle("background-color", "lab(0 0 0)") is "rgba(0, 0, 0, 0)"
-PASS computedStyle("background-color", "lab(0% 0% 0)") is "rgba(0, 0, 0, 0)"
-PASS computedStyle("background-color", "lab(0% 0 0 1)") is "rgba(0, 0, 0, 0)"
-PASS computedStyle("background-color", "lab(0% 0 0 10%)") is "rgba(0, 0, 0, 0)"
-PASS computedStyle("background-color", "lab(0% 0 0deg)") is "rgba(0, 0, 0, 0)"
-PASS computedStyle("background-color", "lab(0% 0% 0deg)") is "rgba(0, 0, 0, 0)"
-PASS computedStyle("background-color", "lab(40% 0 0deg)") is "rgba(0, 0, 0, 0)"
 PASS computedStyle("background-color", "lch(0 0 0 / 0.5)") is "rgba(0, 0, 0, 0)"
 PASS computedStyle("background-color", "lch(20% 10 10deg 10)") is "rgba(0, 0, 0, 0)"
 PASS computedStyle("background-color", "lch(20% 10 10deg 10 / 0.5)") is "rgba(0, 0, 0, 0)"
-PASS computedStyle("background-color", "color(lab 20% 0 10 / 50%)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color(lch 20% 0 10 / 50%)") is "rgba(0, 0, 0, 0)"
+
+oklch(...)
+PASS computedStyle("background-color", "oklch(0% 0 0deg)") is "oklch(0% 0 0)"
+PASS computedStyle("background-color", "oklch(0% 0 0deg / 1)") is "oklch(0% 0 0)"
+PASS computedStyle("background-color", "oklch(0% 0 0deg / 0.5)") is "oklch(0% 0 0 / 0.5)"
+PASS computedStyle("background-color", "oklch(100% 230 0deg / 0.5)") is "oklch(100% 230 0 / 0.5)"
+PASS computedStyle("background-color", "oklch(20% 50 20deg/0.5)") is "oklch(20% 50 20 / 0.5)"
+PASS computedStyle("background-color", "oklch(20% 50 20deg/50%)") is "oklch(20% 50 20 / 0.5)"
+PASS computedStyle("background-color", "oklch(10% 20 20deg / -10%)") is "oklch(10% 20 20 / 0)"
+PASS computedStyle("background-color", "oklch(10% 20 20deg / 110%)") is "oklch(10% 20 20)"
+PASS computedStyle("background-color", "oklch(10% 20 1.28rad)") is "oklch(10% 20 73.3386)"
+PASS computedStyle("background-color", "oklch(10% 20 380deg)") is "oklch(10% 20 20)"
+PASS computedStyle("background-color", "oklch(10% 20 -340deg)") is "oklch(10% 20 20)"
+PASS computedStyle("background-color", "oklch(10% 20 740deg)") is "oklch(10% 20 20)"
+PASS computedStyle("background-color", "oklch(10% 20 -700deg)") is "oklch(10% 20 20)"
+PASS computedStyle("background-color", "oklch(-40% 0 0)") is "oklch(0% 0 0)"
+PASS computedStyle("background-color", "oklch(20% -20 0)") is "oklch(20% 0 0)"
+PASS computedStyle("background-color", "oklch(0% 0 0 / 0.5)") is "oklch(0% 0 0 / 0.5)"
+PASS computedStyle("background-color", "oklch(10% 20 20 / 110%)") is "oklch(10% 20 20)"
+PASS computedStyle("background-color", "oklch(10% 20 -700)") is "oklch(10% 20 20)"
+
+Test invalid values
+PASS computedStyle("background-color", "oklch(0 0 0 / 0.5)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(20% 10 10deg 10)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(20% 10 10deg 10 / 0.5)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color(oklch 20% 0 10 / 50%)") is "rgba(0, 0, 0, 0)"
 PASS successfullyParsed is true
 
 TEST COMPLETE
diff --git a/LayoutTests/fast/css/parsing-lab-colors.html b/LayoutTests/fast/css/parsing-lab-colors.html
index 0eb27a2..ba87625 100644
--- a/LayoutTests/fast/css/parsing-lab-colors.html
+++ b/LayoutTests/fast/css/parsing-lab-colors.html
@@ -3,7 +3,7 @@
 </head>
 <body>
 <script>
-    description("Test the parsing of lab(...) and lch(...) colors.");
+    description("Test the parsing of lab(...), lch(...), oklab(...) and oklch(...) colors.");
 
     function computedStyle(property, value)
     {
@@ -34,59 +34,67 @@
         shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
     }
 
-    debug('lab()');
-    testComputed("background-color", "lab(0% 0 0)", "lab(0% 0 0)");
-    testComputed("background-color", "lab(0% 0 0 / 1)", "lab(0% 0 0)");
-    testComputed("background-color", "lab(0% 0 0 / 0.5)", "lab(0% 0 0 / 0.5)");
-    testComputed("background-color", "lab(20% 0 10/0.5)", "lab(20% 0 10 / 0.5)");
-    testComputed("background-color", "lab(20% 0 10/50%)", "lab(20% 0 10 / 0.5)");
-    testComputed("background-color", "lab(400% 0 10/50%)", "lab(400% 0 10 / 0.5)");
-    testComputed("background-color", "lab(50% -160 160)", "lab(50% -160 160)");
-    testComputed("background-color", "lab(50% -200 200)", "lab(50% -200 200)");
-    testComputed("background-color", "lab(0% 0 0 / -10%)", "lab(0% 0 0 / 0)");
-    testComputed("background-color", "lab(0% 0 0 / 110%)", "lab(0% 0 0)");
-    testComputed("background-color", "lab(0% 0 0 / 300%)", "lab(0% 0 0)");
-    testComputed("background-color", "lab(-40% 0 0)", "lab(0% 0 0)");
-    testComputed("background-color", "lab(50% -20 0)", "lab(50% -20 0)");
-    testComputed("background-color", "lab(50% 0 -20)", "lab(50% 0 -20)");
+    for (const colorSpace of [ "lab", "oklab" ]) {
+        debug('');
+        debug(`${colorSpace}(...)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0 0)`, `${colorSpace}(0% 0 0)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0 0 / 1)`, `${colorSpace}(0% 0 0)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0 0 / 0.5)`, `${colorSpace}(0% 0 0 / 0.5)`);
+        testComputed(`background-color`, `${colorSpace}(20% 0 10/0.5)`, `${colorSpace}(20% 0 10 / 0.5)`);
+        testComputed(`background-color`, `${colorSpace}(20% 0 10/50%)`, `${colorSpace}(20% 0 10 / 0.5)`);
+        testComputed(`background-color`, `${colorSpace}(400% 0 10/50%)`, `${colorSpace}(400% 0 10 / 0.5)`);
+        testComputed(`background-color`, `${colorSpace}(50% -160 160)`, `${colorSpace}(50% -160 160)`);
+        testComputed(`background-color`, `${colorSpace}(50% -200 200)`, `${colorSpace}(50% -200 200)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0 0 / -10%)`, `${colorSpace}(0% 0 0 / 0)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0 0 / 110%)`, `${colorSpace}(0% 0 0)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0 0 / 300%)`, `${colorSpace}(0% 0 0)`);
+        testComputed(`background-color`, `${colorSpace}(-40% 0 0)`, `${colorSpace}(0% 0 0)`);
+        testComputed(`background-color`, `${colorSpace}(50% -20 0)`, `${colorSpace}(50% -20 0)`);
+        testComputed(`background-color`, `${colorSpace}(50% 0 -20)`, `${colorSpace}(50% 0 -20)`);
 
-    debug('');
-    debug('lch()');
-    testComputed("background-color", "lch(0% 0 0deg)", "lch(0% 0 0)");
-    testComputed("background-color", "lch(0% 0 0deg / 1)", "lch(0% 0 0)");
-    testComputed("background-color", "lch(0% 0 0deg / 0.5)", "lch(0% 0 0 / 0.5)");
-    testComputed("background-color", "lch(100% 230 0deg / 0.5)", "lch(100% 230 0 / 0.5)");
-    testComputed("background-color", "lch(20% 50 20deg/0.5)", "lch(20% 50 20 / 0.5)");
-    testComputed("background-color", "lch(20% 50 20deg/50%)", "lch(20% 50 20 / 0.5)");
-    testComputed("background-color", "lch(10% 20 20deg / -10%)", "lch(10% 20 20 / 0)");
-    testComputed("background-color", "lch(10% 20 20deg / 110%)", "lch(10% 20 20)");
-    testComputed("background-color", "lch(10% 20 1.28rad)", "lch(10% 20 73.3386)");
-    testComputed("background-color", "lch(10% 20 380deg)", "lch(10% 20 20)");
-    testComputed("background-color", "lch(10% 20 -340deg)", "lch(10% 20 20)");
-    testComputed("background-color", "lch(10% 20 740deg)", "lch(10% 20 20)");
-    testComputed("background-color", "lch(10% 20 -700deg)", "lch(10% 20 20)");
-    testComputed("background-color", "lch(-40% 0 0)", "lch(0% 0 0)");
-    testComputed("background-color", "lch(20% -20 0)", "lch(20% 0 0)");
-    // hue (the third argument) can be either an angle or number, with number interpreted as degrees.
-    testComputed("background-color", "lch(0% 0 0 / 0.5)", "lch(0% 0 0 / 0.5)"); 
-    testComputed("background-color", "lch(10% 20 20 / 110%)", "lch(10% 20 20)");
-    testComputed("background-color", "lch(10% 20 -700)", "lch(10% 20 20)");
+        debug('');
+        debug('Test invalid values');
+        testComputed(`background-color`, `${colorSpace}(0 0 0)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0% 0)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0 0 1)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0 0 10%)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0 0deg)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0% 0deg)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`background-color`, `${colorSpace}(40% 0 0deg)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`background-color`, `color(${colorSpace} 20% 0 10 / 50%)`, `rgba(0, 0, 0, 0)`);
+    }
 
-    debug('');
-    debug('Test invalid values');
-    testComputed("background-color", "lab(0 0 0)", "rgba(0, 0, 0, 0)");
-    testComputed("background-color", "lab(0% 0% 0)", "rgba(0, 0, 0, 0)");
-    testComputed("background-color", "lab(0% 0 0 1)", "rgba(0, 0, 0, 0)");
-    testComputed("background-color", "lab(0% 0 0 10%)", "rgba(0, 0, 0, 0)");
-    testComputed("background-color", "lab(0% 0 0deg)", "rgba(0, 0, 0, 0)");
-    testComputed("background-color", "lab(0% 0% 0deg)", "rgba(0, 0, 0, 0)");
-    testComputed("background-color", "lab(40% 0 0deg)", "rgba(0, 0, 0, 0)");
+    for (const colorSpace of [ "lch", "oklch" ]) {
+        debug('');
+        debug(`${colorSpace}(...)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0 0deg)`, `${colorSpace}(0% 0 0)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0 0deg / 1)`, `${colorSpace}(0% 0 0)`);
+        testComputed(`background-color`, `${colorSpace}(0% 0 0deg / 0.5)`, `${colorSpace}(0% 0 0 / 0.5)`);
+        testComputed(`background-color`, `${colorSpace}(100% 230 0deg / 0.5)`, `${colorSpace}(100% 230 0 / 0.5)`);
+        testComputed(`background-color`, `${colorSpace}(20% 50 20deg/0.5)`, `${colorSpace}(20% 50 20 / 0.5)`);
+        testComputed(`background-color`, `${colorSpace}(20% 50 20deg/50%)`, `${colorSpace}(20% 50 20 / 0.5)`);
+        testComputed(`background-color`, `${colorSpace}(10% 20 20deg / -10%)`, `${colorSpace}(10% 20 20 / 0)`);
+        testComputed(`background-color`, `${colorSpace}(10% 20 20deg / 110%)`, `${colorSpace}(10% 20 20)`);
+        testComputed(`background-color`, `${colorSpace}(10% 20 1.28rad)`, `${colorSpace}(10% 20 73.3386)`);
+        testComputed(`background-color`, `${colorSpace}(10% 20 380deg)`, `${colorSpace}(10% 20 20)`);
+        testComputed(`background-color`, `${colorSpace}(10% 20 -340deg)`, `${colorSpace}(10% 20 20)`);
+        testComputed(`background-color`, `${colorSpace}(10% 20 740deg)`, `${colorSpace}(10% 20 20)`);
+        testComputed(`background-color`, `${colorSpace}(10% 20 -700deg)`, `${colorSpace}(10% 20 20)`);
+        testComputed(`background-color`, `${colorSpace}(-40% 0 0)`, `${colorSpace}(0% 0 0)`);
+        testComputed(`background-color`, `${colorSpace}(20% -20 0)`, `${colorSpace}(20% 0 0)`);
+        // hue (the third argument) can be either an angle or number, with number interpreted as degrees.
+        testComputed(`background-color`, `${colorSpace}(0% 0 0 / 0.5)`, `${colorSpace}(0% 0 0 / 0.5)`); 
+        testComputed(`background-color`, `${colorSpace}(10% 20 20 / 110%)`, `${colorSpace}(10% 20 20)`);
+        testComputed(`background-color`, `${colorSpace}(10% 20 -700)`, `${colorSpace}(10% 20 20)`);
 
-    testComputed("background-color", "lch(0 0 0 / 0.5)", "rgba(0, 0, 0, 0)");
-    testComputed("background-color", "lch(20% 10 10deg 10)", "rgba(0, 0, 0, 0)");
-    testComputed("background-color", "lch(20% 10 10deg 10 / 0.5)", "rgba(0, 0, 0, 0)");
+        debug('');
+        debug('Test invalid values');
 
-    testComputed("background-color", "color(lab 20% 0 10 / 50%)", "rgba(0, 0, 0, 0)");
+        testComputed(`background-color`, `${colorSpace}(0 0 0 / 0.5)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`background-color`, `${colorSpace}(20% 10 10deg 10)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`background-color`, `${colorSpace}(20% 10 10deg 10 / 0.5)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`background-color`, `color(${colorSpace} 20% 0 10 / 50%)`, `rgba(0, 0, 0, 0)`);
+    }
 
 </script>
     
diff --git a/LayoutTests/fast/css/parsing-relative-color-syntax-expected.txt b/LayoutTests/fast/css/parsing-relative-color-syntax-expected.txt
index 75cbf4e..d5752f3 100644
--- a/LayoutTests/fast/css/parsing-relative-color-syntax-expected.txt
+++ b/LayoutTests/fast/css/parsing-relative-color-syntax-expected.txt
@@ -229,6 +229,50 @@
 PASS computedStyle("background-color", "lab(from lab(25% 20 50) x a b)") is "rgba(0, 0, 0, 0)"
 PASS computedStyle("background-color", "lab(from lab(25% 20 50) h g b)") is "rgba(0, 0, 0, 0)"
 
+oklab(from ...)
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l a b)") is "oklab(25% 20 50)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l a b / alpha)") is "oklab(25% 20 50)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l a b / alpha)") is "oklab(25% 20 50 / 0.4)"
+PASS computedStyle("background-color", "oklab(from oklab(from oklab(25% 20 50) l a b) l a b)") is "oklab(25% 20 50)"
+PASS computedStyle("background-color", "oklab(from color(display-p3 0 0 0) l a b / alpha)") is "oklab(0% 0 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) 0% 0 0)") is "oklab(0% 0 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) 0% 0 0 / 0)") is "oklab(0% 0 0 / 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) 0% a b / alpha)") is "oklab(0% 20 50)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l 0 b / alpha)") is "oklab(25% 0 50)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l a 0 / alpha)") is "oklab(25% 20 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l a b / 0)") is "oklab(25% 20 50 / 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) 0% a b / alpha)") is "oklab(0% 20 50 / 0.4)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l 0 b / alpha)") is "oklab(25% 0 50 / 0.4)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l a 0 / alpha)") is "oklab(25% 20 0 / 0.4)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l a b / 0)") is "oklab(25% 20 50 / 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) 35% a b / alpha)") is "oklab(35% 20 50)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l 35 b / alpha)") is "oklab(25% 35 50)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l a 35 / alpha)") is "oklab(25% 20 35)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l a b / .35)") is "oklab(25% 20 50 / 0.35)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) 35% a b / alpha)") is "oklab(35% 20 50 / 0.4)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l 35 b / alpha)") is "oklab(25% 35 50 / 0.4)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l a 35 / alpha)") is "oklab(25% 20 35 / 0.4)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l a b / .35)") is "oklab(25% 20 50 / 0.35)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l b a)") is "oklab(25% 50 20)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l a a / a)") is "oklab(25% 20 20)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l b a)") is "oklab(25% 50 20)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l a a / a)") is "oklab(25% 20 20)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l alpha a / b)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l alpha a / b)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) calc(l) calc(a) calc(b))") is "oklab(25% 20 50)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) calc(l) calc(a) calc(b) / calc(alpha))") is "oklab(25% 20 50 / 0.4)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l 10% 10)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) l 10 10%)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) 10 a b)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l 10% 10)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) l 10 10%)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50 / 40%) 10 a b)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) lightness a b)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) x a b)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklab(from oklab(25% 20 50) h g b)") is "rgba(0, 0, 0, 0)"
+
 lch(from ...)
 PASS computedStyle("background-color", "lch(from lch(70% 45 30) l c h)") is "lch(70% 45 30)"
 PASS computedStyle("background-color", "lch(from lch(70% 45 30) l c h / alpha)") is "lch(70% 45 30)"
@@ -286,7 +330,64 @@
 PASS computedStyle("background-color", "lch(from lch(70% 45 30) x c h)") is "rgba(0, 0, 0, 0)"
 PASS computedStyle("background-color", "lch(from lch(70% 45 30) l g b)") is "rgba(0, 0, 0, 0)"
 
-color(from ... ${color} ...)
+oklch(from ...)
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l c h)") is "oklch(70% 45 30)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l c h / alpha)") is "oklch(70% 45 30)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) l c h/ alpha)") is "oklch(70% 45 30 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(from oklch(70% 45 30) l c h) l c h)") is "oklch(70% 45 30)"
+PASS computedStyle("background-color", "oklch(from color(display-p3 0 0 0) l c h / alpha)") is "oklch(0% 0 0)"
+PASS computedStyle("background-color", "oklch(from oklab(70% 45 30) l c h / alpha)") is "oklch(70% 54.08327 33.690067)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) 0% 0 0)") is "oklch(0% 0 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) 0% 0 0deg)") is "oklch(0% 0 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) 0% 0 0 / 0)") is "oklch(0% 0 0 / 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) 0% 0 0deg / 0)") is "oklch(0% 0 0 / 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) 0% c h / alpha)") is "oklch(0% 45 30)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l 0 h / alpha)") is "oklch(70% 0 30)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l c 0 / alpha)") is "oklch(70% 45 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l c 0deg / alpha)") is "oklch(70% 45 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l c h / 0)") is "oklch(70% 45 30 / 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) 0% c h / alpha)") is "oklch(0% 45 30 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) l 0 h / alpha)") is "oklch(70% 0 30 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) l c 0 / alpha)") is "oklch(70% 45 0 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) l c 0deg / alpha)") is "oklch(70% 45 0 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) l c h / 0)") is "oklch(70% 45 30 / 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) 25% c h / alpha)") is "oklch(25% 45 30)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l 25 h / alpha)") is "oklch(70% 25 30)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l c 25 / alpha)") is "oklch(70% 45 25)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l c 25deg / alpha)") is "oklch(70% 45 25)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l c h / .25)") is "oklch(70% 45 30 / 0.25)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) 25% c h / alpha)") is "oklch(25% 45 30 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) l 25 h / alpha)") is "oklch(70% 25 30 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) l c 25 / alpha)") is "oklch(70% 45 25 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) l c 25deg / alpha)") is "oklch(70% 45 25 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) l c h / .25)") is "oklch(70% 45 30 / 0.25)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) alpha c h / l)") is "oklch(100% 45 30 / 0.7)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l c c / alpha)") is "oklch(70% 45 45)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) alpha c h / alpha)") is "oklch(100% 45 30)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) alpha c c / alpha)") is "oklch(100% 45 45)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) alpha c h / l)") is "oklch(40% 45 30 / 0.7)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) l c c / alpha)") is "oklch(70% 45 45 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) alpha c h / alpha)") is "oklch(40% 45 30 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) alpha c c / alpha)") is "oklch(40% 45 45 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) h l c / alpha)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) c c c / c)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) alpha alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) h l c / alpha)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) c c c / c)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) alpha alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) calc(l) calc(c) calc(h))") is "oklch(70% 45 30)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))") is "oklch(70% 45 30 / 0.4)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l 10% h)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l c 10%)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) 10 c h)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) l 10% h)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) l c 10%)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30 / 40%) 10 c h)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) lightness c h)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) x c h)") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "oklch(from oklch(70% 45 30) l g b)") is "rgba(0, 0, 0, 0)"
+
+color(from ... srgb ...)
 PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r g b)") is "color(srgb 0.7 0.5 0.3)"
 PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r g b / alpha)") is "color(srgb 0.7 0.5 0.3)"
 PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g b)") is "color(srgb 0.7 0.5 0.3)"
@@ -338,7 +439,7 @@
 PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb x g b)") is "rgba(0, 0, 0, 0)"
 PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb l g b)") is "rgba(0, 0, 0, 0)"
 
-color(from ... ${color} ...)
+color(from ... srgb-linear ...)
 PASS computedStyle("background-color", "color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g b)") is "color(srgb-linear 0.7 0.5 0.3)"
 PASS computedStyle("background-color", "color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g b / alpha)") is "color(srgb-linear 0.7 0.5 0.3)"
 PASS computedStyle("background-color", "color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r g b)") is "color(srgb-linear 0.7 0.5 0.3)"
@@ -390,7 +491,7 @@
 PASS computedStyle("background-color", "color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear x g b)") is "rgba(0, 0, 0, 0)"
 PASS computedStyle("background-color", "color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear l g b)") is "rgba(0, 0, 0, 0)"
 
-color(from ... ${color} ...)
+color(from ... a98-rgb ...)
 PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b)") is "color(a98-rgb 0.7 0.5 0.3)"
 PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha)") is "color(a98-rgb 0.7 0.5 0.3)"
 PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g b)") is "color(a98-rgb 0.7 0.5 0.3)"
@@ -442,7 +543,7 @@
 PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb x g b)") is "rgba(0, 0, 0, 0)"
 PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb l g b)") is "rgba(0, 0, 0, 0)"
 
-color(from ... ${color} ...)
+color(from ... rec2020 ...)
 PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b)") is "color(rec2020 0.7 0.5 0.3)"
 PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b / alpha)") is "color(rec2020 0.7 0.5 0.3)"
 PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g b)") is "color(rec2020 0.7 0.5 0.3)"
@@ -494,7 +595,7 @@
 PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 x g b)") is "rgba(0, 0, 0, 0)"
 PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 l g b)") is "rgba(0, 0, 0, 0)"
 
-color(from ... ${color} ...)
+color(from ... prophoto-rgb ...)
 PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b)") is "color(prophoto-rgb 0.7 0.5 0.3)"
 PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b / alpha)") is "color(prophoto-rgb 0.7 0.5 0.3)"
 PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g b)") is "color(prophoto-rgb 0.7 0.5 0.3)"
diff --git a/LayoutTests/fast/css/parsing-relative-color-syntax.html b/LayoutTests/fast/css/parsing-relative-color-syntax.html
index 59bec35..a27699b 100644
--- a/LayoutTests/fast/css/parsing-relative-color-syntax.html
+++ b/LayoutTests/fast/css/parsing-relative-color-syntax.html
@@ -297,290 +297,293 @@
     testComputed(`hwb(from rebeccapurple x w b)`, `rgba(0, 0, 0, 0)`);
     testComputed(`hwb(from rebeccapurple h g b)`, `rgba(0, 0, 0, 0)`);
 
-
-    debug('');
-    debug('lab(from ...)');
-
-    // Testing no modifications.
-    testComputed(`lab(from lab(25% 20 50) l a b)`, `lab(25% 20 50)`);
-    testComputed(`lab(from lab(25% 20 50) l a b / alpha)`, `lab(25% 20 50)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l a b / alpha)`, `lab(25% 20 50 / 0.4)`);
-
-    // Test nesting relative colors.
-    testComputed(`lab(from lab(from lab(25% 20 50) l a b) l a b)`, `lab(25% 20 50)`);
-
-    // Testing non-lab origin to see conversion.
-    testComputed(`lab(from color(display-p3 0 0 0) l a b / alpha)`, `lab(0% 0 0)`);
-
-    // Testing replacement with 0.
-    testComputed(`lab(from lab(25% 20 50) 0% 0 0)`, `lab(0% 0 0)`);
-    testComputed(`lab(from lab(25% 20 50) 0% 0 0 / 0)`, `lab(0% 0 0 / 0)`);
-    testComputed(`lab(from lab(25% 20 50) 0% a b / alpha)`, `lab(0% 20 50)`);
-    testComputed(`lab(from lab(25% 20 50) l 0 b / alpha)`, `lab(25% 0 50)`);
-    testComputed(`lab(from lab(25% 20 50) l a 0 / alpha)`, `lab(25% 20 0)`);
-    testComputed(`lab(from lab(25% 20 50) l a b / 0)`, `lab(25% 20 50 / 0)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) 0% a b / alpha)`, `lab(0% 20 50 / 0.4)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l 0 b / alpha)`, `lab(25% 0 50 / 0.4)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l a 0 / alpha)`, `lab(25% 20 0 / 0.4)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l a b / 0)`, `lab(25% 20 50 / 0)`);
-
-    // Testing replacement with a constant.
-    testComputed(`lab(from lab(25% 20 50) 35% a b / alpha)`, `lab(35% 20 50)`);
-    testComputed(`lab(from lab(25% 20 50) l 35 b / alpha)`, `lab(25% 35 50)`);
-    testComputed(`lab(from lab(25% 20 50) l a 35 / alpha)`, `lab(25% 20 35)`);
-    testComputed(`lab(from lab(25% 20 50) l a b / .35)`, `lab(25% 20 50 / 0.35)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) 35% a b / alpha)`, `lab(35% 20 50 / 0.4)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l 35 b / alpha)`, `lab(25% 35 50 / 0.4)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l a 35 / alpha)`, `lab(25% 20 35 / 0.4)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l a b / .35)`, `lab(25% 20 50 / 0.35)`);
-
-    // Testing valid permutation (types match).
-    testComputed(`lab(from lab(25% 20 50) l b a)`, `lab(25% 50 20)`);
-    testComputed(`lab(from lab(25% 20 50) l a a / a)`, `lab(25% 20 20)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l b a)`, `lab(25% 50 20)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l a a / a)`, `lab(25% 20 20)`);
-
-    // Testing invalid permutation (types don't match).
-    testComputed(`lab(from lab(25% 20 50) l alpha a / b)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lab(from lab(25% 20 50) l alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l alpha a / b)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);
-
-    // Testing with calc().
-    testComputed(`lab(from lab(25% 20 50) calc(l) calc(a) calc(b))`, `lab(25% 20 50)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) calc(l) calc(a) calc(b) / calc(alpha))`, `lab(25% 20 50 / 0.4)`);
-
-    // Testing invalid values.
-    testComputed(`lab(from lab(25% 20 50) l 10% 10)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lab(from lab(25% 20 50) l 10 10%)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lab(from lab(25% 20 50) 10 a b)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l 10% 10)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) l 10 10%)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lab(from lab(25% 20 50 / 40%) 10 a b)`, `rgba(0, 0, 0, 0)`);
-
-    // Testing invalid component names
-    testComputed(`lab(from lab(25% 20 50) lightness a b)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lab(from lab(25% 20 50) x a b)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lab(from lab(25% 20 50) h g b)`, `rgba(0, 0, 0, 0)`);
-
-
-    debug('');
-    debug('lch(from ...)');
-
-    // Testing no modifications.
-    testComputed(`lch(from lch(70% 45 30) l c h)`, `lch(70% 45 30)`);
-    testComputed(`lch(from lch(70% 45 30) l c h / alpha)`, `lch(70% 45 30)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) l c h/ alpha)`, `lch(70% 45 30 / 0.4)`);
-
-    // Test nesting relative colors.
-    testComputed(`lch(from lch(from lch(70% 45 30) l c h) l c h)`, `lch(70% 45 30)`);
-
-    // Testing non-sRGB origin colors to see gamut clipping.
-    testComputed(`lch(from color(display-p3 0 0 0) l c h / alpha)`, `lch(0% 0 0)`);
-    testComputed(`lch(from lab(70% 45 30) l c h / alpha)`, `lch(70% 54.08327 33.690067)`);
-
-    // Testing replacement with 0.
-    testComputed(`lch(from lch(70% 45 30) 0% 0 0)`, `lch(0% 0 0)`);
-    testComputed(`lch(from lch(70% 45 30) 0% 0 0deg)`, `lch(0% 0 0)`);
-    testComputed(`lch(from lch(70% 45 30) 0% 0 0 / 0)`, `lch(0% 0 0 / 0)`);
-    testComputed(`lch(from lch(70% 45 30) 0% 0 0deg / 0)`, `lch(0% 0 0 / 0)`);
-    testComputed(`lch(from lch(70% 45 30) 0% c h / alpha)`, `lch(0% 45 30)`);
-    testComputed(`lch(from lch(70% 45 30) l 0 h / alpha)`, `lch(70% 0 30)`);
-    testComputed(`lch(from lch(70% 45 30) l c 0 / alpha)`, `lch(70% 45 0)`);
-    testComputed(`lch(from lch(70% 45 30) l c 0deg / alpha)`, `lch(70% 45 0)`);
-    testComputed(`lch(from lch(70% 45 30) l c h / 0)`, `lch(70% 45 30 / 0)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) 0% c h / alpha)`, `lch(0% 45 30 / 0.4)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) l 0 h / alpha)`, `lch(70% 0 30 / 0.4)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) l c 0 / alpha)`, `lch(70% 45 0 / 0.4)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) l c 0deg / alpha)`, `lch(70% 45 0 / 0.4)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) l c h / 0)`, `lch(70% 45 30 / 0)`);
-
-    // Testing replacement with a constant.
-    testComputed(`lch(from lch(70% 45 30) 25% c h / alpha)`, `lch(25% 45 30)`);
-    testComputed(`lch(from lch(70% 45 30) l 25 h / alpha)`, `lch(70% 25 30)`);
-    testComputed(`lch(from lch(70% 45 30) l c 25 / alpha)`, `lch(70% 45 25)`);
-    testComputed(`lch(from lch(70% 45 30) l c 25deg / alpha)`, `lch(70% 45 25)`);
-    testComputed(`lch(from lch(70% 45 30) l c h / .25)`, `lch(70% 45 30 / 0.25)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) 25% c h / alpha)`, `lch(25% 45 30 / 0.4)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) l 25 h / alpha)`, `lch(70% 25 30 / 0.4)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) l c 25 / alpha)`, `lch(70% 45 25 / 0.4)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) l c 25deg / alpha)`, `lch(70% 45 25 / 0.4)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) l c h / .25)`, `lch(70% 45 30 / 0.25)`);
-
-    // Testing valid permutation (types match).
-    // NOTE: 'c' is a vaild hue, as hue is <angle>|<number>.
-    testComputed(`lch(from lch(70% 45 30) alpha c h / l)`, `lch(100% 45 30 / 0.7)`);
-    testComputed(`lch(from lch(70% 45 30) l c c / alpha)`, `lch(70% 45 45)`);
-    testComputed(`lch(from lch(70% 45 30) alpha c h / alpha)`, `lch(100% 45 30)`);
-    testComputed(`lch(from lch(70% 45 30) alpha c c / alpha)`, `lch(100% 45 45)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) alpha c h / l)`, `lch(40% 45 30 / 0.7)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) l c c / alpha)`, `lch(70% 45 45 / 0.4)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) alpha c h / alpha)`, `lch(40% 45 30 / 0.4)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) alpha c c / alpha)`, `lch(40% 45 45 / 0.4)`);
-
-    // Testing invalid permutation (types don't match).
-    testComputed(`lch(from lch(70% 45 30) h l c / alpha)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lch(from lch(70% 45 30) c c c / c)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lch(from lch(70% 45 30) alpha alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) h l c / alpha)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) c c c / c)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) alpha alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);
-
-    // Testing with calc().
-    testComputed(`lch(from lch(70% 45 30) calc(l) calc(c) calc(h))`, `lch(70% 45 30)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))`, `lch(70% 45 30 / 0.4)`);
-
-    // Testing invalid values.
-    testComputed(`lch(from lch(70% 45 30) l 10% h)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lch(from lch(70% 45 30) l c 10%)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lch(from lch(70% 45 30) 10 c h)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) l 10% h)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) l c 10%)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lch(from lch(70% 45 30 / 40%) 10 c h)`, `rgba(0, 0, 0, 0)`);
-
-    // Testing invalid component names
-    testComputed(`lch(from lch(70% 45 30) lightness c h)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lch(from lch(70% 45 30) x c h)`, `rgba(0, 0, 0, 0)`);
-    testComputed(`lch(from lch(70% 45 30) l g b)`, `rgba(0, 0, 0, 0)`);
-
-
-    for (const color of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb" ]) {
+    for (const colorSpace of [ "lab", "oklab" ]) {
         debug('');
-        debug('color(from ... ${color} ...)');
+        debug(`${colorSpace}(from ...)`);
 
         // Testing no modifications.
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r g b)`,                              `color(${color} 0.7 0.5 0.3)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r g b / alpha)`,                      `color(${color} 0.7 0.5 0.3)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} r g b)`,                        `color(${color} 0.7 0.5 0.3)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} r g b / alpha)`,                `color(${color} 0.7 0.5 0.3 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a b)`, `${colorSpace}(25% 20 50)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a b / alpha)`, `${colorSpace}(25% 20 50)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l a b / alpha)`, `${colorSpace}(25% 20 50 / 0.4)`);
 
         // Test nesting relative colors.
-        testComputed(`color(from color(from color(${color} 0.7 0.5 0.3) ${color} r g b) ${color} r g b)`,   `color(${color} 0.7 0.5 0.3)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(from ${colorSpace}(25% 20 50) l a b) l a b)`, `${colorSpace}(25% 20 50)`);
+
+        // Testing non-${colorSpace} origin to see conversion.
+        testComputed(`${colorSpace}(from color(display-p3 0 0 0) l a b / alpha)`, `${colorSpace}(0% 0 0)`);
 
         // Testing replacement with 0.
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} 0 0 0)`,                              `color(${color} 0 0 0)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} 0 0 0)`,                              `color(${color} 0 0 0)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} 0 0 0 / 0)`,                          `color(${color} 0 0 0 / 0)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} 0 0 0 / 0)`,                          `color(${color} 0 0 0 / 0)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} 0 g b / alpha)`,                      `color(${color} 0 0.5 0.3)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r 0 b / alpha)`,                      `color(${color} 0.7 0 0.3)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r g 0 / alpha)`,                      `color(${color} 0.7 0.5 0)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r g b / 0)`,                          `color(${color} 0.7 0.5 0.3 / 0)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} 0 g b / alpha)`,                `color(${color} 0 0.5 0.3 / 0.4)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} r 0 b / alpha)`,                `color(${color} 0.7 0 0.3 / 0.4)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} r g 0 / alpha)`,                `color(${color} 0.7 0.5 0 / 0.4)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} r g b / 0)`,                    `color(${color} 0.7 0.5 0.3 / 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) 0% 0 0)`, `${colorSpace}(0% 0 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) 0% 0 0 / 0)`, `${colorSpace}(0% 0 0 / 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) 0% a b / alpha)`, `${colorSpace}(0% 20 50)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l 0 b / alpha)`, `${colorSpace}(25% 0 50)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a 0 / alpha)`, `${colorSpace}(25% 20 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a b / 0)`, `${colorSpace}(25% 20 50 / 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) 0% a b / alpha)`, `${colorSpace}(0% 20 50 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l 0 b / alpha)`, `${colorSpace}(25% 0 50 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l a 0 / alpha)`, `${colorSpace}(25% 20 0 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l a b / 0)`, `${colorSpace}(25% 20 50 / 0)`);
 
         // Testing replacement with a constant.
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} 0.2 g b / alpha)`,                    `color(${color} 0.2 0.5 0.3)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} 20% g b / alpha)`,                    `color(${color} 0.2 0.5 0.3)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r 0.2 b / alpha)`,                    `color(${color} 0.7 0.2 0.3)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r 20% b / alpha)`,                    `color(${color} 0.7 0.2 0.3)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r g 0.2 / alpha)`,                    `color(${color} 0.7 0.5 0.2)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r g 20% / alpha)`,                    `color(${color} 0.7 0.5 0.2)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r g b / 0.2)`,                        `color(${color} 0.7 0.5 0.3 / 0.2)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r g b / 20%)`,                        `color(${color} 0.7 0.5 0.3 / 0.2)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} 0.2 g b / alpha)`,              `color(${color} 0.2 0.5 0.3 / 0.4)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} 20% g b / alpha)`,              `color(${color} 0.2 0.5 0.3 / 0.4)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} r 0.2 b / alpha)`,              `color(${color} 0.7 0.2 0.3 / 0.4)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} r 20% b / alpha)`,              `color(${color} 0.7 0.2 0.3 / 0.4)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} r g 0.2 / alpha)`,              `color(${color} 0.7 0.5 0.2 / 0.4)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} r g 20% / alpha)`,              `color(${color} 0.7 0.5 0.2 / 0.4)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} r g b / 0.2)`,                  `color(${color} 0.7 0.5 0.3 / 0.2)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} r g b / 20%)`,                  `color(${color} 0.7 0.5 0.3 / 0.2)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) 35% a b / alpha)`, `${colorSpace}(35% 20 50)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l 35 b / alpha)`, `${colorSpace}(25% 35 50)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a 35 / alpha)`, `${colorSpace}(25% 20 35)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a b / .35)`, `${colorSpace}(25% 20 50 / 0.35)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) 35% a b / alpha)`, `${colorSpace}(35% 20 50 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l 35 b / alpha)`, `${colorSpace}(25% 35 50 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l a 35 / alpha)`, `${colorSpace}(25% 20 35 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l a b / .35)`, `${colorSpace}(25% 20 50 / 0.35)`);
 
         // Testing valid permutation (types match).
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} g b r)`,                              `color(${color} 0.5 0.3 0.7)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} b alpha r / g)`,                      `color(${color} 0.3 1 0.7 / 0.5)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r r r / r)`,                          `color(${color} 0.7 0.7 0.7 / 0.7)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} alpha alpha alpha / alpha)`,          `color(${color} 1 1 1)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} g b r)`,                        `color(${color} 0.5 0.3 0.7)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} b alpha r / g)`,                `color(${color} 0.3 0.4 0.7 / 0.5)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} r r r / r)`,                    `color(${color} 0.7 0.7 0.7 / 0.7)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} alpha alpha alpha / alpha)`,    `color(${color} 0.4 0.4 0.4 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l b a)`, `${colorSpace}(25% 50 20)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a a / a)`, `${colorSpace}(25% 20 20)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l b a)`, `${colorSpace}(25% 50 20)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l a a / a)`, `${colorSpace}(25% 20 20)`);
+
+        // Testing invalid permutation (types don't match).
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l alpha a / b)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l alpha a / b)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);
 
         // Testing with calc().
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} calc(r) calc(g) calc(b))`,                        `color(${color} 0.7 0.5 0.3)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3 / 40%) ${color} calc(r) calc(g) calc(b) / calc(alpha))`,    `color(${color} 0.7 0.5 0.3 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) calc(l) calc(a) calc(b))`, `${colorSpace}(25% 20 50)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) calc(l) calc(a) calc(b) / calc(alpha))`, `${colorSpace}(25% 20 50 / 0.4)`);
 
         // Testing invalid values.
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} 10deg g b)`,                          `rgba(0, 0, 0, 0)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r 10deg b)`,                          `rgba(0, 0, 0, 0)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r g 10deg)`,                          `rgba(0, 0, 0, 0)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} r g b / 10deg)`,                      `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l 10% 10)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l 10 10%)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) 10 a b)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l 10% 10)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l 10 10%)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) 10 a b)`, `rgba(0, 0, 0, 0)`);
 
         // Testing invalid component names
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} red g b)`,                            `rgba(0, 0, 0, 0)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} x g b)`,                              `rgba(0, 0, 0, 0)`);
-        testComputed(`color(from color(${color} 0.7 0.5 0.3) ${color} l g b)`,                              `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) lightness a b)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) x a b)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) h g b)`, `rgba(0, 0, 0, 0)`);
     }
 
-    for (const color of [ "xyz", "xyz-d50", "xyz-d65" ]) {
-	    debug('');
-	    debug(`color(from ... ${color} ...)`);
+    for (const colorSpace of [ "lch", "oklch" ]) {
+        debug('');
+        debug(`${colorSpace}(from ...)`);
 
-  	  	const resultColorSpace = color == "xyz" ? "xyz-d65" : color; 
+        const rectangularForm = colorSpace == "lch" ? "lab" : "oklab";
+
+        // Testing no modifications.
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c h)`, `${colorSpace}(70% 45 30)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c h / alpha)`, `${colorSpace}(70% 45 30)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c h/ alpha)`, `${colorSpace}(70% 45 30 / 0.4)`);
+
+        // Test nesting relative colors.
+        testComputed(`${colorSpace}(from ${colorSpace}(from ${colorSpace}(70% 45 30) l c h) l c h)`, `${colorSpace}(70% 45 30)`);
+
+        // Testing non-sRGB origin colors to see gamut clipping.
+        testComputed(`${colorSpace}(from color(display-p3 0 0 0) l c h / alpha)`, `${colorSpace}(0% 0 0)`);
+        testComputed(`${colorSpace}(from ${rectangularForm}(70% 45 30) l c h / alpha)`, `${colorSpace}(70% 54.08327 33.690067)`);
+
+        // Testing replacement with 0.
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 0% 0 0)`, `${colorSpace}(0% 0 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 0% 0 0deg)`, `${colorSpace}(0% 0 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 0% 0 0 / 0)`, `${colorSpace}(0% 0 0 / 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 0% 0 0deg / 0)`, `${colorSpace}(0% 0 0 / 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 0% c h / alpha)`, `${colorSpace}(0% 45 30)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l 0 h / alpha)`, `${colorSpace}(70% 0 30)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c 0 / alpha)`, `${colorSpace}(70% 45 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c 0deg / alpha)`, `${colorSpace}(70% 45 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c h / 0)`, `${colorSpace}(70% 45 30 / 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) 0% c h / alpha)`, `${colorSpace}(0% 45 30 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l 0 h / alpha)`, `${colorSpace}(70% 0 30 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c 0 / alpha)`, `${colorSpace}(70% 45 0 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c 0deg / alpha)`, `${colorSpace}(70% 45 0 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c h / 0)`, `${colorSpace}(70% 45 30 / 0)`);
+
+        // Testing replacement with a constant.
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 25% c h / alpha)`, `${colorSpace}(25% 45 30)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l 25 h / alpha)`, `${colorSpace}(70% 25 30)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c 25 / alpha)`, `${colorSpace}(70% 45 25)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c 25deg / alpha)`, `${colorSpace}(70% 45 25)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c h / .25)`, `${colorSpace}(70% 45 30 / 0.25)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) 25% c h / alpha)`, `${colorSpace}(25% 45 30 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l 25 h / alpha)`, `${colorSpace}(70% 25 30 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c 25 / alpha)`, `${colorSpace}(70% 45 25 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c 25deg / alpha)`, `${colorSpace}(70% 45 25 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c h / .25)`, `${colorSpace}(70% 45 30 / 0.25)`);
+
+        // Testing valid permutation (types match).
+        // NOTE: 'c' is a vaild hue, as hue is <angle>|<number>.
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) alpha c h / l)`, `${colorSpace}(100% 45 30 / 0.7)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c c / alpha)`, `${colorSpace}(70% 45 45)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) alpha c h / alpha)`, `${colorSpace}(100% 45 30)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) alpha c c / alpha)`, `${colorSpace}(100% 45 45)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) alpha c h / l)`, `${colorSpace}(40% 45 30 / 0.7)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c c / alpha)`, `${colorSpace}(70% 45 45 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) alpha c h / alpha)`, `${colorSpace}(40% 45 30 / 0.4)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) alpha c c / alpha)`, `${colorSpace}(40% 45 45 / 0.4)`);
+
+        // Testing invalid permutation (types don't match).
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) h l c / alpha)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) c c c / c)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) alpha alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) h l c / alpha)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) c c c / c)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) alpha alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);
+
+        // Testing with calc().
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) calc(l) calc(c) calc(h))`, `${colorSpace}(70% 45 30)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))`, `${colorSpace}(70% 45 30 / 0.4)`);
+
+        // Testing invalid values.
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l 10% h)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c 10%)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 10 c h)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l 10% h)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c 10%)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) 10 c h)`, `rgba(0, 0, 0, 0)`);
+
+        // Testing invalid component names
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) lightness c h)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) x c h)`, `rgba(0, 0, 0, 0)`);
+        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l g b)`, `rgba(0, 0, 0, 0)`);
+    }
+
+    for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb" ]) {
+        debug('');
+        debug(`color(from ... ${colorSpace} ...)`);
+
+        // Testing no modifications.
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b)`,                              `color(${colorSpace} 0.7 0.5 0.3)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / alpha)`,                      `color(${colorSpace} 0.7 0.5 0.3)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b)`,                        `color(${colorSpace} 0.7 0.5 0.3)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / alpha)`,                `color(${colorSpace} 0.7 0.5 0.3 / 0.4)`);
+
+        // Test nesting relative colors.
+        testComputed(`color(from color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b) ${colorSpace} r g b)`,   `color(${colorSpace} 0.7 0.5 0.3)`);
+
+        // Testing replacement with 0.
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 0 0)`,                              `color(${colorSpace} 0 0 0)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 0 0)`,                              `color(${colorSpace} 0 0 0)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 0 0 / 0)`,                          `color(${colorSpace} 0 0 0 / 0)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 0 0 / 0)`,                          `color(${colorSpace} 0 0 0 / 0)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 g b / alpha)`,                      `color(${colorSpace} 0 0.5 0.3)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 0 b / alpha)`,                      `color(${colorSpace} 0.7 0 0.3)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 0 / alpha)`,                      `color(${colorSpace} 0.7 0.5 0)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 0)`,                          `color(${colorSpace} 0.7 0.5 0.3 / 0)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} 0 g b / alpha)`,                `color(${colorSpace} 0 0.5 0.3 / 0.4)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r 0 b / alpha)`,                `color(${colorSpace} 0.7 0 0.3 / 0.4)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g 0 / alpha)`,                `color(${colorSpace} 0.7 0.5 0 / 0.4)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / 0)`,                    `color(${colorSpace} 0.7 0.5 0.3 / 0)`);
+
+        // Testing replacement with a constant.
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0.2 g b / alpha)`,                    `color(${colorSpace} 0.2 0.5 0.3)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 20% g b / alpha)`,                    `color(${colorSpace} 0.2 0.5 0.3)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 0.2 b / alpha)`,                    `color(${colorSpace} 0.7 0.2 0.3)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 20% b / alpha)`,                    `color(${colorSpace} 0.7 0.2 0.3)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 0.2 / alpha)`,                    `color(${colorSpace} 0.7 0.5 0.2)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 20% / alpha)`,                    `color(${colorSpace} 0.7 0.5 0.2)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 0.2)`,                        `color(${colorSpace} 0.7 0.5 0.3 / 0.2)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 20%)`,                        `color(${colorSpace} 0.7 0.5 0.3 / 0.2)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} 0.2 g b / alpha)`,              `color(${colorSpace} 0.2 0.5 0.3 / 0.4)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} 20% g b / alpha)`,              `color(${colorSpace} 0.2 0.5 0.3 / 0.4)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r 0.2 b / alpha)`,              `color(${colorSpace} 0.7 0.2 0.3 / 0.4)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r 20% b / alpha)`,              `color(${colorSpace} 0.7 0.2 0.3 / 0.4)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g 0.2 / alpha)`,              `color(${colorSpace} 0.7 0.5 0.2 / 0.4)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g 20% / alpha)`,              `color(${colorSpace} 0.7 0.5 0.2 / 0.4)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / 0.2)`,                  `color(${colorSpace} 0.7 0.5 0.3 / 0.2)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / 20%)`,                  `color(${colorSpace} 0.7 0.5 0.3 / 0.2)`);
+
+        // Testing valid permutation (types match).
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} g b r)`,                              `color(${colorSpace} 0.5 0.3 0.7)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} b alpha r / g)`,                      `color(${colorSpace} 0.3 1 0.7 / 0.5)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r r r / r)`,                          `color(${colorSpace} 0.7 0.7 0.7 / 0.7)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} alpha alpha alpha / alpha)`,          `color(${colorSpace} 1 1 1)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} g b r)`,                        `color(${colorSpace} 0.5 0.3 0.7)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} b alpha r / g)`,                `color(${colorSpace} 0.3 0.4 0.7 / 0.5)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r r r / r)`,                    `color(${colorSpace} 0.7 0.7 0.7 / 0.7)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} alpha alpha alpha / alpha)`,    `color(${colorSpace} 0.4 0.4 0.4 / 0.4)`);
+
+        // Testing with calc().
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} calc(r) calc(g) calc(b))`,                        `color(${colorSpace} 0.7 0.5 0.3)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} calc(r) calc(g) calc(b) / calc(alpha))`,    `color(${colorSpace} 0.7 0.5 0.3 / 0.4)`);
+
+        // Testing invalid values.
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 10deg g b)`,                          `rgba(0, 0, 0, 0)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 10deg b)`,                          `rgba(0, 0, 0, 0)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 10deg)`,                          `rgba(0, 0, 0, 0)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 10deg)`,                      `rgba(0, 0, 0, 0)`);
+
+        // Testing invalid component names
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} red g b)`,                            `rgba(0, 0, 0, 0)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} x g b)`,                              `rgba(0, 0, 0, 0)`);
+        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} l g b)`,                              `rgba(0, 0, 0, 0)`);
+    }
+
+    for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) {
+	    debug('');
+        debug(`color(from ... ${colorSpace} ...)`);
+
+  	  	const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace; 
 
 	    // Testing no modifications.
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x y z)`,                              `color(${resultColorSpace} 7 -20.5 100)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x y z / alpha)`,                      `color(${resultColorSpace} 7 -20.5 100)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} x y z)`,                        `color(${resultColorSpace} 7 -20.5 100)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} x y z / alpha)`,                `color(${resultColorSpace} 7 -20.5 100 / 0.4)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z)`,                              `color(${resultColorSpace} 7 -20.5 100)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / alpha)`,                      `color(${resultColorSpace} 7 -20.5 100)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z)`,                        `color(${resultColorSpace} 7 -20.5 100)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z / alpha)`,                `color(${resultColorSpace} 7 -20.5 100 / 0.4)`);
 
 	    // Test nesting relative colors.
-	    testComputed(`color(from color(from color(${color} 7 -20.5 100) ${color} x y z) ${color} x y z)`,        `color(${resultColorSpace} 7 -20.5 100)`);
+	    testComputed(`color(from color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z) ${colorSpace} x y z)`,        `color(${resultColorSpace} 7 -20.5 100)`);
 
 	    // Testing replacement with 0.
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} 0 0 0)`,                              `color(${resultColorSpace} 0 0 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} 0 0 0)`,                              `color(${resultColorSpace} 0 0 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} 0 0 0 / 0)`,                          `color(${resultColorSpace} 0 0 0 / 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} 0 0 0 / 0)`,                          `color(${resultColorSpace} 0 0 0 / 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} 0 y z / alpha)`,                      `color(${resultColorSpace} 0 -20.5 100)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x 0 z / alpha)`,                      `color(${resultColorSpace} 7 0 100)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x y 0 / alpha)`,                      `color(${resultColorSpace} 7 -20.5 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x y z / 0)`,                          `color(${resultColorSpace} 7 -20.5 100 / 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} 0 y z / alpha)`,                `color(${resultColorSpace} 0 -20.5 100 / 0.4)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} x 0 z / alpha)`,                `color(${resultColorSpace} 7 0 100 / 0.4)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} x y 0 / alpha)`,                `color(${resultColorSpace} 7 -20.5 0 / 0.4)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} x y z / 0)`,                    `color(${resultColorSpace} 7 -20.5 100 / 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 0 0)`,                              `color(${resultColorSpace} 0 0 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 0 0)`,                              `color(${resultColorSpace} 0 0 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 0 0 / 0)`,                          `color(${resultColorSpace} 0 0 0 / 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 0 0 / 0)`,                          `color(${resultColorSpace} 0 0 0 / 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 y z / alpha)`,                      `color(${resultColorSpace} 0 -20.5 100)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x 0 z / alpha)`,                      `color(${resultColorSpace} 7 0 100)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y 0 / alpha)`,                      `color(${resultColorSpace} 7 -20.5 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 0)`,                          `color(${resultColorSpace} 7 -20.5 100 / 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} 0 y z / alpha)`,                `color(${resultColorSpace} 0 -20.5 100 / 0.4)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x 0 z / alpha)`,                `color(${resultColorSpace} 7 0 100 / 0.4)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y 0 / alpha)`,                `color(${resultColorSpace} 7 -20.5 0 / 0.4)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z / 0)`,                    `color(${resultColorSpace} 7 -20.5 100 / 0)`);
 
 	    // Testing replacement with a constant.
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} 0.2 y z / alpha)`,                    `color(${resultColorSpace} 0.2 -20.5 100)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x 0.2 z / alpha)`,                    `color(${resultColorSpace} 7 0.2 100)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x y 0.2 / alpha)`,                    `color(${resultColorSpace} 7 -20.5 0.2)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x y z / 0.2)`,                        `color(${resultColorSpace} 7 -20.5 100 / 0.2)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x y z / 20%)`,                        `color(${resultColorSpace} 7 -20.5 100 / 0.2)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} 0.2 y z / alpha)`,              `color(${resultColorSpace} 0.2 -20.5 100 / 0.4)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} x 0.2 z / alpha)`,              `color(${resultColorSpace} 7 0.2 100 / 0.4)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} x y 0.2 / alpha)`,              `color(${resultColorSpace} 7 -20.5 0.2 / 0.4)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} x y z / 0.2)`,                  `color(${resultColorSpace} 7 -20.5 100 / 0.2)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0.2 y z / alpha)`,                    `color(${resultColorSpace} 0.2 -20.5 100)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x 0.2 z / alpha)`,                    `color(${resultColorSpace} 7 0.2 100)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y 0.2 / alpha)`,                    `color(${resultColorSpace} 7 -20.5 0.2)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 0.2)`,                        `color(${resultColorSpace} 7 -20.5 100 / 0.2)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 20%)`,                        `color(${resultColorSpace} 7 -20.5 100 / 0.2)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} 0.2 y z / alpha)`,              `color(${resultColorSpace} 0.2 -20.5 100 / 0.4)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x 0.2 z / alpha)`,              `color(${resultColorSpace} 7 0.2 100 / 0.4)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y 0.2 / alpha)`,              `color(${resultColorSpace} 7 -20.5 0.2 / 0.4)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z / 0.2)`,                  `color(${resultColorSpace} 7 -20.5 100 / 0.2)`);
 
 	    // Testing valid permutation (types match).
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} y z x)`,                              `color(${resultColorSpace} -20.5 100 7)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x x x / x)`,                          `color(${resultColorSpace} 7 7 7)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} y z x)`,                        `color(${resultColorSpace} -20.5 100 7)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} x x x / x)`,                    `color(${resultColorSpace} 7 7 7)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} y z x)`,                              `color(${resultColorSpace} -20.5 100 7)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x x x / x)`,                          `color(${resultColorSpace} 7 7 7)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} y z x)`,                        `color(${resultColorSpace} -20.5 100 7)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x x x / x)`,                    `color(${resultColorSpace} 7 7 7)`);
 
 	    // Testing invalid permutation (types don't match).
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} z alpha x / y)`,                      `rgba(0, 0, 0, 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} alpha alpha alpha / alpha)`,          `rgba(0, 0, 0, 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} z alpha x / y)`,                `rgba(0, 0, 0, 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} alpha alpha alpha / alpha)`,    `rgba(0, 0, 0, 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} z alpha x / y)`,                      `rgba(0, 0, 0, 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} alpha alpha alpha / alpha)`,          `rgba(0, 0, 0, 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} z alpha x / y)`,                `rgba(0, 0, 0, 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} alpha alpha alpha / alpha)`,    `rgba(0, 0, 0, 0)`);
 
 	    // Testing with calc().
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} calc(x) calc(y) calc(z))`,                        `color(${resultColorSpace} 7 -20.5 100)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100 / 40%) ${color} calc(x) calc(y) calc(z) / calc(alpha))`,    `color(${resultColorSpace} 7 -20.5 100 / 0.4)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} calc(x) calc(y) calc(z))`,                        `color(${resultColorSpace} 7 -20.5 100)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} calc(x) calc(y) calc(z) / calc(alpha))`,    `color(${resultColorSpace} 7 -20.5 100 / 0.4)`);
 
 	    // Testing invalid values.
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} 10deg y z)`,                          `rgba(0, 0, 0, 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x 10deg z)`,                          `rgba(0, 0, 0, 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x y 10deg)`,                          `rgba(0, 0, 0, 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} x y z / 10deg)`,                      `rgba(0, 0, 0, 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 10deg y z)`,                          `rgba(0, 0, 0, 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x 10deg z)`,                          `rgba(0, 0, 0, 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y 10deg)`,                          `rgba(0, 0, 0, 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 10deg)`,                      `rgba(0, 0, 0, 0)`);
 
 	    // Testing invalid component names
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} red y)`,                              `rgba(0, 0, 0, 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} r y z)`,                              `rgba(0, 0, 0, 0)`);
-	    testComputed(`color(from color(${color} 7 -20.5 100) ${color} l y z)`,                              `rgba(0, 0, 0, 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} red y)`,                              `rgba(0, 0, 0, 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} r y z)`,                              `rgba(0, 0, 0, 0)`);
+	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} l y z)`,                              `rgba(0, 0, 0, 0)`);
 	}
 
     debug('');
diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
index f9399a2..8355cff 100644
--- a/LayoutTests/imported/w3c/ChangeLog
+++ b/LayoutTests/imported/w3c/ChangeLog
@@ -1,3 +1,46 @@
+2021-11-27  Sam Weinig  <weinig@apple.com>
+
+        [CSS Color 4] Add support for oklab() and oklch() colors
+        https://bugs.webkit.org/show_bug.cgi?id=233507
+
+        Reviewed by Cameron McCormack.
+
+        Add new tests for oklab() and oklch() based on the existing lab()
+        and lch() tests.
+
+        * web-platform-tests/css/css-color/oklab-001-expected.html: Added.
+        * web-platform-tests/css/css-color/oklab-001.html: Added.
+        * web-platform-tests/css/css-color/oklab-002-expected.html: Added.
+        * web-platform-tests/css/css-color/oklab-002.html: Added.
+        * web-platform-tests/css/css-color/oklab-003-expected.html: Added.
+        * web-platform-tests/css/css-color/oklab-003.html: Added.
+        * web-platform-tests/css/css-color/oklab-004-expected.html: Added.
+        * web-platform-tests/css/css-color/oklab-004.html: Added.
+        * web-platform-tests/css/css-color/oklab-005-expected.html: Added.
+        * web-platform-tests/css/css-color/oklab-005.html: Added.
+        * web-platform-tests/css/css-color/oklab-006-expected.html: Added.
+        * web-platform-tests/css/css-color/oklab-006.html: Added.
+        * web-platform-tests/css/css-color/oklab-007-expected.html: Added.
+        * web-platform-tests/css/css-color/oklab-007.html: Added.
+        * web-platform-tests/css/css-color/oklab-008-expected.html: Added.
+        * web-platform-tests/css/css-color/oklab-008.html: Added.
+        * web-platform-tests/css/css-color/oklch-001-expected.html: Added.
+        * web-platform-tests/css/css-color/oklch-001.html: Added.
+        * web-platform-tests/css/css-color/oklch-002-expected.html: Added.
+        * web-platform-tests/css/css-color/oklch-002.html: Added.
+        * web-platform-tests/css/css-color/oklch-003-expected.html: Added.
+        * web-platform-tests/css/css-color/oklch-003.html: Added.
+        * web-platform-tests/css/css-color/oklch-004-expected.html: Added.
+        * web-platform-tests/css/css-color/oklch-004.html: Added.
+        * web-platform-tests/css/css-color/oklch-005-expected.html: Added.
+        * web-platform-tests/css/css-color/oklch-005.html: Added.
+        * web-platform-tests/css/css-color/oklch-006-expected.html: Added.
+        * web-platform-tests/css/css-color/oklch-006.html: Added.
+        * web-platform-tests/css/css-color/oklch-007-expected.html: Added.
+        * web-platform-tests/css/css-color/oklch-007.html: Added.
+        * web-platform-tests/css/css-color/oklch-008-expected.html: Added.
+        * web-platform-tests/css/css-color/oklch-008.html: Added.
+
 2021-11-26  Tim Nguyen  <ntim@apple.com>
 
         Update dialog focusing steps inert/disconnected handling
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-001-expected.html
new file mode 100644
index 0000000..35a31f8
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-001-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Green square reference</title>
+<style>
+    .test { background-color: #008000; width: 12em; height: 12em;}
+</style>
+<body>
+    <p>Test passes if you see a green square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-001.html
new file mode 100644
index 0000000..295c24c
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-001.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="greensquare-ref.html">
+<meta name="assert" content="oklab() with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: oklab(51.975% -0.1403 0.10768); } /* green (sRGB #008000) converted to OKLab */
+</style>
+<body>
+    <p>Test passes if you see a green square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-002-expected.html
new file mode 100644
index 0000000..14bc74b
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-002-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Black square reference</title>
+<style>
+    .test { background-color: #000000; width: 12em; height: 12em; }
+</style>
+<body>
+    <p>Test passes if you see a black square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-002.html
new file mode 100644
index 0000000..049e403
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-002.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="blacksquare-ref.html">
+<meta name="assert" content="oklab() with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: oklab(0% 0 0); } /* black (sRGB #000000) converted to OKLab */
+</style>
+<body>
+    <p>Test passes if you see a black square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-003-expected.html
new file mode 100644
index 0000000..ea71037
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-003-expected.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>White square reference</title>
+<style>
+    body { background-color: grey; }
+    .test { background-color: #FFFFFF; width: 12em; height: 12em; }
+</style>
+<body>
+    <p>Test passes if you see a white square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-003.html
new file mode 100644
index 0000000..9da9bbc
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-003.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="whitesquare-ref.html">
+<meta name="assert" content="oklab() with no alpha">
+<style>
+    body { background-color: grey; }
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: oklab(100% 0 0); } /* white (sRGB #FFFFFF) converted to OKLab */
+</style>
+<body>
+    <p>Test passes if you see a white square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-004-expected.html
new file mode 100644
index 0000000..d947445
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-004-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<style>
+    .test { background-color: rgb(48.477% 34.29% 38.412%); width: 12em; height: 12em; } /* oklab(50% 0.05 0) converted to sRGB */
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-004.html
new file mode 100644
index 0000000..d9456d7
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-004.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="oklab-004-ref.html">
+<meta name="assert" content="oklab() with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(48.477% 34.29% 38.412%); width: 12em; height: 6em; margin-bottom: 0; }/* oklab(50% 0.05 0) converted to sRGB */
+    .test { background-color: oklab(50% 0.05 0); }
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="ref"></div>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-005-expected.html
new file mode 100644
index 0000000..7edd82a
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-005-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<style>
+    .test { background-color: rgb(29.264% 70.096% 63.017%); width: 12em; height: 12em; } /* oklab(70% -0.1 0) converted to sRGB */
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-005.html
new file mode 100644
index 0000000..f3d39df
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-005.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="oklab-005-ref.html">
+<meta name="assert" content="oklab() with no alpha, negative a axis">
+<style>
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(29.264% 70.096% 63.017%); width: 12em; height: 6em; margin-bottom: 0; } /* oklab(70% -0.1 0) converted to sRGB */
+    .test { background-color: oklab(70% -0.1 0); }
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="ref"></div>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-006-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-006-expected.html
new file mode 100644
index 0000000..98a5b9d
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-006-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<style>
+    .test { background-color: rgb(73.942% 60.484% 19.65%); width: 12em; height: 12em; } /* oklab(70% 0 0.125) converted to sRGB */
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-006.html
new file mode 100644
index 0000000..9e8845c
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-006.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="oklab-006-ref.html">
+<meta name="assert" content="oklab() with no alpha, positive b axis">
+<style>
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(73.942% 60.484% 19.65%); width: 12em; height: 6em; margin-bottom: 0; } /* oklab(70% 0 0.125) converted to sRGB */
+    .test { background-color: oklab(70% 0 0.125); }
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="ref"></div>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-007-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-007-expected.html
new file mode 100644
index 0000000..c71e428
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-007-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<style>
+    .test { background-color: rgb(27.888% 38.072% 89.414%); width: 12em; height: 12em; } /* oklab(55% 0 -0.2) converted to sRGB */
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-007.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-007.html
new file mode 100644
index 0000000..5580ede
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-007.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="oklab-007-ref.html">
+<meta name="assert" content="oklab() with no alpha, negative b axis">
+<style>
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(27.888% 38.072% 89.414%); width: 12em; height: 6em; margin-bottom: 0; } /* oklab(55% 0 -0.2) converted to sRGB */
+    .test { background-color: oklab(55% 0 -0.2); }
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="ref"></div>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-008-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-008-expected.html
new file mode 100644
index 0000000..2134c96
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-008-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Green square color(display-p3 0 1 0) reference</title>
+<style>
+    .test { background-color: color(display-p3 0 1 0); width: 12em; height: 12em; }
+</style>
+<body>
+    <p>Test passes if you see a green square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-008.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-008.html
new file mode 100644
index 0000000..19a165d
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklab-008.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="greensquare-display-p3-ref.html">
+<meta name="assert" content="oklab() outside the sRGB gamut">
+<style>
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: oklab(84.883% -0.3042 0.20797); } /* green color(display-p3 0 1 0) converted to OKLab */
+</style>
+<body>
+    <p>Test passes if you see a green square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-001-expected.html
new file mode 100644
index 0000000..35a31f8
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-001-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Green square reference</title>
+<style>
+    .test { background-color: #008000; width: 12em; height: 12em;}
+</style>
+<body>
+    <p>Test passes if you see a green square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-001.html
new file mode 100644
index 0000000..81d187c
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-001.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="greensquare-ref.html">
+<meta name="assert" content="oklch() with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: oklch(51.975% 0.17686 142.495); } /* green (sRGB #008000) converted to OKLCH */
+</style>
+<body>
+    <p>Test passes if you see a green square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-002-expected.html
new file mode 100644
index 0000000..14bc74b
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-002-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Black square reference</title>
+<style>
+    .test { background-color: #000000; width: 12em; height: 12em; }
+</style>
+<body>
+    <p>Test passes if you see a black square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-002.html
new file mode 100644
index 0000000..64b09b5
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-002.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="blacksquare-ref.html">
+<meta name="assert" content="oklch() with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: oklch(0% 0 0); } /* black (sRGB #000000) converted to OKLCH */
+</style>
+<body>
+    <p>Test passes if you see a black square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-003-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-003-expected.html
new file mode 100644
index 0000000..ea71037
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-003-expected.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>White square reference</title>
+<style>
+    body { background-color: grey; }
+    .test { background-color: #FFFFFF; width: 12em; height: 12em; }
+</style>
+<body>
+    <p>Test passes if you see a white square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-003.html
new file mode 100644
index 0000000..8d83963
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-003.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="whitesquare-ref.html">
+<meta name="assert" content="oklch() with no alpha">
+<style>
+    body { background-color: grey; }
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: oklch(100% 0 0); } /* white (sRGB #FFFFFF) converted to OKLCH */
+</style>
+<body>
+    <p>Test passes if you see a white square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-004-expected.html
new file mode 100644
index 0000000..5811758
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-004-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<style>
+    .test { background-color: rgb(70.492% 2.351% 37.073%); width: 12em; height: 12em; } /* oklch(50% 0.2 0) converted to sRGB */
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-004.html
new file mode 100644
index 0000000..35d9e6a
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-004.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="oklch-004-ref.html">
+<meta name="assert" content="oklch() with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(70.492% 2.351% 37.073%); width: 12em; height: 6em; margin-bottom: 0; } /* oklch(50% 0.2 0) converted to sRGB */
+    .test { background-color: oklch(50% 0.2 0); }
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="ref"></div>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-005-expected.html
new file mode 100644
index 0000000..1fa8c48
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-005-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<style>
+    .test { background-color: rgb(23.056% 31.73% 82.628%); width: 12em; height: 12em; } /* oklch(50% 0.2 270) converted to sRGB */
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-005.html
new file mode 100644
index 0000000..4f935bb
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-005.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="oklch-005-ref.html">
+<meta name="assert" content="oklch() with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(23.056% 31.73% 82.628%); width: 12em; height: 6em; margin-bottom: 0; } /* oklch(50% 0.2 270) converted to sRGB */
+    .test { background-color: oklch(50% 0.2 270); }
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="ref"></div>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-006-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-006-expected.html
new file mode 100644
index 0000000..04c823e
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-006-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<style>
+    .test { background-color: rgb(32.022% 85.805% 61.147%); width: 12em; height: 12em; } /* oklch(80% 0.15 160) converted to sRGB */
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-006.html
new file mode 100644
index 0000000..95aea6f
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-006.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="oklch-006-ref.html">
+<meta name="assert" content="oklch() with no alpha, positive b axis (when converted to Lab)">
+<style>
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(32.022% 85.805% 61.147%); width: 12em; height: 6em; margin-bottom: 0; } /* oklch(80% 0.15 160) converted to sRGB */
+    .test { background-color: oklch(80% 0.15 160); }
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="ref"></div>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-007-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-007-expected.html
new file mode 100644
index 0000000..fd1deb3
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-007-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<style>
+    .test { background-color: rgb(67.293% 27.791% 52.28%); width: 12em; height: 12em; } /* oklch(55% 0.15 345) converted to sRGB */
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-007.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-007.html
new file mode 100644
index 0000000..1cd9b97
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-007.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab">
+<link rel="match" href="oklch-007-ref.html">
+<meta name="assert" content="oklch() with no alpha">
+<style>
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(67.293% 27.791% 52.28%); width: 12em; height: 6em; margin-bottom: 0; } /* oklch(55% 0.15 345); converted to sRGB */
+    .test { background-color: oklch(55% 0.15 345); }
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <div class="ref"></div>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-008-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-008-expected.html
new file mode 100644
index 0000000..2134c96
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-008-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Green square color(display-p3 0 1 0) reference</title>
+<style>
+    .test { background-color: color(display-p3 0 1 0); width: 12em; height: 12em; }
+</style>
+<body>
+    <p>Test passes if you see a green square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-008.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-008.html
new file mode 100644
index 0000000..fef6ffa
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/oklch-008.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch">
+<link rel="match" href="greensquare-display-p3-ref.html">
+<meta name="assert" content="oklch() outside the sRGB gamut">
+<style>
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: oklch(84.883% 0.36853 145.645); } /* green color(display-p3 0 1 0) converted to OKLCH */
+</style>
+<body>
+    <p>Test passes if you see a green square, and no red.</p>
+    <div class="test"></div>
+</body>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index a9e34a2..9428b05 100644
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,118 @@
+2021-11-27  Sam Weinig  <weinig@apple.com>
+
+        [CSS Color 4] Add support for oklab() and oklch() colors
+        https://bugs.webkit.org/show_bug.cgi?id=233507
+
+        Reviewed by Cameron McCormack.
+
+        Tests: imported/w3c/web-platform-tests/css/css-color/oklab-001.html
+               imported/w3c/web-platform-tests/css/css-color/oklab-002.html
+               imported/w3c/web-platform-tests/css/css-color/oklab-003.html
+               imported/w3c/web-platform-tests/css/css-color/oklab-004.html
+               imported/w3c/web-platform-tests/css/css-color/oklab-005.html
+               imported/w3c/web-platform-tests/css/css-color/oklab-006.html
+               imported/w3c/web-platform-tests/css/css-color/oklab-007.html
+               imported/w3c/web-platform-tests/css/css-color/oklab-008.html
+               imported/w3c/web-platform-tests/css/css-color/oklch-001.html
+               imported/w3c/web-platform-tests/css/css-color/oklch-002.html
+               imported/w3c/web-platform-tests/css/css-color/oklch-003.html
+               imported/w3c/web-platform-tests/css/css-color/oklch-004.html
+               imported/w3c/web-platform-tests/css/css-color/oklch-005.html
+               imported/w3c/web-platform-tests/css/css-color/oklch-006.html
+               imported/w3c/web-platform-tests/css/css-color/oklch-007.html
+               imported/w3c/web-platform-tests/css/css-color/oklch-008.html
+
+        Adds support for oklab() and oklch() CSS colors and as interpolation
+        parameters for color-mix().
+
+        OKLab (and its polar form OKLCH) is a relatively new Lab-like colorspace that aims
+        to be an improved (improved hue linearity, hue uniformity, and chroma uniformity)
+        Lab. It was create by Björn Ottosson and is documented at https://bottosson.github.io/posts/oklab/.
+
+        * css/CSSValueKeywords.in:
+        Add 'oklab' and 'oklch' to the keyword list so they can be used as function
+        identifiers. Remove old mention of 'lab' in the color() function section, 
+        since 'lab' is no longer a valid colorspace to use in the color() function
+        (rather, only lab() is supported).
+
+        * css/parser/CSSPropertyParserHelpers.cpp:
+        (WebCore::CSSPropertyParserHelpers::parseLabParameters):
+        (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters):
+        (WebCore::CSSPropertyParserHelpers::parseNonRelativeLabParameters):
+        (WebCore::CSSPropertyParserHelpers::parseLCHParameters):
+        (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters):
+        (WebCore::CSSPropertyParserHelpers::parseNonRelativeLCHParameters):
+        (WebCore::CSSPropertyParserHelpers::parseColorFunction):
+        Generalize lab and lch function parsing to also support the oklab and
+        oklch variants (they have the same parsing rules).
+
+        (WebCore::CSSPropertyParserHelpers::consumeColorMixColorSpaceAndComma):
+        (WebCore::CSSPropertyParserHelpers::mixColorComponents):
+        Add support for using oklab and oklch as the interpolation space of a color-mix().
+        This was already generalized so all it meant doing was adding mappings of the
+        new identifiers to enums and mixColorComponentsInColorSpace calls.
+
+        * platform/graphics/ColorComponents.h:
+        (WebCore::ColorComponents::subset const):
+        Fix compile error (no one had used subset yet it seems). 'std::remove_const_t<decltype(T::Size)>'
+        was likely copied from mapColorComponents() where it is templatized and needs to deduce the loop
+        variable, but that is not needed here.
+
+        * platform/graphics/ColorConversion.cpp:
+        (WebCore::convertToPolarForm):
+        (WebCore::convertToRectangularForm):
+        Move conversion to/from polar/rectangular forms from the LCHA conversion
+        code here, so that it can be reused for OKLCHA.
+
+        (WebCore::OKLab<float>>::convert):
+        Add support for converting OKLab to/from XYZ D65. Matrix values come from https://bottosson.github.io/posts/oklab/
+        with updates from https://github.com/w3c/csswg-drafts/issues/6642#issuecomment-943521484
+
+        (WebCore::OKLCHA<float>>::convert):
+        Add support for converting OKLCHA. This is identical to the LCHA code above.
+
+        (WebCore::converColorComponents):
+        Add cases for new colorspaces.
+
+        * platform/graphics/ColorConversion.h:
+        Add converters for new colorspaces. Update diagram with them as well.
+
+        * platform/graphics/ColorMatrix.h:
+        (WebCore::ColorMatrix::transformedColorComponents const):
+        Generalize transformedColorComponents to work with any size ColorComponents object. This allows
+        the OKLab conversion code to be a bit simpler as it can operate on just the non-alpha components
+        in a more systematic way.
+
+        * platform/graphics/ColorModels.h:
+        Add new predicate template variables to help when needing to check what model a particular
+        color type uses.
+
+        * platform/graphics/ColorSerialization.cpp:
+        (WebCore::serialization):
+        (WebCore::serializationForCSS):
+        (WebCore::serializationForHTML):
+        (WebCore::serializationForRenderTreeAsText):
+        Add serialization support for new colorspaces. Also removes unused support for serializing lab
+        colors using the color(lab ...) syntax which has not been supported for some time.
+
+        * platform/graphics/ColorSpace.cpp:
+        * platform/graphics/ColorSpace.h:
+        * platform/graphics/cg/ColorSpaceCG.h:
+        Add OKLab and OKLCH to the list of enumerated colorspaces and add mappings to their
+        newly defined types OKLab<T> and OKLCHA<T>.
+
+        * platform/graphics/ColorTypes.h:
+        (WebCore::OKLab::OKLab):
+        (WebCore::OKLCHA::OKLCHA):
+        Add new types OKLab<T> and OKLCHA<T> (it looks like at some point an earlier version of this
+        must have partially landed as there were existing forward declarations). Like Lab<T> and LCHA<T>,
+        these new types use the LabModel<T> and LCHModel<T> models, but unlike them they use a whitepoint
+        of D65.
+
+        * platform/graphics/ColorUtilities.h:
+        Generalize isBlack and isWhite to have a variant that works with Lab, LCH, OKLab and OKLCH (as they
+        all are identical) using SFINAE, use the new model predicates to make this more clear.
+
 2021-11-27  Alan Bujtas  <zalan@apple.com>
 
         [LFC][IFC] Decouple display box construction for bidi and non-bidi content
diff --git a/Source/WebCore/css/CSSValueKeywords.in b/Source/WebCore/css/CSSValueKeywords.in
index c35a559..ae74056 100644
--- a/Source/WebCore/css/CSSValueKeywords.in
+++ b/Source/WebCore/css/CSSValueKeywords.in
@@ -1284,6 +1284,8 @@
 hwb
 lab
 lch
+oklab
+oklch
 //color
 
 // relative color identifiers
@@ -1465,7 +1467,6 @@
 // color() function
 a98-rgb
 display-p3
-// lab
 prophoto-rgb
 // rec2020
 // sRGB
diff --git a/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp b/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp
index 1f97e08..d38e834 100644
--- a/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp
+++ b/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp
@@ -1832,7 +1832,7 @@
     return parseNonRelativeHWBParameters(args, context);
 }
 
-template<typename ConsumerForLightness, typename ConsumerForAB, typename ConsumerForAlpha>
+template<typename ColorType, typename ConsumerForLightness, typename ConsumerForAB, typename ConsumerForAlpha>
 static Color parseLabParameters(CSSParserTokenRange& args, ConsumerForLightness&& lightnessConsumer, ConsumerForAB&& abConsumer, ConsumerForAlpha&& alphaConsumer)
 {
     auto lightness = lightnessConsumer(args);
@@ -1856,9 +1856,10 @@
 
     auto normalizedLightness = std::max(0.0, *lightness);
 
-    return Lab<float> { static_cast<float>(normalizedLightness), static_cast<float>(*aValue), static_cast<float>(*bValue), static_cast<float>(*alpha) };
+    return ColorType { static_cast<float>(normalizedLightness), static_cast<float>(*aValue), static_cast<float>(*bValue), static_cast<float>(*alpha) };
 }
 
+template<typename ColorType>
 static Color parseRelativeLabParameters(CSSParserTokenRange& args, const CSSParserContext& context)
 {
     ASSERT(args.peek().id() == CSSValueFrom);
@@ -1868,7 +1869,7 @@
     if (!originColor.isValid())
         return { };
 
-    auto originColorAsLab = originColor.toColorTypeLossy<Lab<float>>();
+    auto originColorAsLab = originColor.toColorTypeLossy<ColorType>();
 
     CSSCalcSymbolTable symbolTable {
         { CSSValueL, CSSUnitType::CSS_PERCENTAGE, originColorAsLab.lightness },
@@ -1881,21 +1882,23 @@
     auto abConsumer = [&symbolTable](auto& args) { return consumeNumberAllowingSymbolTableIdent(args, symbolTable); };
     auto alphaConsumer = [&symbolTable](auto& args) { return consumeOptionalAlphaAllowingSymbolTableIdent(args, symbolTable); };
 
-    return parseLabParameters(args, WTFMove(lightnessConsumer), WTFMove(abConsumer), WTFMove(alphaConsumer));
+    return parseLabParameters<ColorType>(args, WTFMove(lightnessConsumer), WTFMove(abConsumer), WTFMove(alphaConsumer));
 }
 
+template<typename ColorType>
 static Color parseNonRelativeLabParameters(CSSParserTokenRange& args)
 {
     auto lightnessConsumer = [](auto& args) { return consumePercentRaw(args); };
     auto abConsumer = [](auto& args) { return consumeNumberRaw(args); };
     auto alphaConsumer = [](auto& args) { return consumeOptionalAlpha(args); };
 
-    return parseLabParameters(args, WTFMove(lightnessConsumer), WTFMove(abConsumer), WTFMove(alphaConsumer));
+    return parseLabParameters<ColorType>(args, WTFMove(lightnessConsumer), WTFMove(abConsumer), WTFMove(alphaConsumer));
 }
 
+template<typename ColorType>
 static Color parseLabParameters(CSSParserTokenRange& range, const CSSParserContext& context)
 {
-    ASSERT(range.peek().functionId() == CSSValueLab);
+    ASSERT(range.peek().functionId() == CSSValueLab || range.peek().functionId() == CSSValueOklab);
 
     if (!context.cssColor4)
         return { };
@@ -1903,11 +1906,11 @@
     auto args = consumeFunction(range);
 
     if (context.relativeColorSyntaxEnabled && args.peek().id() == CSSValueFrom)
-        return parseRelativeLabParameters(args, context);
-    return parseNonRelativeLabParameters(args);
+        return parseRelativeLabParameters<ColorType>(args, context);
+    return parseNonRelativeLabParameters<ColorType>(args);
 }
 
-template<typename ConsumerForLightness, typename ConsumerForChroma, typename ConsumerForHue, typename ConsumerForAlpha>
+template<typename ColorType, typename ConsumerForLightness, typename ConsumerForChroma, typename ConsumerForHue, typename ConsumerForAlpha>
 static Color parseLCHParameters(CSSParserTokenRange& args, ConsumerForLightness&& lightnessConsumer, ConsumerForChroma&& chromaConsumer, ConsumerForHue&& hueConsumer, ConsumerForAlpha&& alphaConsumer)
 {
     auto lightness = lightnessConsumer(args);
@@ -1933,9 +1936,10 @@
     auto normalizedChroma = std::max(0.0, *chroma);
     auto normalizedHue = normalizeHue(*hue);
 
-    return LCHA<float> { static_cast<float>(normalizedLightness), static_cast<float>(normalizedChroma), static_cast<float>(normalizedHue), static_cast<float>(*alpha) };
+    return ColorType { static_cast<float>(normalizedLightness), static_cast<float>(normalizedChroma), static_cast<float>(normalizedHue), static_cast<float>(*alpha) };
 }
 
+template<typename ColorType>
 static Color parseRelativeLCHParameters(CSSParserTokenRange& args, const CSSParserContext& context)
 {
     ASSERT(args.peek().id() == CSSValueFrom);
@@ -1945,7 +1949,7 @@
     if (!originColor.isValid())
         return { };
 
-    auto originColorAsLCH = originColor.toColorTypeLossy<LCHA<float>>();
+    auto originColorAsLCH = originColor.toColorTypeLossy<ColorType>();
 
     CSSCalcSymbolTable symbolTable {
         { CSSValueL, CSSUnitType::CSS_PERCENTAGE, originColorAsLCH.lightness },
@@ -1959,9 +1963,10 @@
     auto hueConsumer = [&symbolTable, &context](auto& args) { return consumeAngleRawOrNumberRawAllowingSymbolTableIdent(args, symbolTable, context.mode); };
     auto alphaConsumer = [&symbolTable](auto& args) { return consumeOptionalAlphaAllowingSymbolTableIdent(args, symbolTable); };
 
-    return parseLCHParameters(args, WTFMove(lightnessConsumer), WTFMove(chromaConsumer), WTFMove(hueConsumer), WTFMove(alphaConsumer));
+    return parseLCHParameters<ColorType>(args, WTFMove(lightnessConsumer), WTFMove(chromaConsumer), WTFMove(hueConsumer), WTFMove(alphaConsumer));
 }
 
+template<typename ColorType>
 static Color parseNonRelativeLCHParameters(CSSParserTokenRange& args, const CSSParserContext& context)
 {
     auto lightnessConsumer = [](auto& args) { return consumePercentRaw(args); };
@@ -1969,12 +1974,13 @@
     auto hueConsumer = [&context](auto& args) { return consumeAngleRawOrNumberRaw(args, context.mode); };
     auto alphaConsumer = [](auto& args) { return consumeOptionalAlpha(args); };
 
-    return parseLCHParameters(args, WTFMove(lightnessConsumer), WTFMove(chromaConsumer), WTFMove(hueConsumer), WTFMove(alphaConsumer));
+    return parseLCHParameters<ColorType>(args, WTFMove(lightnessConsumer), WTFMove(chromaConsumer), WTFMove(hueConsumer), WTFMove(alphaConsumer));
 }
 
+template<typename ColorType>
 static Color parseLCHParameters(CSSParserTokenRange& range, const CSSParserContext& context)
 {
-    ASSERT(range.peek().functionId() == CSSValueLch);
+    ASSERT(range.peek().functionId() == CSSValueLch || range.peek().functionId() == CSSValueOklch);
 
     if (!context.cssColor4)
         return { };
@@ -1982,8 +1988,8 @@
     auto args = consumeFunction(range);
 
     if (context.relativeColorSyntaxEnabled && args.peek().id() == CSSValueFrom)
-        return parseRelativeLCHParameters(args, context);
-    return parseNonRelativeLCHParameters(args, context);
+        return parseRelativeLCHParameters<ColorType>(args, context);
+    return parseNonRelativeLCHParameters<ColorType>(args, context);
 }
 
 template<typename ColorType, typename ConsumerForRGB, typename ConsumerForAlpha>
@@ -2289,6 +2295,8 @@
     Hwb,
     Lab,
     Lch,
+    Oklab,
+    Oklch,
     Srgb,
     XyzD50,
     XyzD65
@@ -2312,6 +2320,10 @@
         return consumeIdentAndComma(args, ColorMixColorSpace::Lab);
     case CSSValueLch:
         return consumeIdentAndComma(args, ColorMixColorSpace::Lch);
+    case CSSValueOklab:
+        return consumeIdentAndComma(args, ColorMixColorSpace::Oklab);
+    case CSSValueOklch:
+        return consumeIdentAndComma(args, ColorMixColorSpace::Oklch);
     case CSSValueSRGB:
         return consumeIdentAndComma(args, ColorMixColorSpace::Srgb);
     case CSSValueXyzD50:
@@ -2467,6 +2479,10 @@
         return mixColorComponentsInColorSpace<Lab<float>>(mixPercentages, mixComponents1.color, mixComponents2.color);
     case ColorMixColorSpace::Lch:
         return mixColorComponentsInColorSpace<LCHA<float>>(mixPercentages, mixComponents1.color, mixComponents2.color);
+    case ColorMixColorSpace::Oklab:
+        return mixColorComponentsInColorSpace<OKLab<float>>(mixPercentages, mixComponents1.color, mixComponents2.color);
+    case ColorMixColorSpace::Oklch:
+        return mixColorComponentsInColorSpace<OKLCHA<float>>(mixPercentages, mixComponents1.color, mixComponents2.color);
     case ColorMixColorSpace::Srgb:
         return mixColorComponentsInColorSpace<SRGBA<float>>(mixPercentages, mixComponents1.color, mixComponents2.color);
     case ColorMixColorSpace::XyzD50:
@@ -2574,10 +2590,16 @@
         color = parseHWBParameters(colorRange, context);
         break;
     case CSSValueLab:
-        color = parseLabParameters(colorRange, context);
+        color = parseLabParameters<Lab<float>>(colorRange, context);
         break;
     case CSSValueLch:
-        color = parseLCHParameters(colorRange, context);
+        color = parseLCHParameters<LCHA<float>>(colorRange, context);
+        break;
+    case CSSValueOklab:
+        color = parseLabParameters<OKLab<float>>(colorRange, context);
+        break;
+    case CSSValueOklch:
+        color = parseLCHParameters<OKLCHA<float>>(colorRange, context);
         break;
     case CSSValueColor:
         color = parseColorFunctionParameters(colorRange, context);
diff --git a/Source/WebCore/platform/graphics/ColorComponents.h b/Source/WebCore/platform/graphics/ColorComponents.h
index e17d004..9723fa6 100644
--- a/Source/WebCore/platform/graphics/ColorComponents.h
+++ b/Source/WebCore/platform/graphics/ColorComponents.h
@@ -135,7 +135,7 @@
 constexpr ColorComponents<T, End - Start> ColorComponents<T, N>::subset() const
 {
     ColorComponents<T, End - Start> result;
-    for (std::remove_const_t<decltype(T::Size)> i = Start; i < End; ++i)
+    for (size_t i = Start; i < End; ++i)
         result[i - Start] = components[i];
     return result;
 }
diff --git a/Source/WebCore/platform/graphics/ColorConversion.cpp b/Source/WebCore/platform/graphics/ColorConversion.cpp
index a6a78c5..dcbb070 100644
--- a/Source/WebCore/platform/graphics/ColorConversion.cpp
+++ b/Source/WebCore/platform/graphics/ColorConversion.cpp
@@ -33,6 +33,36 @@
 
 namespace WebCore {
 
+// MARK: Lab-Like to LCH-Like conversion utilities.
+
+template<typename LCHLike, typename LabLike>
+LCHLike convertToPolarForm(const LabLike& color)
+{
+    // https://drafts.csswg.org/css-color/#lab-to-lch
+    float hue = rad2deg(atan2(color.b, color.a));
+
+    return {
+        color.lightness,
+        std::hypot(color.a, color.b),
+        hue >= 0 ? hue : hue + 360,
+        color.alpha
+    };
+}
+
+template<typename LabLike, typename LCHLike>
+LabLike convertToRectangularForm(const LCHLike& color)
+{
+    // https://drafts.csswg.org/css-color/#lch-to-lab
+    float hueAngleRadians = deg2rad(color.hue);
+
+    return {
+        color.lightness,
+        color.chroma * std::cos(hueAngleRadians),
+        color.chroma * std::sin(hueAngleRadians),
+        color.alpha
+    };
+}
+
 // MARK: HSL conversions.
 
 struct HSLHueCalculationResult {
@@ -244,33 +274,99 @@
     return { lightness, a, b, color.alpha };
 }
 
-
 // MARK: LCH conversions.
 
 LCHA<float> ColorConversion<LCHA<float>, Lab<float>>::convert(const Lab<float>& color)
 {
-    // https://www.w3.org/TR/css-color-4/#lab-to-lch
-    float hue = rad2deg(atan2(color.b, color.a));
-
-    return {
-        color.lightness,
-        std::hypot(color.a, color.b),
-        hue >= 0 ? hue : hue + 360,
-        color.alpha
-    };
+    return convertToPolarForm<LCHA<float>>(color);
 }
 
 Lab<float> ColorConversion<Lab<float>, LCHA<float>>::convert(const LCHA<float>& color)
 {
-    // https://www.w3.org/TR/css-color-4/#lch-to-lab
-    float hueAngleRadians = deg2rad(color.hue);
+    return convertToRectangularForm<Lab<float>>(color);
+}
 
-    return {
-        color.lightness,
-        color.chroma * std::cos(hueAngleRadians),
-        color.chroma * std::sin(hueAngleRadians),
-        color.alpha
+// MARK: OKLab conversions.
+
+XYZA<float, WhitePoint::D65> ColorConversion<XYZA<float, WhitePoint::D65>, OKLab<float>>::convert(const OKLab<float>& color)
+{
+    // FIXME: This could be optimized for when we are not explicitly converting to XYZ-D65 by pre-multiplying the 'LMSToXYZD65'
+    // matrix with any subsequent matrices in the conversion. This would mean teaching the main conversion about this matrix
+    // and adding new logic for this transform.
+
+    // https://bottosson.github.io/posts/oklab/ with XYZ <-> LMS matrices recalculated for consistent reference white in https://github.com/w3c/csswg-drafts/issues/6642#issuecomment-943521484
+
+    static constexpr ColorMatrix<3, 3> LinearLMSToXYZD65 {
+        1.2268798733741557f,  -0.5578149965554813f,  0.28139105017721583f,
+       -0.04057576262431372f,  1.1122868293970594f, -0.07171106666151701f,
+       -0.07637294974672142f, -0.4214933239627914f,  1.5869240244272418f
     };
+
+    static constexpr ColorMatrix<3, 3> OKLabToNonLinearLMS {
+        0.99999999845051981432f,  0.39633779217376785678f,   0.21580375806075880339f,
+        1.0000000088817607767f,  -0.1055613423236563494f,   -0.063854174771705903402f,
+        1.0000000546724109177f,  -0.089484182094965759684f, -1.2914855378640917399f
+    };
+
+    // 1. Transform from precentage lightness to unit lightness.
+    auto components = asColorComponents(color).subset<0, 3>();
+    components[0] = components[0] / 100.0f;
+
+    // 2. Transform from Lab-coordinates into non-linear LMS "approximate cone responses".
+    auto nonLinearLMS = OKLabToNonLinearLMS.transformedColorComponents(components);
+
+    // 3. Apply linearity.
+    auto linearLMS = nonLinearLMS.map([] (float v) { return v * v * v; });
+
+    // 4. Convert to XYZ.
+    auto [x, y, z] = LinearLMSToXYZD65.transformedColorComponents(linearLMS);
+
+    return { x, y, z, color.alpha };
+}
+
+OKLab<float> ColorConversion<OKLab<float>, XYZA<float, WhitePoint::D65>>::convert(const XYZA<float, WhitePoint::D65>& color)
+{
+    // FIXME: This could be optimized for when we are not explicitly converting from XYZ-D65 by pre-multiplying the 'XYZD65ToLMS'
+    // matrix with any previous matrices in the conversion. This would mean teaching the main conversion about this matrix
+    // and adding new logic for this transform.
+
+    // https://bottosson.github.io/posts/oklab/ with XYZ <-> LMS matrices recalculated for consistent reference white in https://github.com/w3c/csswg-drafts/issues/6642#issuecomment-943521484
+
+    static constexpr ColorMatrix<3, 3> XYZD65ToLinearLMS {
+        0.8190224432164319f,   0.3619062562801221f, -0.12887378261216414f,
+        0.0329836671980271f,   0.9292868468965546f,  0.03614466816999844f,
+        0.048177199566046255f, 0.26423952494422764f, 0.6335478258136937f
+    };
+
+    static constexpr ColorMatrix<3, 3> NonLinearLMSToOKLab {
+        0.2104542553f,  0.7936177850f, -0.0040720468f,
+        1.9779984951f, -2.4285922050f,  0.4505937099f,
+        0.0259040371f,  0.7827717662f, -0.8086757660f
+    };
+
+    // 1. Convert XYZ into LMS "approximate cone responses".
+    auto linearLMS = XYZD65ToLinearLMS.transformedColorComponents(asColorComponents(color).subset<0, 3>());
+
+    // 2. Apply non-linearity.
+    auto nonLinearLMS = linearLMS.map([] (float v) { return std::cbrt(v); });
+
+    // 3. Transform into Lab-coordinates.
+    auto [lightness, a, b] = NonLinearLMSToOKLab.transformedColorComponents(nonLinearLMS);
+
+    // 4. Transform lightness from unit lightness to percentage lightness.
+    return { lightness * 100.0f, a, b, color.alpha };
+}
+
+// MARK: OKLCH conversions.
+
+OKLCHA<float> ColorConversion<OKLCHA<float>, OKLab<float>>::convert(const OKLab<float>& color)
+{
+    return convertToPolarForm<OKLCHA<float>>(color);
+}
+
+OKLab<float> ColorConversion<OKLab<float>, OKLCHA<float>>::convert(const OKLCHA<float>& color)
+{
+    return convertToRectangularForm<OKLab<float>>(color);
 }
 
 // MARK: Conversion functions for raw color components with associated color spaces.
@@ -289,6 +385,10 @@
             return asColorComponents(convertColor<Lab<float>>(inputColor));
         case ColorSpace::LinearSRGB:
             return asColorComponents(convertColor<LinearSRGBA<float>>(inputColor));
+        case ColorSpace::OKLCH:
+            return asColorComponents(convertColor<OKLCHA<float>>(inputColor));
+        case ColorSpace::OKLab:
+            return asColorComponents(convertColor<OKLab<float>>(inputColor));
         case ColorSpace::ProPhotoRGB:
             return asColorComponents(convertColor<ProPhotoRGB<float>>(inputColor));
         case ColorSpace::Rec2020:
diff --git a/Source/WebCore/platform/graphics/ColorConversion.h b/Source/WebCore/platform/graphics/ColorConversion.h
index 0e621fc..92d108c 100644
--- a/Source/WebCore/platform/graphics/ColorConversion.h
+++ b/Source/WebCore/platform/graphics/ColorConversion.h
@@ -114,6 +114,22 @@
     WEBCORE_EXPORT static Lab<float> convert(const XYZA<float, WhitePoint::D50>&);
 };
 
+// MARK: OKLCHA
+template<> struct ColorConversion<OKLab<float>, OKLCHA<float>> {
+    WEBCORE_EXPORT static OKLab<float> convert(const OKLCHA<float>&);
+};
+template<> struct ColorConversion<OKLCHA<float>, OKLab<float>> {
+    WEBCORE_EXPORT static OKLCHA<float> convert(const OKLab<float>&);
+};
+
+// MARK: OKLab
+template<> struct ColorConversion<XYZA<float, WhitePoint::D65>, OKLab<float>> {
+    WEBCORE_EXPORT static XYZA<float, WhitePoint::D65> convert(const OKLab<float>&);
+};
+template<> struct ColorConversion<OKLab<float>, XYZA<float, WhitePoint::D65>> {
+    WEBCORE_EXPORT static OKLab<float> convert(const XYZA<float, WhitePoint::D65>&);
+};
+
 // Identity conversion.
 
 template<typename ColorType> struct ColorConversion<ColorType, ColorType> {
@@ -131,24 +147,24 @@
 //                │                      │ XYZ (D50) │││ XYZ (D65) │                                                                                                                      │
 //                                       └─────▲─────┘│└─────▲─────┘
 //                │                            │      │      │                                                                                                                            │
-//       ┌─────────────────────────┬───────────┘      │      └───────────┬───────────────────────────────┬───────────────────────────────┬───────────────────────────────┐
-//       │        │                │                  │                  │                               │                               │                               │                │
-//       │                         │                  │                  │                               │                               │                               │
-//       │        │                │                  │                  │                               │                               │                               │                │
-//       │          ProPhotoRGB───────────────────┐   │   SRGB──────────────────────────┐ DisplayP3─────────────────────┐ A98RGB────────────────────────┐ Rec2020───────────────────────┐
-//       │        │ │┌────────┐ ┌────────────────┐│   │   │┌────────┐ ┌────────────────┐│ │┌────────┐ ┌────────────────┐│ │┌────────┐ ┌────────────────┐│ │┌────────┐ ┌────────────────┐│ │
-//       │          ││ Linear │ │ LinearExtended ││   │   ││ Linear │ │ LinearExtended ││ ││ Linear │ │ LinearExtended ││ ││ Linear │ │ LinearExtended ││ ││ Linear │ │ LinearExtended ││
-//       │        │ │└────────┘ └────────────────┘│   │   │└────────┘ └────────────────┘│ │└────────┘ └────────────────┘│ │└────────┘ └────────────────┘│ │└────────┘ └────────────────┘│ │
-//       │         ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─│─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─
-// ┌───────────┐    │┌────────┐ ┌────────────────┐│   │   │┌────────┐ ┌────────────────┐│ │┌────────┐ ┌────────────────┐│ │┌────────┐ ┌────────────────┐│ │┌────────┐ ┌────────────────┐│
-// │    Lab    │    ││ Gamma  │ │ GammaExtended  ││   │   ││ Gamma  │ │ GammaExtended  ││ ││ Gamma  │ │ GammaExtended  ││ ││ Gamma  │ │ GammaExtended  ││ ││ Gamma  │ │ GammaExtended  ││
-// └─────▲─────┘    │└────────┘ └────────────────┘│   │   │└────▲───┘ └────────────────┘│ │└────────┘ └────────────────┘│ │└────────┘ └────────────────┘│ │└────────┘ └────────────────┘│
-//       │          └─────────────────────────────┘   │   └─────┼───────────────────────┘ └─────────────────────────────┘ └─────────────────────────────┘ └─────────────────────────────┘
-//       │                                            │      ┌──┴──────────┐
-//       │                                            │      │             │
-// ┌───────────┐                                      │┌───────────┐ ┌───────────┐
-// │    LCH    │                                      ││    HSL    │ │    HWB    │
-// └───────────┘                                      │└───────────┘ └───────────┘
+//       ┌─────────────────────────┬───────────┘      │      └───────────┬───────────────────────────────┬───────────────────────────────┬───────────────────────────────┬─────────────────────────┐
+//       │        │                │                  │                  │                               │                               │                               │                │        │
+//       │                         │                  │                  │                               │                               │                               │                         │
+//       │        │                │                  │                  │                               │                               │                               │                │        │
+//       │          ProPhotoRGB───────────────────┐   │   SRGB──────────────────────────┐ DisplayP3─────────────────────┐ A98RGB────────────────────────┐ Rec2020───────────────────────┐          │
+//       │        │ │┌────────┐ ┌────────────────┐│   │   │┌────────┐ ┌────────────────┐│ │┌────────┐ ┌────────────────┐│ │┌────────┐ ┌────────────────┐│ │┌────────┐ ┌────────────────┐│ │        │
+//       │          ││ Linear │ │ LinearExtended ││   │   ││ Linear │ │ LinearExtended ││ ││ Linear │ │ LinearExtended ││ ││ Linear │ │ LinearExtended ││ ││ Linear │ │ LinearExtended ││          │
+//       │        │ │└────────┘ └────────────────┘│   │   │└────────┘ └────────────────┘│ │└────────┘ └────────────────┘│ │└────────┘ └────────────────┘│ │└────────┘ └────────────────┘│ │        │
+//       │         ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─│─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─         │
+// ┌───────────┐    │┌────────┐ ┌────────────────┐│   │   │┌────────┐ ┌────────────────┐│ │┌────────┐ ┌────────────────┐│ │┌────────┐ ┌────────────────┐│ │┌────────┐ ┌────────────────┐│    ┌───────────┐
+// │    Lab    │    ││ Gamma  │ │ GammaExtended  ││   │   ││ Gamma  │ │ GammaExtended  ││ ││ Gamma  │ │ GammaExtended  ││ ││ Gamma  │ │ GammaExtended  ││ ││ Gamma  │ │ GammaExtended  ││    │   OKLab   │
+// └─────▲─────┘    │└────────┘ └────────────────┘│   │   │└────▲───┘ └────────────────┘│ │└────────┘ └────────────────┘│ │└────────┘ └────────────────┘│ │└────────┘ └────────────────┘│    └─────▲─────┘
+//       │          └─────────────────────────────┘   │   └─────┼───────────────────────┘ └─────────────────────────────┘ └─────────────────────────────┘ └─────────────────────────────┘          │
+//       │                                            │      ┌──┴──────────┐                                                                                                                       │
+//       │                                            │      │             │                                                                                                                       │
+// ┌───────────┐                                      │┌───────────┐ ┌───────────┐                                                                                                           ┌───────────┐
+// │    LCH    │                                      ││    HSL    │ │    HWB    │                                                                                                           │   OKLCH   │
+// └───────────┘                                      │└───────────┘ └───────────┘                                                                                                           └───────────┘
 
 template<typename Output, typename Input, typename> struct ColorConversion {
 public:
diff --git a/Source/WebCore/platform/graphics/ColorMatrix.h b/Source/WebCore/platform/graphics/ColorMatrix.h
index af0b5039..f32b496 100644
--- a/Source/WebCore/platform/graphics/ColorMatrix.h
+++ b/Source/WebCore/platform/graphics/ColorMatrix.h
@@ -42,7 +42,8 @@
         static_assert(sizeof...(Ts) == RowCount * ColumnCount);
     }
 
-    constexpr ColorComponents<float, 4> transformedColorComponents(const ColorComponents<float, 4>&) const;
+    template<size_t NumberOfComponents>
+    constexpr ColorComponents<float, NumberOfComponents> transformedColorComponents(const ColorComponents<float, NumberOfComponents>&) const;
 
     constexpr float at(size_t row, size_t column) const
     {
@@ -120,24 +121,25 @@
 }
 
 template<size_t ColumnCount, size_t RowCount>
-constexpr ColorComponents<float, 4> ColorMatrix<ColumnCount, RowCount>::transformedColorComponents(const ColorComponents<float, 4>& inputVector) const
+template<size_t NumberOfComponents>
+constexpr auto ColorMatrix<ColumnCount, RowCount>::transformedColorComponents(const ColorComponents<float, NumberOfComponents>& inputVector) const -> ColorComponents<float, NumberOfComponents>
 {
-    static_assert(ColorComponents<float, 4>::Size >= RowCount);
+    static_assert(ColorComponents<float, NumberOfComponents>::Size >= RowCount);
     
-    ColorComponents<float, 4> result;
+    ColorComponents<float, NumberOfComponents> result;
     for (size_t row = 0; row < RowCount; ++row) {
-        if constexpr (ColumnCount <= ColorComponents<float, 4>::Size) {
+        if constexpr (ColumnCount <= ColorComponents<float, NumberOfComponents>::Size) {
             for (size_t column = 0; column < ColumnCount; ++column)
                 result[row] += at(row, column) * inputVector[column];
-        } else if constexpr (ColumnCount > ColorComponents<float, 4>::Size) {
-            for (size_t column = 0; column < ColorComponents<float, 4>::Size; ++column)
+        } else if constexpr (ColumnCount > ColorComponents<float, NumberOfComponents>::Size) {
+            for (size_t column = 0; column < ColorComponents<float, NumberOfComponents>::Size; ++column)
                 result[row] += at(row, column) * inputVector[column];
-            for (size_t additionalColumn = ColorComponents<float, 4>::Size; additionalColumn < ColumnCount; ++additionalColumn)
+            for (size_t additionalColumn = ColorComponents<float, NumberOfComponents>::Size; additionalColumn < ColumnCount; ++additionalColumn)
                 result[row] += at(row, additionalColumn);
         }
     }
-    if constexpr (ColorComponents<float, 4>::Size > RowCount) {
-        for (size_t additionalRow = RowCount; additionalRow < ColorComponents<float, 4>::Size; ++additionalRow)
+    if constexpr (ColorComponents<float, NumberOfComponents>::Size > RowCount) {
+        for (size_t additionalRow = RowCount; additionalRow < ColorComponents<float, NumberOfComponents>::Size; ++additionalRow)
             result[additionalRow] = inputVector[additionalRow];
     }
 
diff --git a/Source/WebCore/platform/graphics/ColorModels.h b/Source/WebCore/platform/graphics/ColorModels.h
index 965734d..03914c9 100644
--- a/Source/WebCore/platform/graphics/ColorModels.h
+++ b/Source/WebCore/platform/graphics/ColorModels.h
@@ -72,6 +72,8 @@
     static constexpr bool isInvertible = false;
 };
 
+template<typename ColorType> inline constexpr bool UsesExtendedRGBModel = std::is_same_v<typename ColorType::Model, ExtendedRGBModel<typename ColorType::ComponentType>>;
+
 template<> struct HSLModel<float> {
     static constexpr std::array<ColorComponentInfo<float>, 3> componentInfo { {
         { 0, 360, ColorComponentType::Angle },
@@ -81,6 +83,8 @@
     static constexpr bool isInvertible = false;
 };
 
+template<typename ColorType> inline constexpr bool UsesHSLModel = std::is_same_v<typename ColorType::Model, HSLModel<typename ColorType::ComponentType>>;
+
 template<> struct HWBModel<float> {
     static constexpr std::array<ColorComponentInfo<float>, 3> componentInfo { {
         { 0, 360, ColorComponentType::Angle },
@@ -90,6 +94,8 @@
     static constexpr bool isInvertible = false;
 };
 
+template<typename ColorType> inline constexpr bool UsesHWBModel = std::is_same_v<typename ColorType::Model, HWBModel<typename ColorType::ComponentType>>;
+
 template<> struct LabModel<float> {
     static constexpr std::array<ColorComponentInfo<float>, 3> componentInfo { {
         { 0, std::numeric_limits<float>::infinity(), ColorComponentType::Number },
@@ -99,6 +105,8 @@
     static constexpr bool isInvertible = false;
 };
 
+template<typename ColorType> inline constexpr bool UsesLabModel = std::is_same_v<typename ColorType::Model, LabModel<typename ColorType::ComponentType>>;
+
 template<> struct LCHModel<float> {
     static constexpr std::array<ColorComponentInfo<float>, 3> componentInfo { {
         { 0, std::numeric_limits<float>::infinity(), ColorComponentType::Number },
@@ -108,6 +116,8 @@
     static constexpr bool isInvertible = false;
 };
 
+template<typename ColorType> inline constexpr bool UsesLCHModel = std::is_same_v<typename ColorType::Model, LCHModel<typename ColorType::ComponentType>>;
+
 template<> struct RGBModel<float> {
     static constexpr std::array<ColorComponentInfo<float>, 3> componentInfo { {
         { 0, 1, ColorComponentType::Number },
@@ -126,6 +136,8 @@
     static constexpr bool isInvertible = true;
 };
 
+template<typename ColorType> inline constexpr bool UsesRGBModel = std::is_same_v<typename ColorType::Model, RGBModel<typename ColorType::ComponentType>>;
+
 template<> struct XYZModel<float> {
     static constexpr std::array<ColorComponentInfo<float>, 3> componentInfo { {
         { -std::numeric_limits<float>::infinity(), std::numeric_limits<float>::infinity(), ColorComponentType::Number },
@@ -135,4 +147,6 @@
     static constexpr bool isInvertible = false;
 };
 
+template<typename ColorType> inline constexpr bool UsesXYZModel = std::is_same_v<typename ColorType::Model, XYZModel<typename ColorType::ComponentType>>;
+
 }
diff --git a/Source/WebCore/platform/graphics/ColorSerialization.cpp b/Source/WebCore/platform/graphics/ColorSerialization.cpp
index 0701efb..564c545 100644
--- a/Source/WebCore/platform/graphics/ColorSerialization.cpp
+++ b/Source/WebCore/platform/graphics/ColorSerialization.cpp
@@ -55,6 +55,14 @@
 static String serializationForHTML(const LinearSRGBA<float>&, bool useColorFunctionSerialization);
 static String serializationForRenderTreeAsText(const LinearSRGBA<float>&, bool useColorFunctionSerialization);
 
+static String serializationForCSS(const OKLCHA<float>&, bool useColorFunctionSerialization);
+static String serializationForHTML(const OKLCHA<float>&, bool useColorFunctionSerialization);
+static String serializationForRenderTreeAsText(const OKLCHA<float>&, bool useColorFunctionSerialization);
+
+static String serializationForCSS(const OKLab<float>&, bool useColorFunctionSerialization);
+static String serializationForHTML(const OKLab<float>&, bool useColorFunctionSerialization);
+static String serializationForRenderTreeAsText(const OKLab<float>&, bool useColorFunctionSerialization);
+
 static String serializationForCSS(const ProPhotoRGB<float>&, bool useColorFunctionSerialization);
 static String serializationForHTML(const ProPhotoRGB<float>&, bool useColorFunctionSerialization);
 static String serializationForRenderTreeAsText(const ProPhotoRGB<float>&, bool useColorFunctionSerialization);
@@ -114,6 +122,10 @@
         return "lab"_s;
     case ColorSpace::LinearSRGB:
         return "srgb-linear"_s;
+    case ColorSpace::OKLCH:
+        return "oklch"_s;
+    case ColorSpace::OKLab:
+        return "oklab"_s;
     case ColorSpace::ProPhotoRGB:
         return "prophoto-rgb"_s;
     case ColorSpace::Rec2020:
@@ -140,14 +152,6 @@
     return makeString("color(", serialization(ColorSpaceFor<ColorType>), ' ', c1, ' ', c2, ' ', c3, " / ", alpha, ')');
 }
 
-static String serializationUsingColorFunction(const Lab<float>& color)
-{
-    auto [c1, c2, c3, alpha] = color;
-    if (WTF::areEssentiallyEqual(alpha, 1.0f))
-        return makeString("color(", serialization(ColorSpaceFor<Lab<float>>), ' ', c1, "% ", c2, ' ', c3, ')');
-    return makeString("color(", serialization(ColorSpaceFor<Lab<float>>), ' ', c1, "% ", c2, ' ', c3, " / ", alpha, ')');
-}
-
 static String serializationUsingColorFunction(const SRGBA<uint8_t>& color)
 {
     return serializationUsingColorFunction(convertColor<SRGBA<float>>(color));
@@ -189,12 +193,9 @@
 
 // MARK: LCHA<float> overloads
 
-String serializationForCSS(const LCHA<float>& color, bool useColorFunctionSerialization)
+String serializationForCSS(const LCHA<float>& color, bool)
 {
     // https://www.w3.org/TR/css-color-4/#serializing-lab-lch
-    if (useColorFunctionSerialization)
-        return serializationUsingColorFunction(color);
-
     auto [c1, c2, c3, alpha] = color;
     if (WTF::areEssentiallyEqual(alpha, 1.0f))
         return makeString("lch(", c1, "% ", c2, ' ', c3, ')');
@@ -213,12 +214,9 @@
 
 // MARK: Lab<float> overloads
 
-String serializationForCSS(const Lab<float>& color, bool useColorFunctionSerialization)
+String serializationForCSS(const Lab<float>& color, bool)
 {
     // https://www.w3.org/TR/css-color-4/#serializing-lab-lch
-    if (useColorFunctionSerialization)
-        return serializationUsingColorFunction(color);
-
     auto [c1, c2, c3, alpha] = color;
     if (WTF::areEssentiallyEqual(alpha, 1.0f))
         return makeString("lab(", c1, "% ", c2, ' ', c3, ')');
@@ -252,6 +250,46 @@
     return serializationUsingColorFunction(color);
 }
 
+// MARK: OKLCHA<float> overloads
+
+String serializationForCSS(const OKLCHA<float>& color, bool)
+{
+    auto [c1, c2, c3, alpha] = color;
+    if (WTF::areEssentiallyEqual(alpha, 1.0f))
+        return makeString("oklch(", c1, "% ", c2, ' ', c3, ')');
+    return makeString("oklch(", c1, "% ", c2, ' ', c3, " / ", alpha, ')');
+}
+
+String serializationForHTML(const OKLCHA<float>& color, bool useColorFunctionSerialization)
+{
+    return serializationForCSS(color, useColorFunctionSerialization);
+}
+
+String serializationForRenderTreeAsText(const OKLCHA<float>& color, bool useColorFunctionSerialization)
+{
+    return serializationForCSS(color, useColorFunctionSerialization);
+}
+
+// MARK: OKLab<float> overloads
+
+String serializationForCSS(const OKLab<float>& color, bool)
+{
+    auto [c1, c2, c3, alpha] = color;
+    if (WTF::areEssentiallyEqual(alpha, 1.0f))
+        return makeString("oklab(", c1, "% ", c2, ' ', c3, ')');
+    return makeString("oklab(", c1, "% ", c2, ' ', c3, " / ", alpha, ')');
+}
+
+String serializationForHTML(const OKLab<float>& color, bool useColorFunctionSerialization)
+{
+    return serializationForCSS(color, useColorFunctionSerialization);
+}
+
+String serializationForRenderTreeAsText(const OKLab<float>& color, bool useColorFunctionSerialization)
+{
+    return serializationForCSS(color, useColorFunctionSerialization);
+}
+
 // MARK: ProPhotoRGB<float> overloads
 
 String serializationForCSS(const ProPhotoRGB<float>& color, bool)
diff --git a/Source/WebCore/platform/graphics/ColorSpace.cpp b/Source/WebCore/platform/graphics/ColorSpace.cpp
index 05f8f7b..c496018 100644
--- a/Source/WebCore/platform/graphics/ColorSpace.cpp
+++ b/Source/WebCore/platform/graphics/ColorSpace.cpp
@@ -34,7 +34,7 @@
 {
     switch (colorSpace) {
     case ColorSpace::A98RGB:
-        ts << "a98-rgb";
+        ts << "A98-RGB";
         break;
     case ColorSpace::DisplayP3:
         ts << "DisplayP3";
@@ -43,11 +43,17 @@
         ts << "LCH";
         break;
     case ColorSpace::Lab:
-        ts << "L*a*b";
+        ts << "Lab";
         break;
     case ColorSpace::LinearSRGB:
         ts << "LinearSRGB";
         break;
+    case ColorSpace::OKLCH:
+        ts << "OKLCH";
+        break;
+    case ColorSpace::OKLab:
+        ts << "OKLab";
+        break;
     case ColorSpace::ProPhotoRGB:
         ts << "ProPhotoRGB";
         break;
diff --git a/Source/WebCore/platform/graphics/ColorSpace.h b/Source/WebCore/platform/graphics/ColorSpace.h
index cdab898..bd11a6a 100644
--- a/Source/WebCore/platform/graphics/ColorSpace.h
+++ b/Source/WebCore/platform/graphics/ColorSpace.h
@@ -38,6 +38,8 @@
     LCH,
     Lab,
     LinearSRGB,
+    OKLCH,
+    OKLab,
     ProPhotoRGB,
     Rec2020,
     SRGB,
@@ -54,6 +56,8 @@
 template<typename T> struct ColorSpaceMapping<LCHA<T>> { static constexpr auto colorSpace { ColorSpace::LCH }; };
 template<typename T> struct ColorSpaceMapping<Lab<T>> { static constexpr auto colorSpace { ColorSpace::Lab }; };
 template<typename T> struct ColorSpaceMapping<LinearSRGBA<T>> { static constexpr auto colorSpace { ColorSpace::LinearSRGB }; };
+template<typename T> struct ColorSpaceMapping<OKLab<T>> { static constexpr auto colorSpace { ColorSpace::OKLab }; };
+template<typename T> struct ColorSpaceMapping<OKLCHA<T>> { static constexpr auto colorSpace { ColorSpace::OKLCH }; };
 template<typename T> struct ColorSpaceMapping<ProPhotoRGB<T>> { static constexpr auto colorSpace { ColorSpace::ProPhotoRGB }; };
 template<typename T> struct ColorSpaceMapping<Rec2020<T>> { static constexpr auto colorSpace { ColorSpace::Rec2020 }; };
 template<typename T> struct ColorSpaceMapping<SRGBA<T>> { static constexpr auto colorSpace { ColorSpace::SRGB }; };
@@ -76,6 +80,10 @@
         return std::invoke(std::forward<Functor>(functor), makeFromComponents<Lab<T>>(components));
     case ColorSpace::LinearSRGB:
         return std::invoke(std::forward<Functor>(functor), makeFromComponents<LinearSRGBA<T>>(components));
+    case ColorSpace::OKLCH:
+        return std::invoke(std::forward<Functor>(functor), makeFromComponents<OKLCHA<T>>(components));
+    case ColorSpace::OKLab:
+        return std::invoke(std::forward<Functor>(functor), makeFromComponents<OKLab<T>>(components));
     case ColorSpace::ProPhotoRGB:
         return std::invoke(std::forward<Functor>(functor), makeFromComponents<ProPhotoRGB<T>>(components));
     case ColorSpace::Rec2020:
@@ -105,6 +113,8 @@
         WebCore::ColorSpace::LCH,
         WebCore::ColorSpace::Lab,
         WebCore::ColorSpace::LinearSRGB,
+        WebCore::ColorSpace::OKLCH,
+        WebCore::ColorSpace::OKLab,
         WebCore::ColorSpace::ProPhotoRGB,
         WebCore::ColorSpace::Rec2020,
         WebCore::ColorSpace::SRGB,
diff --git a/Source/WebCore/platform/graphics/ColorTypes.h b/Source/WebCore/platform/graphics/ColorTypes.h
index 950646a..1add88c 100644
--- a/Source/WebCore/platform/graphics/ColorTypes.h
+++ b/Source/WebCore/platform/graphics/ColorTypes.h
@@ -42,8 +42,8 @@
 template<typename> struct HWBA;
 template<typename> struct LCHA;
 template<typename> struct Lab;
-template<typename> struct Oklab;
-template<typename> struct Oklch;
+template<typename> struct OKLCHA;
+template<typename> struct OKLab;
 template<typename, WhitePoint> struct XYZA;
 
 // MARK: Make functions.
@@ -195,7 +195,7 @@
     using Model = M;
     using TransferFunction = TF;
     using Descriptor = D;
-    static constexpr WhitePoint whitePoint = D::whitePoint;
+    static constexpr auto whitePoint = D::whitePoint;
 
     constexpr RGBAType(T red, T green, T blue, T alpha = AlphaTraits<T>::opaque)
         : red { red }
@@ -299,7 +299,7 @@
 
 struct SRGBADescriptor {
     template<typename T, TransferFunctionMode Mode> using TransferFunction = SRGBTransferFunction<T, Mode>;
-    static constexpr WhitePoint whitePoint = WhitePoint::D65;
+    static constexpr auto whitePoint = WhitePoint::D65;
 
     // https://drafts.csswg.org/css-color/#color-conversion-code
     static constexpr ColorMatrix<3, 3> xyzToLinear {
@@ -322,7 +322,7 @@
 
 struct A98RGBDescriptor {
     template<typename T, TransferFunctionMode Mode> using TransferFunction = A98RGBTransferFunction<T, Mode>;
-    static constexpr WhitePoint whitePoint = WhitePoint::D65;
+    static constexpr auto whitePoint = WhitePoint::D65;
 
     // https://drafts.csswg.org/css-color/#color-conversion-code
     static constexpr ColorMatrix<3, 3> xyzToLinear {
@@ -343,7 +343,7 @@
 
 struct DisplayP3Descriptor {
     template<typename T, TransferFunctionMode Mode> using TransferFunction = SRGBTransferFunction<T, Mode>;
-    static constexpr WhitePoint whitePoint = WhitePoint::D65;
+    static constexpr auto whitePoint = WhitePoint::D65;
 
     // https://drafts.csswg.org/css-color/#color-conversion-code
     static constexpr ColorMatrix<3, 3> xyzToLinear {
@@ -364,7 +364,7 @@
 
 struct ProPhotoRGBDescriptor {
     template<typename T, TransferFunctionMode Mode> using TransferFunction = ProPhotoRGBTransferFunction<T, Mode>;
-    static constexpr WhitePoint whitePoint = WhitePoint::D50;
+    static constexpr auto whitePoint = WhitePoint::D50;
 
     // https://drafts.csswg.org/css-color/#color-conversion-code
     static constexpr ColorMatrix<3, 3> xyzToLinear {
@@ -385,7 +385,7 @@
 
 struct Rec2020Descriptor {
     template<typename T, TransferFunctionMode Mode> using TransferFunction = Rec2020TransferFunction<T, Mode>;
-    static constexpr WhitePoint whitePoint = WhitePoint::D65;
+    static constexpr auto whitePoint = WhitePoint::D65;
 
     // https://drafts.csswg.org/css-color/#color-conversion-code
     static constexpr ColorMatrix<3, 3> xyzToLinear {
@@ -409,8 +409,8 @@
 template<typename T> struct Lab : ColorWithAlphaHelper<Lab<T>> {
     using ComponentType = T;
     using Model = LabModel<T>;
-    static constexpr WhitePoint whitePoint = WhitePoint::D50;
-    using Reference =  XYZA<T, whitePoint>;
+    static constexpr auto whitePoint = WhitePoint::D50;
+    using Reference = XYZA<T, whitePoint>;
 
     constexpr Lab(T lightness, T a, T b, T alpha = AlphaTraits<T>::opaque)
         : lightness { lightness }
@@ -444,7 +444,7 @@
 template<typename T> struct LCHA : ColorWithAlphaHelper<LCHA<T>> {
     using ComponentType = T;
     using Model = LCHModel<T>;
-    static constexpr WhitePoint whitePoint = WhitePoint::D50;
+    static constexpr auto whitePoint = WhitePoint::D50;
     using Reference = Lab<T>;
 
     constexpr LCHA(T lightness, T chroma, T hue, T alpha = AlphaTraits<T>::opaque)
@@ -474,13 +474,83 @@
 
 template<typename ColorType> inline constexpr bool IsLCHA = std::is_same_v<LCHA<typename ColorType::ComponentType>, ColorType>;
 
+// MARK: - OKLab Color Type.
+
+template<typename T> struct OKLab : ColorWithAlphaHelper<OKLab<T>> {
+    using ComponentType = T;
+    using Model = LabModel<T>;
+    static constexpr auto whitePoint = WhitePoint::D65;
+    using Reference = XYZA<T, whitePoint>;
+
+    constexpr OKLab(T lightness, T a, T b, T alpha = AlphaTraits<T>::opaque)
+        : lightness { lightness }
+        , a { a }
+        , b { b }
+        , alpha { alpha }
+    {
+        assertInRange(*this);
+    }
+
+    constexpr OKLab()
+        : OKLab { 0, 0, 0, 0 }
+    {
+    }
+
+    T lightness;
+    T a;
+    T b;
+    T alpha;
+};
+
+template<typename T> constexpr ColorComponents<T, 4> asColorComponents(const OKLab<T>& c)
+{
+    return { c.lightness, c.a, c.b, c.alpha };
+}
+
+template<typename ColorType> inline constexpr bool IsOKLab = std::is_same_v<OKLab<typename ColorType::ComponentType>, ColorType>;
+
+// MARK: - OKLCHA Color Type.
+
+template<typename T> struct OKLCHA : ColorWithAlphaHelper<OKLCHA<T>> {
+    using ComponentType = T;
+    using Model = LCHModel<T>;
+    static constexpr auto whitePoint = WhitePoint::D65;
+    using Reference = OKLab<T>;
+
+    constexpr OKLCHA(T lightness, T chroma, T hue, T alpha = AlphaTraits<T>::opaque)
+        : lightness { lightness }
+        , chroma { chroma }
+        , hue { hue }
+        , alpha { alpha }
+    {
+        assertInRange(*this);
+    }
+
+    constexpr OKLCHA()
+        : OKLCHA { 0, 0, 0, 0 }
+    {
+    }
+
+    T lightness;
+    T chroma;
+    T hue;
+    T alpha;
+};
+
+template<typename T> constexpr ColorComponents<T, 4> asColorComponents(const OKLCHA<T>& c)
+{
+    return { c.lightness, c.chroma, c.hue, c.alpha };
+}
+
+template<typename ColorType> inline constexpr bool IsOKLCHA = std::is_same_v<OKLCHA<typename ColorType::ComponentType>, ColorType>;
+
 
 // MARK: - HSLA Color Type.
 
 template<typename T> struct HSLA : ColorWithAlphaHelper<HSLA<T>> {
     using ComponentType = T;
     using Model = HSLModel<T>;
-    static constexpr WhitePoint whitePoint = WhitePoint::D65;
+    static constexpr auto whitePoint = WhitePoint::D65;
     using Reference = SRGBA<T>;
 
     constexpr HSLA(T hue, T saturation, T lightness, T alpha = AlphaTraits<T>::opaque)
@@ -515,7 +585,7 @@
 template<typename T> struct HWBA : ColorWithAlphaHelper<HWBA<T>> {
     using ComponentType = T;
     using Model = HWBModel<T>;
-    static constexpr WhitePoint whitePoint = WhitePoint::D65;
+    static constexpr auto whitePoint = WhitePoint::D65;
     using Reference = SRGBA<T>;
 
     constexpr HWBA(T hue, T whiteness, T blackness, T alpha = AlphaTraits<T>::opaque)
@@ -551,7 +621,7 @@
     using ComponentType = T;
     using Model = XYZModel<T>;
     using ReferenceXYZ = XYZA<T, W>;
-    static constexpr WhitePoint whitePoint = W;
+    static constexpr auto whitePoint = W;
 
     constexpr XYZA(T x, T y, T z, T alpha = AlphaTraits<T>::opaque)
         : x { x }
diff --git a/Source/WebCore/platform/graphics/ColorUtilities.h b/Source/WebCore/platform/graphics/ColorUtilities.h
index c4f48ab..a02a1a7 100644
--- a/Source/WebCore/platform/graphics/ColorUtilities.h
+++ b/Source/WebCore/platform/graphics/ColorUtilities.h
@@ -54,15 +54,13 @@
 template<typename ColorType> constexpr ColorType invertedColorWithOverriddenAlpha(const ColorType&, uint8_t overrideAlpha);
 template<typename ColorType> ColorType invertedColorWithOverriddenAlpha(const ColorType&, float overrideAlpha);
 
-template<typename ColorType, typename std::enable_if_t<std::is_same_v<typename ColorType::Model, RGBModel<typename ColorType::ComponentType>>>* = nullptr> constexpr bool isBlack(const ColorType&);
+template<typename ColorType, typename std::enable_if_t<UsesLabModel<ColorType> || UsesLCHModel<ColorType>>* = nullptr> constexpr bool isBlack(const ColorType&);
+template<typename ColorType, typename std::enable_if_t<UsesRGBModel<ColorType>>* = nullptr> constexpr bool isBlack(const ColorType&);
 template<WhitePoint W> constexpr bool isBlack(const XYZA<float, W>&);
-constexpr bool isBlack(const LCHA<float>&);
-constexpr bool isBlack(const Lab<float>&);
 
-template<typename ColorType, typename std::enable_if_t<std::is_same_v<typename ColorType::Model, RGBModel<typename ColorType::ComponentType>>>* = nullptr> constexpr bool isWhite(const ColorType&);
+template<typename ColorType, typename std::enable_if_t<UsesLabModel<ColorType> || UsesLCHModel<ColorType>>* = nullptr> constexpr bool isWhite(const ColorType&);
+template<typename ColorType, typename std::enable_if_t<UsesRGBModel<ColorType>>* = nullptr> constexpr bool isWhite(const ColorType&);
 template<WhitePoint W> constexpr bool isWhite(const XYZA<float, W>&);
-constexpr bool isWhite(const LCHA<float>&);
-constexpr bool isWhite(const Lab<float>&);
 
 constexpr uint16_t fastMultiplyBy255(uint16_t);
 constexpr uint16_t fastDivideBy255(uint16_t);
@@ -150,17 +148,13 @@
     return color.y == 0 && color.alpha == AlphaTraits<float>::opaque;
 }
 
-constexpr bool isBlack(const LCHA<float>& color)
+template<typename ColorType, typename std::enable_if_t<UsesLabModel<ColorType> || UsesLCHModel<ColorType>>*>
+constexpr bool isBlack(const ColorType& color)
 {
     return color.lightness == 0 && color.alpha == AlphaTraits<float>::opaque;
 }
 
-constexpr bool isBlack(const Lab<float>& color)
-{
-    return color.lightness == 0 && color.alpha == AlphaTraits<float>::opaque;
-}
-
-template<typename ColorType, typename std::enable_if_t<std::is_same_v<typename ColorType::Model, RGBModel<typename ColorType::ComponentType>>>*>
+template<typename ColorType, typename std::enable_if_t<UsesRGBModel<ColorType>>*>
 constexpr bool isBlack(const ColorType& color)
 {
     auto [c1, c2, c3, alpha] = color;
@@ -173,17 +167,13 @@
     return color.y == 1 && color.alpha == AlphaTraits<float>::opaque;
 }
 
-constexpr bool isWhite(const LCHA<float>& color)
+template<typename ColorType, typename std::enable_if_t<UsesLabModel<ColorType> || UsesLCHModel<ColorType>>*>
+constexpr bool isWhite(const ColorType& color)
 {
     return color.lightness == 100 && color.alpha == AlphaTraits<float>::opaque;
 }
 
-constexpr bool isWhite(const Lab<float>& color)
-{
-    return color.lightness == 100 && color.alpha == AlphaTraits<float>::opaque;
-}
-
-template<typename ColorType, typename std::enable_if_t<std::is_same_v<typename ColorType::Model, RGBModel<typename ColorType::ComponentType>>>*>
+template<typename ColorType, typename std::enable_if_t<UsesRGBModel<ColorType>>*>
 constexpr bool isWhite(const ColorType& color)
 {
     auto [c1, c2, c3, alpha] = color;
diff --git a/Source/WebCore/platform/graphics/cg/ColorSpaceCG.h b/Source/WebCore/platform/graphics/cg/ColorSpaceCG.h
index 3d978bb..1fdd453 100644
--- a/Source/WebCore/platform/graphics/cg/ColorSpaceCG.h
+++ b/Source/WebCore/platform/graphics/cg/ColorSpaceCG.h
@@ -85,8 +85,6 @@
 #else
         return nullptr;
 #endif
-    case ColorSpace::LCH:
-        return nullptr;
     case ColorSpace::Lab:
 #if HAVE(CORE_GRAPHICS_LAB_COLOR_SPACE)
         return labColorSpaceRef();
@@ -119,8 +117,12 @@
 #else
         return nullptr;
 #endif
+
+    // FIXME: Add support for these once CoreGraphics supports it.
+    case ColorSpace::LCH:
+    case ColorSpace::OKLCH:
+    case ColorSpace::OKLab:
     case ColorSpace::XYZ_D65:
-        // FIXME: Add support for this once we have figured out how to create the CoreGraphics representation.
         return nullptr;