diff --git a/layout/style/nsCSSParser.cpp b/layout/style/nsCSSParser.cpp
index 885e0a9193..f3eab48acf 100644
--- a/layout/style/nsCSSParser.cpp
+++ b/layout/style/nsCSSParser.cpp
@@ -181,9 +181,12 @@ LinearSRGBToEncoded(float aValue)
 static nscolor
 OKLabToSRGBColor(float aL, float aA, float aB, float aAlpha)
 {
-  float lRoot = aL + 0.3963377774f * aA + 0.2158037573f * aB;
-  float mRoot = aL - 0.1055613458f * aA - 0.0638541728f * aB;
-  float sRoot = aL - 0.0894841775f * aA - 1.2914855480f * aB;
+  // Per CSS Color, the lightness component for Oklab/Oklch is clamped.
+  float lightness = mozilla::clamped(aL, 0.0f, 1.0f);
+
+  float lRoot = lightness + 0.3963377774f * aA + 0.2158037573f * aB;
+  float mRoot = lightness - 0.1055613458f * aA - 0.0638541728f * aB;
+  float sRoot = lightness - 0.0894841775f * aA - 1.2914855480f * aB;
 
   float l = lRoot * lRoot * lRoot;
   float m = mRoot * mRoot * mRoot;
diff --git a/layout/style/test/test_computed_style.html b/layout/style/test/test_computed_style.html
index 88e4cfc573..da4a0ba80a 100644
--- a/layout/style/test/test_computed_style.html
+++ b/layout/style/test/test_computed_style.html
@@ -401,8 +401,10 @@ var noframe_container = document.getElementById("content");
     ["hsl(0 0% 0% / 0.5)", "rgba(0, 0, 0, 0.5)"],
     ["oklab(0 0 0 / 1)", "rgb(0, 0, 0)"],
     ["oklab(0 0 0 / 0.5)", "rgba(0, 0, 0, 0.5)"],
+    ["oklab(150% 0.5 0.2 / 1)", "rgb(255, 0, 0)"],
     ["oklch(0 0 0 / 1)", "rgb(0, 0, 0)"],
     ["oklch(0 0 0 / 0.5)", "rgba(0, 0, 0, 0.5)"],
+    ["oklch(150% 0.5 50 / 1)", "rgb(255, 0, 0)"],
   ];
 
   var p = document.createElement("p");