diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76dc831422f6..f0f950a884cc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure 3D transforms render correctly in Safari ([#15179](https://github.com/tailwindlabs/tailwindcss/pull/15179))
 - Ensure `--spacing-*` variables take precedence over `--container-*` variables ([#15180](https://github.com/tailwindlabs/tailwindcss/pull/15180))
 - Fix scanning classes delimited by tab characters ([#15169](https://github.com/tailwindlabs/tailwindcss/pull/15169))
+- Ensure opacity modifiers and semi-transparent gradients render correctly by default in Safari ([#15201](https://github.com/tailwindlabs/tailwindcss/pull/15201))
+
+### Changed
+
+- Interpolate gradients using OKLAB instead of OKLCH by default ([#15201](https://github.com/tailwindlabs/tailwindcss/pull/15201))
 
 ## [4.0.0-beta.2] - 2024-11-22
 
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index 44635110668a..4a2c1032170d 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -521,7 +521,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
   ::placeholder {
     opacity: 1;
-    color: color-mix(in oklch, currentColor 50%, transparent);
+    color: color-mix(in oklab, currentColor 50%, transparent);
   }
 
   textarea {
@@ -615,7 +615,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 
   .text-black\\/50 {
-    color: color-mix(in oklch, var(--color-black) 50%, transparent);
+    color: color-mix(in oklab, var(--color-black) 50%, transparent);
   }
 
   .underline {
diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
index f8fe93f22368..a307c6d605ca 100644
--- a/packages/tailwindcss/preflight.css
+++ b/packages/tailwindcss/preflight.css
@@ -290,7 +290,7 @@ textarea,
 
 ::placeholder {
   opacity: 1; /* 1 */
-  color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
+  color: color-mix(in oklab, currentColor 50%, transparent); /* 2 */
 }
 
 /*
diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
index 721a5d2976a4..1b51e5fc03e9 100644
--- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -63,7 +63,7 @@ exports[`border-* 1`] = `
 }
 
 .border-\\[\\#0088cc\\]\\/50 {
-  border-color: oklch(59.9824% .14119 241.555 / .5);
+  border-color: oklab(59.9824% -.0672516 -.124144 / .5);
 }
 
 .border-\\[color\\:var\\(--my-color\\)\\] {
@@ -71,7 +71,7 @@ exports[`border-* 1`] = `
 }
 
 .border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-\\[var\\(--my-color\\)\\] {
@@ -79,7 +79,7 @@ exports[`border-* 1`] = `
 }
 
 .border-\\[var\\(--my-color\\)\\]\\/50 {
-  border-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-current {
@@ -87,7 +87,7 @@ exports[`border-* 1`] = `
 }
 
 .border-current\\/50 {
-  border-color: color-mix(in oklch, currentColor 50%, transparent);
+  border-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-inherit {
@@ -99,19 +99,19 @@ exports[`border-* 1`] = `
 }
 
 .border-red-500\\/2\\.5 {
-  border-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+  border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
 }
 
 .border-red-500\\/2\\.25 {
-  border-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+  border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
 }
 
 .border-red-500\\/2\\.75 {
-  border-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+  border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
 }
 
 .border-red-500\\/50 {
-  border-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+  border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
 }
 
 .border-transparent {
@@ -196,7 +196,7 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-\\[\\#0088cc\\]\\/50 {
-  border-bottom-color: oklch(59.9824% .14119 241.555 / .5);
+  border-bottom-color: oklab(59.9824% -.0672516 -.124144 / .5);
 }
 
 .border-b-\\[color\\:var\\(--my-color\\)\\] {
@@ -204,7 +204,7 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-b-\\[var\\(--my-color\\)\\] {
@@ -212,7 +212,7 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-\\[var\\(--my-color\\)\\]\\/50 {
-  border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-b-current {
@@ -220,7 +220,7 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-current\\/50 {
-  border-bottom-color: color-mix(in oklch, currentColor 50%, transparent);
+  border-bottom-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-b-inherit {
@@ -232,19 +232,19 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-red-500\\/2\\.5 {
-  border-bottom-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+  border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
 }
 
 .border-b-red-500\\/2\\.25 {
-  border-bottom-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+  border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
 }
 
 .border-b-red-500\\/2\\.75 {
-  border-bottom-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+  border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
 }
 
 .border-b-red-500\\/50 {
-  border-bottom-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+  border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
 }
 
 .border-b-transparent {
@@ -329,7 +329,7 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-\\[\\#0088cc\\]\\/50 {
-  border-inline-end-color: oklch(59.9824% .14119 241.555 / .5);
+  border-inline-end-color: oklab(59.9824% -.0672516 -.124144 / .5);
 }
 
 .border-e-\\[color\\:var\\(--my-color\\)\\] {
@@ -337,7 +337,7 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-inline-end-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-e-\\[var\\(--my-color\\)\\] {
@@ -345,7 +345,7 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-\\[var\\(--my-color\\)\\]\\/50 {
-  border-inline-end-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-e-current {
@@ -353,7 +353,7 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-current\\/50 {
-  border-inline-end-color: color-mix(in oklch, currentColor 50%, transparent);
+  border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-e-inherit {
@@ -365,19 +365,19 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-red-500\\/2\\.5 {
-  border-inline-end-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+  border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
 }
 
 .border-e-red-500\\/2\\.25 {
-  border-inline-end-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+  border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
 }
 
 .border-e-red-500\\/2\\.75 {
-  border-inline-end-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+  border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
 }
 
 .border-e-red-500\\/50 {
-  border-inline-end-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+  border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
 }
 
 .border-e-transparent {
@@ -462,7 +462,7 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-\\[\\#0088cc\\]\\/50 {
-  border-left-color: oklch(59.9824% .14119 241.555 / .5);
+  border-left-color: oklab(59.9824% -.0672516 -.124144 / .5);
 }
 
 .border-l-\\[color\\:var\\(--my-color\\)\\] {
@@ -470,7 +470,7 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-l-\\[var\\(--my-color\\)\\] {
@@ -478,7 +478,7 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-\\[var\\(--my-color\\)\\]\\/50 {
-  border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-l-current {
@@ -486,7 +486,7 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-current\\/50 {
-  border-left-color: color-mix(in oklch, currentColor 50%, transparent);
+  border-left-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-l-inherit {
@@ -498,19 +498,19 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-red-500\\/2\\.5 {
-  border-left-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+  border-left-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
 }
 
 .border-l-red-500\\/2\\.25 {
-  border-left-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+  border-left-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
 }
 
 .border-l-red-500\\/2\\.75 {
-  border-left-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+  border-left-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
 }
 
 .border-l-red-500\\/50 {
-  border-left-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+  border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
 }
 
 .border-l-transparent {
@@ -595,7 +595,7 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-\\[\\#0088cc\\]\\/50 {
-  border-right-color: oklch(59.9824% .14119 241.555 / .5);
+  border-right-color: oklab(59.9824% -.0672516 -.124144 / .5);
 }
 
 .border-r-\\[color\\:var\\(--my-color\\)\\] {
@@ -603,7 +603,7 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-r-\\[var\\(--my-color\\)\\] {
@@ -611,7 +611,7 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-\\[var\\(--my-color\\)\\]\\/50 {
-  border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-r-current {
@@ -619,7 +619,7 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-current\\/50 {
-  border-right-color: color-mix(in oklch, currentColor 50%, transparent);
+  border-right-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-r-inherit {
@@ -631,19 +631,19 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-red-500\\/2\\.5 {
-  border-right-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+  border-right-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
 }
 
 .border-r-red-500\\/2\\.25 {
-  border-right-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+  border-right-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
 }
 
 .border-r-red-500\\/2\\.75 {
-  border-right-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+  border-right-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
 }
 
 .border-r-red-500\\/50 {
-  border-right-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+  border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
 }
 
 .border-r-transparent {
@@ -728,7 +728,7 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-\\[\\#0088cc\\]\\/50 {
-  border-inline-start-color: oklch(59.9824% .14119 241.555 / .5);
+  border-inline-start-color: oklab(59.9824% -.0672516 -.124144 / .5);
 }
 
 .border-s-\\[color\\:var\\(--my-color\\)\\] {
@@ -736,7 +736,7 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-inline-start-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-s-\\[var\\(--my-color\\)\\] {
@@ -744,7 +744,7 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-\\[var\\(--my-color\\)\\]\\/50 {
-  border-inline-start-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-s-current {
@@ -752,7 +752,7 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-current\\/50 {
-  border-inline-start-color: color-mix(in oklch, currentColor 50%, transparent);
+  border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-s-inherit {
@@ -764,19 +764,19 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-red-500\\/2\\.5 {
-  border-inline-start-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+  border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
 }
 
 .border-s-red-500\\/2\\.25 {
-  border-inline-start-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+  border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
 }
 
 .border-s-red-500\\/2\\.75 {
-  border-inline-start-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+  border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
 }
 
 .border-s-red-500\\/50 {
-  border-inline-start-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+  border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
 }
 
 .border-s-transparent {
@@ -861,7 +861,7 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-\\[\\#0088cc\\]\\/50 {
-  border-top-color: oklch(59.9824% .14119 241.555 / .5);
+  border-top-color: oklab(59.9824% -.0672516 -.124144 / .5);
 }
 
 .border-t-\\[color\\:var\\(--my-color\\)\\] {
@@ -869,7 +869,7 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-t-\\[var\\(--my-color\\)\\] {
@@ -877,7 +877,7 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-\\[var\\(--my-color\\)\\]\\/50 {
-  border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-t-current {
@@ -885,7 +885,7 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-current\\/50 {
-  border-top-color: color-mix(in oklch, currentColor 50%, transparent);
+  border-top-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-t-inherit {
@@ -897,19 +897,19 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-red-500\\/2\\.5 {
-  border-top-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+  border-top-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
 }
 
 .border-t-red-500\\/2\\.25 {
-  border-top-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+  border-top-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
 }
 
 .border-t-red-500\\/2\\.75 {
-  border-top-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+  border-top-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
 }
 
 .border-t-red-500\\/50 {
-  border-top-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+  border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
 }
 
 .border-t-transparent {
@@ -994,7 +994,7 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-\\[\\#0088cc\\]\\/50 {
-  border-inline-color: oklch(59.9824% .14119 241.555 / .5);
+  border-inline-color: oklab(59.9824% -.0672516 -.124144 / .5);
 }
 
 .border-x-\\[color\\:var\\(--my-color\\)\\] {
@@ -1002,7 +1002,7 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-inline-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-x-\\[var\\(--my-color\\)\\] {
@@ -1010,7 +1010,7 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-\\[var\\(--my-color\\)\\]\\/50 {
-  border-inline-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-x-current {
@@ -1018,7 +1018,7 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-current\\/50 {
-  border-inline-color: color-mix(in oklch, currentColor 50%, transparent);
+  border-inline-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-x-inherit {
@@ -1030,19 +1030,19 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-red-500\\/2\\.5 {
-  border-inline-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+  border-inline-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
 }
 
 .border-x-red-500\\/2\\.25 {
-  border-inline-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+  border-inline-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
 }
 
 .border-x-red-500\\/2\\.75 {
-  border-inline-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+  border-inline-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
 }
 
 .border-x-red-500\\/50 {
-  border-inline-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+  border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
 }
 
 .border-x-transparent {
@@ -1127,7 +1127,7 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-\\[\\#0088cc\\]\\/50 {
-  border-block-color: oklch(59.9824% .14119 241.555 / .5);
+  border-block-color: oklab(59.9824% -.0672516 -.124144 / .5);
 }
 
 .border-y-\\[color\\:var\\(--my-color\\)\\] {
@@ -1135,7 +1135,7 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-block-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-y-\\[var\\(--my-color\\)\\] {
@@ -1143,7 +1143,7 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-\\[var\\(--my-color\\)\\]\\/50 {
-  border-block-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
 }
 
 .border-y-current {
@@ -1151,7 +1151,7 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-current\\/50 {
-  border-block-color: color-mix(in oklch, currentColor 50%, transparent);
+  border-block-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-y-inherit {
@@ -1163,19 +1163,19 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-red-500\\/2\\.5 {
-  border-block-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+  border-block-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
 }
 
 .border-y-red-500\\/2\\.25 {
-  border-block-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+  border-block-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
 }
 
 .border-y-red-500\\/2\\.75 {
-  border-block-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+  border-block-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
 }
 
 .border-y-red-500\\/50 {
-  border-block-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+  border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
 }
 
 .border-y-transparent {
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.test.ts b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
index 3c8e9a543b33..6db8b6df48cf 100644
--- a/packages/tailwindcss/src/compat/legacy-utilities.test.ts
+++ b/packages/tailwindcss/src/compat/legacy-utilities.test.ts
@@ -22,42 +22,42 @@ test('bg-gradient-*', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ".bg-gradient-to-b {
-      --tw-gradient-position: to bottom in oklch, ;
+      --tw-gradient-position: to bottom in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-bl {
-      --tw-gradient-position: to bottom left in oklch, ;
+      --tw-gradient-position: to bottom left in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-br {
-      --tw-gradient-position: to bottom right in oklch, ;
+      --tw-gradient-position: to bottom right in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-l {
-      --tw-gradient-position: to left in oklch, ;
+      --tw-gradient-position: to left in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-r {
-      --tw-gradient-position: to right in oklch, ;
+      --tw-gradient-position: to right in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-t {
-      --tw-gradient-position: to top in oklch, ;
+      --tw-gradient-position: to top in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tl {
-      --tw-gradient-position: to top left in oklch, ;
+      --tw-gradient-position: to top left in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tr {
-      --tw-gradient-position: to top right in oklch, ;
+      --tw-gradient-position: to top right in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }"
   `)
diff --git a/packages/tailwindcss/src/compat/legacy-utilities.ts b/packages/tailwindcss/src/compat/legacy-utilities.ts
index 5be6d303c239..d86b1770ab6e 100644
--- a/packages/tailwindcss/src/compat/legacy-utilities.ts
+++ b/packages/tailwindcss/src/compat/legacy-utilities.ts
@@ -14,7 +14,7 @@ export function registerLegacyUtilities(designSystem: DesignSystem) {
     ['tl', 'top left'],
   ]) {
     designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
-      decl('--tw-gradient-position', `to ${direction} in oklch,`),
+      decl('--tw-gradient-position', `to ${direction} in oklab,`),
       decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
     ])
   }
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
index 51b1d9732132..0de2cfa46fad 100644
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -285,13 +285,13 @@ describe('theme', async () => {
 
     expect(compiler.build(['percentage', 'fraction', 'variable'])).toMatchInlineSnapshot(`
       ".fraction {
-        color: color-mix(in oklch, #ef4444 50%, transparent);
+        color: color-mix(in oklab, #ef4444 50%, transparent);
       }
       .percentage {
-        color: color-mix(in oklch, #ef4444 50%, transparent);
+        color: color-mix(in oklab, #ef4444 50%, transparent);
       }
       .variable {
-        color: color-mix(in oklch, #ef4444 var(--opacity), transparent);
+        color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
       }
       :root {
         --color-red-500: #ef4444;
@@ -362,22 +362,22 @@ describe('theme', async () => {
       ]),
     ).toMatchInlineSnapshot(`
       ".css-fraction {
-        color: color-mix(in oklch, rgba(255 0 0 / <alpha-value>) 50%, transparent);
+        color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
       }
       .css-percentage {
-        color: color-mix(in oklch, rgba(255 0 0 / <alpha-value>) 50%, transparent);
+        color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
       }
       .css-variable {
-        color: color-mix(in oklch, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
+        color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
       }
       .js-fraction {
-        color: color-mix(in oklch, rgb(255 0 0 / 1) 50%, transparent);
+        color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
       }
       .js-percentage {
-        color: color-mix(in oklch, rgb(255 0 0 / 1) 50%, transparent);
+        color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
       }
       .js-variable {
-        color: color-mix(in oklch, rgb(255 0 0 / 1) var(--opacity), transparent);
+        color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
       }
       :root {
         --color-custom-css: rgba(255 0 0 / <alpha-value>);
@@ -3462,7 +3462,7 @@ describe('matchUtilities()', () => {
         }
 
         .scrollbar-\\[\\#08c\\]\\/50 {
-          scrollbar-color: oklch(59.9824% .14119 241.555 / .5);
+          scrollbar-color: oklab(59.9824% -.0672516 -.124144 / .5);
         }
 
         .scrollbar-\\[2px\\] {
@@ -3625,7 +3625,7 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-\\[\\#fff\\]\\/50 {
-        scrollbar-color: oklch(100% 5.96046e-8 none / .5);
+        scrollbar-color: oklab(100% 0 5.96046e-8 / .5);
       }
 
       .scrollbar-\\[2px\\] {
@@ -3637,7 +3637,7 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        scrollbar-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+        scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent);
       }
 
       .scrollbar-\\[length\\:var\\(--my-width\\)\\] {
@@ -3649,7 +3649,7 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-\\[var\\(--my-color\\)\\]\\/50 {
-        scrollbar-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+        scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent);
       }
 
       .scrollbar-black {
@@ -3657,7 +3657,7 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-black\\/50 {
-        scrollbar-color: oklch(0% none none / .5);
+        scrollbar-color: oklab(0% none none / .5);
       }"
     `)
 
@@ -3723,7 +3723,7 @@ describe('matchUtilities()', () => {
       ).trim(),
     ).toMatchInlineSnapshot(`
       ".scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] {
-        scrollbar-color: color-mix(in oklch, var(--my-color) 25%, transparent);
+        scrollbar-color: color-mix(in oklab, var(--my-color) 25%, transparent);
       }
 
       .scrollbar-black {
@@ -3731,11 +3731,11 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-black\\/33 {
-        scrollbar-color: oklch(0% none none / .33);
+        scrollbar-color: oklab(0% none none / .33);
       }
 
       .scrollbar-black\\/\\[50\\%\\] {
-        scrollbar-color: oklch(0% none none / .5);
+        scrollbar-color: oklab(0% none none / .5);
       }
 
       .scrollbar-current {
@@ -3743,7 +3743,7 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-current\\/45 {
-        scrollbar-color: color-mix(in oklch, currentColor 45%, transparent);
+        scrollbar-color: color-mix(in oklab, currentColor 45%, transparent);
       }"
     `)
   })
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index 990a8b989da2..940389c22205 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -152,7 +152,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: oklch(62.7955% .257683 29.2339 / .75);
+            color: oklab(62.7955% .224863 .125846 / .75);
           }"
         `)
       })
@@ -173,7 +173,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: oklch(62.7955% .257683 29.2339 / .75);
+            color: oklab(62.7955% .224863 .125846 / .75);
           }"
         `)
       })
@@ -194,7 +194,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: oklch(62.7955% .257683 29.2339 / .75);
+            color: oklab(62.7955% .224863 .125846 / .75);
           }"
         `)
       })
@@ -215,7 +215,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: color-mix(in oklch, red var(--opacity), transparent);
+            color: color-mix(in oklab, red var(--opacity), transparent);
           }"
         `)
       })
@@ -237,7 +237,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: color-mix(in oklch, red var(--opacity, 50%), transparent);
+            color: color-mix(in oklab, red var(--opacity, 50%), transparent);
           }"
         `)
       })
@@ -455,7 +455,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: oklch(62.7955% .257683 29.2339 / .25);
+            color: oklab(62.7955% .224863 .125846 / .25);
           }"
         `)
       })
@@ -533,11 +533,11 @@ describe('theme function', () => {
         ).toMatchInlineSnapshot(`
           ":root {
             --color-red-500: red;
-            --color-foo: oklch(62.7955% .257683 29.2339 / .5);
+            --color-foo: oklab(62.7955% .224863 .125846 / .5);
           }
 
           .red {
-            color: oklch(62.7955% .257683 29.2339 / .25);
+            color: oklab(62.7955% .224863 .125846 / .25);
           }"
         `)
       })
@@ -581,7 +581,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: oklch(62.7955% .257683 29.2339 / .5);
+            color: oklab(62.7955% .224863 .125846 / .5);
           }"
         `)
       })
@@ -873,7 +873,13 @@ describe('in plugins', () => {
           --color-red: oklch(62% 0.25 30);
           --color-orange: oklch(79% 0.17 70);
           --color-blue: oklch(45% 0.31 264);
-          --color-pink: oklch(87% 0.07 7);
+
+          /*
+            Using oklab because Lightning converts the color to oklab when using
+            color-mix() and the results are off by 0.00000001 between macOS and
+            Linux.
+          */
+          --color-pink: oklab(87% 0.07 0);
         }
         @layer utilities {
           @tailwind utilities;
@@ -909,8 +915,8 @@ describe('in plugins', () => {
         .my-base-rule {
           color: oklch(62% .25 30);
           background-color: oklch(45% .31 264);
-          border-color: oklch(87% .07 7 / .1);
-          outline-color: oklch(79% .17 70 / .15);
+          border-color: oklab(87% .07 0 / .1);
+          outline-color: oklab(79% .0581434 .159748 / .15);
         }
       }
 
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index 96ed5f7c6bb7..3d21d1102177 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -182,7 +182,7 @@ describe('arbitrary properties', () => {
   it('should generate arbitrary properties with modifiers', async () => {
     expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(`
       ".\\[color\\:red\\]\\/50 {
-        color: oklch(62.7955% .257683 29.2339 / .5);
+        color: oklab(62.7955% .224863 .125846 / .5);
       }"
     `)
   })
@@ -194,7 +194,7 @@ describe('arbitrary properties', () => {
   it('should generate arbitrary properties with variables and with modifiers', async () => {
     expect(await run(['[color:var(--my-color)]/50'])).toMatchInlineSnapshot(`
       ".\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        color: color-mix(in oklch, var(--my-color) 50%, transparent);
+        color: color-mix(in oklab, var(--my-color) 50%, transparent);
       }"
     `)
   })
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 331ce448ab67..83af79ff3ab4 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -8373,7 +8373,7 @@ test('accent', async () => {
     }
 
     .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      accent-color: oklch(59.9824% .14119 241.555 / .5);
+      accent-color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .accent-current {
@@ -8381,7 +8381,7 @@ test('accent', async () => {
     }
 
     .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] {
-      accent-color: color-mix(in oklch, currentColor 50%, transparent);
+      accent-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .accent-inherit {
@@ -8393,19 +8393,19 @@ test('accent', async () => {
     }
 
     .accent-red-500\\/2\\.5 {
-      accent-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+      accent-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
     }
 
     .accent-red-500\\/2\\.25 {
-      accent-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+      accent-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
     }
 
     .accent-red-500\\/2\\.75 {
-      accent-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+      accent-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
     }
 
     .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] {
-      accent-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .accent-transparent {
@@ -8488,7 +8488,7 @@ test('caret', async () => {
     }
 
     .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      caret-color: oklch(59.9824% .14119 241.555 / .5);
+      caret-color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .caret-current {
@@ -8496,7 +8496,7 @@ test('caret', async () => {
     }
 
     .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] {
-      caret-color: color-mix(in oklch, currentColor 50%, transparent);
+      caret-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .caret-inherit {
@@ -8508,19 +8508,19 @@ test('caret', async () => {
     }
 
     .caret-red-500\\/2\\.5 {
-      caret-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+      caret-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
     }
 
     .caret-red-500\\/2\\.25 {
-      caret-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+      caret-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
     }
 
     .caret-red-500\\/2\\.75 {
-      caret-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+      caret-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
     }
 
     .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] {
-      caret-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .caret-transparent {
@@ -8601,7 +8601,7 @@ test('divide-color', async () => {
     }
 
     :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: oklch(59.9824% .14119 241.555 / .5);
+      border-color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     :where(.divide-current > :not(:last-child)) {
@@ -8609,7 +8609,7 @@ test('divide-color', async () => {
     }
 
     :where(.divide-current\\/50 > :not(:last-child)), :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: color-mix(in oklch, currentColor 50%, transparent);
+      border-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     :where(.divide-inherit > :not(:last-child)) {
@@ -8621,19 +8621,19 @@ test('divide-color', async () => {
     }
 
     :where(.divide-red-500\\/2\\.5 > :not(:last-child)) {
-      border-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+      border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
     }
 
     :where(.divide-red-500\\/2\\.25 > :not(:last-child)) {
-      border-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+      border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
     }
 
     :where(.divide-red-500\\/2\\.75 > :not(:last-child)) {
-      border-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+      border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
     }
 
     :where(.divide-red-500\\/50 > :not(:last-child)), :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     :where(.divide-transparent > :not(:last-child)) {
@@ -10499,7 +10499,7 @@ test('bg', async () => {
     }
 
     .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      background-color: oklch(59.9824% .14119 241.555 / .5);
+      background-color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .bg-\\[color\\:var\\(--some-var\\)\\] {
@@ -10507,7 +10507,7 @@ test('bg', async () => {
     }
 
     .bg-\\[color\\:var\\(--some-var\\)\\]\\/50, .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\], .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] {
-      background-color: color-mix(in oklch, var(--some-var) 50%, transparent);
+      background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
     }
 
     .bg-\\[var\\(--some-var\\)\\] {
@@ -10515,7 +10515,7 @@ test('bg', async () => {
     }
 
     .bg-\\[var\\(--some-var\\)\\]\\/50, .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\], .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] {
-      background-color: color-mix(in oklch, var(--some-var) 50%, transparent);
+      background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
     }
 
     .bg-current {
@@ -10523,11 +10523,11 @@ test('bg', async () => {
     }
 
     .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] {
-      background-color: color-mix(in oklch, currentColor 50%, transparent);
+      background-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .bg-current\\/\\[var\\(--bg-opacity\\)\\] {
-      background-color: color-mix(in oklch, currentColor var(--bg-opacity), transparent);
+      background-color: color-mix(in oklab, currentColor var(--bg-opacity), transparent);
     }
 
     .bg-inherit {
@@ -10539,19 +10539,19 @@ test('bg', async () => {
     }
 
     .bg-red-500\\/2\\.5 {
-      background-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+      background-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
     }
 
     .bg-red-500\\/2\\.25 {
-      background-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+      background-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
     }
 
     .bg-red-500\\/2\\.75 {
-      background-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+      background-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
     }
 
     .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] {
-      background-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .bg-transparent {
@@ -10563,12 +10563,7 @@ test('bg', async () => {
       background-image: conic-gradient(var(--tw-gradient-stops));
     }
 
-    .-bg-linear-45 {
-      --tw-gradient-position: calc(45deg * -1) in oklch, ;
-      background-image: linear-gradient(var(--tw-gradient-stops));
-    }
-
-    .-bg-linear-45\\/oklab {
+    .-bg-linear-45, .-bg-linear-45\\/oklab {
       --tw-gradient-position: calc(45deg * -1) in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
@@ -10644,7 +10639,7 @@ test('bg', async () => {
     }
 
     .bg-linear-45 {
-      --tw-gradient-position: 45deg in oklch, ;
+      --tw-gradient-position: 45deg in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
@@ -10679,27 +10674,27 @@ test('bg', async () => {
     }
 
     .bg-linear-to-b {
-      --tw-gradient-position: to bottom in oklch, ;
+      --tw-gradient-position: to bottom in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-bl {
-      --tw-gradient-position: to bottom left in oklch, ;
+      --tw-gradient-position: to bottom left in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-br {
-      --tw-gradient-position: to bottom right in oklch, ;
+      --tw-gradient-position: to bottom right in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-l {
-      --tw-gradient-position: to left in oklch, ;
+      --tw-gradient-position: to left in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r {
-      --tw-gradient-position: to right in oklch, ;
+      --tw-gradient-position: to right in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
@@ -10754,17 +10749,17 @@ test('bg', async () => {
     }
 
     .bg-linear-to-t {
-      --tw-gradient-position: to top in oklch, ;
+      --tw-gradient-position: to top in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-tl {
-      --tw-gradient-position: to top left in oklch, ;
+      --tw-gradient-position: to top left in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-tr {
-      --tw-gradient-position: to top right in oklch, ;
+      --tw-gradient-position: to top right in oklab, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
@@ -11050,15 +11045,15 @@ test('bg', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ".bg-current\\/custom {
-      background-color: color-mix(in oklch, currentColor var(--opacity-custom), transparent);
+      background-color: color-mix(in oklab, currentColor var(--opacity-custom), transparent);
     }
 
     .bg-current\\/half {
-      background-color: color-mix(in oklch, currentColor var(--opacity-half), transparent);
+      background-color: color-mix(in oklab, currentColor var(--opacity-half), transparent);
     }
 
     .\\[color\\:red\\]\\/half {
-      color: color-mix(in oklch, red var(--opacity-half), transparent);
+      color: color-mix(in oklab, red var(--opacity-half), transparent);
     }"
   `)
 })
@@ -11118,7 +11113,7 @@ test('from', async () => {
     }
 
     .from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-gradient-from: oklch(59.9824% .14119 241.555 / .5);
+      --tw-gradient-from: oklab(59.9824% -.0672516 -.124144 / .5);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
@@ -11128,7 +11123,7 @@ test('from', async () => {
     }
 
     .from-\\[color\\:var\\(--my-color\\)\\]\\/50, .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-from: color-mix(in oklch, var(--my-color) 50%, transparent);
+      --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
@@ -11138,7 +11133,7 @@ test('from', async () => {
     }
 
     .from-\\[var\\(--my-color\\)\\]\\/50, .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-from: color-mix(in oklch, var(--my-color) 50%, transparent);
+      --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
@@ -11148,7 +11143,7 @@ test('from', async () => {
     }
 
     .from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] {
-      --tw-gradient-from: color-mix(in oklch, currentColor 50%, transparent);
+      --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
@@ -11163,7 +11158,7 @@ test('from', async () => {
     }
 
     .from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] {
-      --tw-gradient-from: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      --tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
@@ -11354,7 +11349,7 @@ test('via', async () => {
     }
 
     .via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-gradient-via: oklch(59.9824% .14119 241.555 / .5);
+      --tw-gradient-via: oklab(59.9824% -.0672516 -.124144 / .5);
       --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
@@ -11366,7 +11361,7 @@ test('via', async () => {
     }
 
     .via-\\[color\\:var\\(--my-color\\)\\]\\/50, .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-via: color-mix(in oklch, var(--my-color) 50%, transparent);
+      --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
       --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
@@ -11378,7 +11373,7 @@ test('via', async () => {
     }
 
     .via-\\[var\\(--my-color\\)\\]\\/50, .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-via: color-mix(in oklch, var(--my-color) 50%, transparent);
+      --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
       --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
@@ -11390,7 +11385,7 @@ test('via', async () => {
     }
 
     .via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] {
-      --tw-gradient-via: color-mix(in oklch, currentColor 50%, transparent);
+      --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent);
       --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
@@ -11408,7 +11403,7 @@ test('via', async () => {
     }
 
     .via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] {
-      --tw-gradient-via: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      --tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent);
       --tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
@@ -11598,7 +11593,7 @@ test('to', async () => {
     }
 
     .to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-gradient-to: oklch(59.9824% .14119 241.555 / .5);
+      --tw-gradient-to: oklab(59.9824% -.0672516 -.124144 / .5);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
@@ -11608,7 +11603,7 @@ test('to', async () => {
     }
 
     .to-\\[color\\:var\\(--my-color\\)\\]\\/50, .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-to: color-mix(in oklch, var(--my-color) 50%, transparent);
+      --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
@@ -11618,7 +11613,7 @@ test('to', async () => {
     }
 
     .to-\\[var\\(--my-color\\)\\]\\/50, .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-to: color-mix(in oklch, var(--my-color) 50%, transparent);
+      --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
@@ -11628,7 +11623,7 @@ test('to', async () => {
     }
 
     .to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] {
-      --tw-gradient-to: color-mix(in oklch, currentColor 50%, transparent);
+      --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
@@ -11643,7 +11638,7 @@ test('to', async () => {
     }
 
     .to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] {
-      --tw-gradient-to: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
@@ -12162,7 +12157,7 @@ test('fill', async () => {
     }
 
     .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      fill: oklch(59.9824% .14119 241.555 / .5);
+      fill: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .fill-current {
@@ -12170,7 +12165,7 @@ test('fill', async () => {
     }
 
     .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] {
-      fill: color-mix(in oklch, currentColor 50%, transparent);
+      fill: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .fill-inherit {
@@ -12182,19 +12177,19 @@ test('fill', async () => {
     }
 
     .fill-red-500\\/2\\.5 {
-      fill: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+      fill: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
     }
 
     .fill-red-500\\/2\\.25 {
-      fill: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+      fill: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
     }
 
     .fill-red-500\\/2\\.75 {
-      fill: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+      fill: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
     }
 
     .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] {
-      fill: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      fill: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .fill-transparent {
@@ -12283,7 +12278,7 @@ test('stroke', async () => {
     }
 
     .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      stroke: oklch(59.9824% .14119 241.555 / .5);
+      stroke: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .stroke-\\[color\\:var\\(--my-color\\)\\] {
@@ -12291,7 +12286,7 @@ test('stroke', async () => {
     }
 
     .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50, .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      stroke: color-mix(in oklch, var(--my-color) 50%, transparent);
+      stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
     }
 
     .stroke-\\[var\\(--my-color\\)\\] {
@@ -12299,7 +12294,7 @@ test('stroke', async () => {
     }
 
     .stroke-\\[var\\(--my-color\\)\\]\\/50, .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      stroke: color-mix(in oklch, var(--my-color) 50%, transparent);
+      stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
     }
 
     .stroke-current {
@@ -12307,7 +12302,7 @@ test('stroke', async () => {
     }
 
     .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] {
-      stroke: color-mix(in oklch, currentColor 50%, transparent);
+      stroke: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .stroke-inherit {
@@ -12323,19 +12318,19 @@ test('stroke', async () => {
     }
 
     .stroke-red-500\\/2\\.5 {
-      stroke: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+      stroke: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
     }
 
     .stroke-red-500\\/2\\.25 {
-      stroke: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+      stroke: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
     }
 
     .stroke-red-500\\/2\\.75 {
-      stroke: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+      stroke: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
     }
 
     .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] {
-      stroke: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .stroke-transparent {
@@ -13281,7 +13276,7 @@ test('placeholder', async () => {
     }
 
     .placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder {
-      color: oklch(59.9824% .14119 241.555 / .5);
+      color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .placeholder-current::placeholder {
@@ -13289,7 +13284,7 @@ test('placeholder', async () => {
     }
 
     .placeholder-current\\/50::placeholder, .placeholder-current\\/\\[0\\.5\\]::placeholder, .placeholder-current\\/\\[50\\%\\]::placeholder {
-      color: color-mix(in oklch, currentColor 50%, transparent);
+      color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .placeholder-inherit::placeholder {
@@ -13301,19 +13296,19 @@ test('placeholder', async () => {
     }
 
     .placeholder-red-500\\/2\\.5::placeholder {
-      color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+      color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
     }
 
     .placeholder-red-500\\/2\\.25::placeholder {
-      color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+      color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
     }
 
     .placeholder-red-500\\/2\\.75::placeholder {
-      color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+      color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
     }
 
     .placeholder-red-500\\/50::placeholder, .placeholder-red-500\\/\\[0\\.5\\]::placeholder, .placeholder-red-500\\/\\[50\\%\\]::placeholder {
-      color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .placeholder-transparent::placeholder {
@@ -13406,7 +13401,7 @@ test('decoration', async () => {
     }
 
     .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      text-decoration-color: oklch(59.9824% .14119 241.555 / .5);
+      text-decoration-color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .decoration-\\[color\\:var\\(--my-color\\)\\] {
@@ -13416,9 +13411,9 @@ test('decoration', async () => {
     }
 
     .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50, .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: color-mix(in oklch, var(--my-color) 50%, transparent);
-      -webkit-text-decoration-color: color-mix(in oklch, var(--my-color) 50%, transparent);
-      text-decoration-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
     }
 
     .decoration-\\[var\\(--my-color\\)\\] {
@@ -13428,9 +13423,9 @@ test('decoration', async () => {
     }
 
     .decoration-\\[var\\(--my-color\\)\\]\\/50, .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: color-mix(in oklch, var(--my-color) 50%, transparent);
-      -webkit-text-decoration-color: color-mix(in oklch, var(--my-color) 50%, transparent);
-      text-decoration-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
     }
 
     .decoration-current {
@@ -13438,9 +13433,9 @@ test('decoration', async () => {
     }
 
     .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: color-mix(in oklch, currentColor 50%, transparent);
-      -webkit-text-decoration-color: color-mix(in oklch, currentColor 50%, transparent);
-      text-decoration-color: color-mix(in oklch, currentColor 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);
+      text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .decoration-inherit {
@@ -13456,9 +13451,9 @@ test('decoration', async () => {
     }
 
     .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
-      -webkit-text-decoration-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
-      text-decoration-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .decoration-transparent {
@@ -15185,7 +15180,7 @@ test('outline', async () => {
     }
 
     .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      outline-color: oklch(59.9824% .14119 241.555 / .5);
+      outline-color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .outline-\\[black\\] {
@@ -15193,15 +15188,15 @@ test('outline', async () => {
     }
 
     .outline-\\[black\\]\\/50 {
-      outline-color: oklch(0% none none / .5);
+      outline-color: oklab(0% none none / .5);
     }
 
     .outline-\\[black\\]\\/\\[0\\.5\\] {
-      outline-color: oklch(0% none none / .5);
+      outline-color: oklab(0% none none / .5);
     }
 
     .outline-\\[black\\]\\/\\[50\\%\\] {
-      outline-color: oklch(0% none none / .5);
+      outline-color: oklab(0% none none / .5);
     }
 
     .outline-\\[color\\:var\\(--value\\)\\] {
@@ -15209,7 +15204,7 @@ test('outline', async () => {
     }
 
     .outline-\\[color\\:var\\(--value\\)\\]\\/50, .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-      outline-color: color-mix(in oklch, var(--value) 50%, transparent);
+      outline-color: color-mix(in oklab, var(--value) 50%, transparent);
     }
 
     .outline-\\[var\\(--value\\)\\] {
@@ -15217,7 +15212,7 @@ test('outline', async () => {
     }
 
     .outline-\\[var\\(--value\\)\\]\\/50, .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\], .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] {
-      outline-color: color-mix(in oklch, var(--value) 50%, transparent);
+      outline-color: color-mix(in oklab, var(--value) 50%, transparent);
     }
 
     .outline-current {
@@ -15225,7 +15220,7 @@ test('outline', async () => {
     }
 
     .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] {
-      outline-color: color-mix(in oklch, currentColor 50%, transparent);
+      outline-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .outline-inherit {
@@ -15237,7 +15232,7 @@ test('outline', async () => {
     }
 
     .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] {
-      outline-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .outline-transparent {
@@ -15617,7 +15612,7 @@ test('text', async () => {
     }
 
     .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      color: oklch(59.9824% .14119 241.555 / .5);
+      color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .text-\\[color\\:var\\(--my-color\\)\\] {
@@ -15625,7 +15620,7 @@ test('text', async () => {
     }
 
     .text-\\[color\\:var\\(--my-color\\)\\]\\/50, .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      color: color-mix(in oklch, var(--my-color) 50%, transparent);
+      color: color-mix(in oklab, var(--my-color) 50%, transparent);
     }
 
     .text-\\[var\\(--my-color\\)\\] {
@@ -15633,7 +15628,7 @@ test('text', async () => {
     }
 
     .text-\\[var\\(--my-color\\)\\]\\/50, .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      color: color-mix(in oklch, var(--my-color) 50%, transparent);
+      color: color-mix(in oklab, var(--my-color) 50%, transparent);
     }
 
     .text-current {
@@ -15641,7 +15636,7 @@ test('text', async () => {
     }
 
     .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] {
-      color: color-mix(in oklch, currentColor 50%, transparent);
+      color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .text-inherit {
@@ -15653,19 +15648,19 @@ test('text', async () => {
     }
 
     .text-red-500\\/2\\.5 {
-      color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+      color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
     }
 
     .text-red-500\\/2\\.25 {
-      color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+      color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
     }
 
     .text-red-500\\/2\\.75 {
-      color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+      color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
     }
 
     .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] {
-      color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .text-transparent {
@@ -15786,7 +15781,7 @@ test('shadow', async () => {
     }
 
     .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-shadow-color: oklch(59.9824% .14119 241.555 / .5);
+      --tw-shadow-color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .shadow-\\[color\\:var\\(--value\\)\\] {
@@ -15794,7 +15789,7 @@ test('shadow', async () => {
     }
 
     .shadow-\\[color\\:var\\(--value\\)\\]\\/50, .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-      --tw-shadow-color: color-mix(in oklch, var(--value) 50%, transparent);
+      --tw-shadow-color: color-mix(in oklab, var(--value) 50%, transparent);
     }
 
     .shadow-current {
@@ -15802,7 +15797,7 @@ test('shadow', async () => {
     }
 
     .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] {
-      --tw-shadow-color: color-mix(in oklch, currentColor 50%, transparent);
+      --tw-shadow-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .shadow-inherit {
@@ -15814,19 +15809,19 @@ test('shadow', async () => {
     }
 
     .shadow-red-500\\/2\\.5 {
-      --tw-shadow-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+      --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
     }
 
     .shadow-red-500\\/2\\.25 {
-      --tw-shadow-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+      --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
     }
 
     .shadow-red-500\\/2\\.75 {
-      --tw-shadow-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+      --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
     }
 
     .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] {
-      --tw-shadow-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      --tw-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .shadow-transparent {
@@ -16029,7 +16024,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: oklch(59.9824% .14119 241.555 / .5);
+      --tw-inset-shadow-color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .inset-shadow-\\[color\\:var\\(--value\\)\\] {
@@ -16037,7 +16032,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50, .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: color-mix(in oklch, var(--value) 50%, transparent);
+      --tw-inset-shadow-color: color-mix(in oklab, var(--value) 50%, transparent);
     }
 
     .inset-shadow-current {
@@ -16045,7 +16040,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: color-mix(in oklch, currentColor 50%, transparent);
+      --tw-inset-shadow-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .inset-shadow-inherit {
@@ -16057,19 +16052,19 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-red-500\\/2\\.5 {
-      --tw-inset-shadow-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+      --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
     }
 
     .inset-shadow-red-500\\/2\\.25 {
-      --tw-inset-shadow-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+      --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
     }
 
     .inset-shadow-red-500\\/2\\.75 {
-      --tw-inset-shadow-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+      --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
     }
 
     .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      --tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .inset-shadow-transparent {
@@ -16278,7 +16273,7 @@ test('ring', async () => {
     }
 
     .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-ring-color: oklch(59.9824% .14119 241.555 / .5);
+      --tw-ring-color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .ring-\\[color\\:var\\(--my-color\\)\\] {
@@ -16286,7 +16281,7 @@ test('ring', async () => {
     }
 
     .ring-\\[color\\:var\\(--my-color\\)\\]\\/50, .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+      --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
     }
 
     .ring-\\[var\\(--my-color\\)\\] {
@@ -16294,7 +16289,7 @@ test('ring', async () => {
     }
 
     .ring-\\[var\\(--my-color\\)\\]\\/50, .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+      --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
     }
 
     .ring-current {
@@ -16302,7 +16297,7 @@ test('ring', async () => {
     }
 
     .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] {
-      --tw-ring-color: color-mix(in oklch, currentColor 50%, transparent);
+      --tw-ring-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .ring-inherit {
@@ -16314,19 +16309,19 @@ test('ring', async () => {
     }
 
     .ring-red-500\\/2\\.5 {
-      --tw-ring-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+      --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
     }
 
     .ring-red-500\\/2\\.25 {
-      --tw-ring-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+      --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
     }
 
     .ring-red-500\\/2\\.75 {
-      --tw-ring-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+      --tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
     }
 
     .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] {
-      --tw-ring-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      --tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .ring-transparent {
@@ -16553,7 +16548,7 @@ test('inset-ring', async () => {
     }
 
     .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-inset-ring-color: oklch(59.9824% .14119 241.555 / .5);
+      --tw-inset-ring-color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .inset-ring-\\[color\\:var\\(--my-color\\)\\] {
@@ -16561,7 +16556,7 @@ test('inset-ring', async () => {
     }
 
     .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50, .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-inset-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+      --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
     }
 
     .inset-ring-\\[var\\(--my-color\\)\\] {
@@ -16569,7 +16564,7 @@ test('inset-ring', async () => {
     }
 
     .inset-ring-\\[var\\(--my-color\\)\\]\\/50, .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-inset-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+      --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
     }
 
     .inset-ring-current {
@@ -16577,7 +16572,7 @@ test('inset-ring', async () => {
     }
 
     .inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] {
-      --tw-inset-ring-color: color-mix(in oklch, currentColor 50%, transparent);
+      --tw-inset-ring-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .inset-ring-inherit {
@@ -16589,19 +16584,19 @@ test('inset-ring', async () => {
     }
 
     .inset-ring-red-500\\/2\\.5 {
-      --tw-inset-ring-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
+      --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
     }
 
     .inset-ring-red-500\\/2\\.25 {
-      --tw-inset-ring-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
+      --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
     }
 
     .inset-ring-red-500\\/2\\.75 {
-      --tw-inset-ring-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
+      --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
     }
 
     .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] {
-      --tw-inset-ring-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      --tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .inset-ring-transparent {
@@ -16816,7 +16811,7 @@ test('ring-offset', async () => {
     }
 
     .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-ring-offset-color: oklch(59.9824% .14119 241.555 / .5);
+      --tw-ring-offset-color: oklab(59.9824% -.0672516 -.124144 / .5);
     }
 
     .ring-offset-\\[color\\:var\\(--my-color\\)\\] {
@@ -16824,7 +16819,7 @@ test('ring-offset', async () => {
     }
 
     .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50, .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-ring-offset-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+      --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
     }
 
     .ring-offset-\\[var\\(--my-color\\)\\] {
@@ -16832,7 +16827,7 @@ test('ring-offset', async () => {
     }
 
     .ring-offset-\\[var\\(--my-color\\)\\]\\/50, .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-ring-offset-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+      --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
     }
 
     .ring-offset-current {
@@ -16840,7 +16835,7 @@ test('ring-offset', async () => {
     }
 
     .ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] {
-      --tw-ring-offset-color: color-mix(in oklch, currentColor 50%, transparent);
+      --tw-ring-offset-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .ring-offset-inherit {
@@ -16852,7 +16847,7 @@ test('ring-offset', async () => {
     }
 
     .ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] {
-      --tw-ring-offset-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
+      --tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
     }
 
     .ring-offset-transparent {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 5300967e2b61..9893bf0ae178 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -118,7 +118,7 @@ export function withAlpha(value: string, alpha: string): string {
     alpha = `${alphaAsNumber * 100}%`
   }
 
-  return `color-mix(in oklch, ${value} ${alpha}, transparent)`
+  return `color-mix(in oklab, ${value} ${alpha}, transparent)`
 }
 
 /**
@@ -2320,7 +2320,7 @@ export function createUtilities(theme: Theme) {
     ])
 
     function resolveInterpolationModifier(modifier: CandidateModifier | null) {
-      let interpolationMethod = 'in oklch'
+      let interpolationMethod = 'in oklab'
 
       if (modifier?.kind === 'named') {
         switch (modifier.value) {
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index 103307d78657..5b3563ed2f03 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -30,40 +30,40 @@ test('touch action', async ({ page }) => {
 for (let [classes, expected] of [
   [
     'bg-linear-to-r from-red',
-    'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
+    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
   ],
   [
     'bg-linear-to-r via-red',
-    'linear-gradient(to right in oklch, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)',
+    'linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)',
   ],
   [
     'bg-linear-to-r to-red',
-    'linear-gradient(to right in oklch, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 100%)',
+    'linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 100%)',
   ],
   [
     'bg-linear-to-r from-red to-blue',
-    'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
   ],
   [
     'bg-linear-45 from-red to-blue',
-    'linear-gradient(45deg in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+    'linear-gradient(45deg in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
   ],
   [
     '-bg-linear-45 from-red to-blue',
     // Chrome reports a different (but also correct) computed value than Firefox/WebKit so we check
     // for both options.
     [
-      'linear-gradient(-45deg in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
-      'linear-gradient(calc(-45deg) in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+      'linear-gradient(-45deg in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+      'linear-gradient(calc(-45deg) in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
     ],
   ],
   [
     'bg-linear-to-r via-red to-blue',
-    'linear-gradient(to right in oklch, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgb(0, 0, 255) 100%)',
+    'linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgb(0, 0, 255) 100%)',
   ],
   [
     'bg-linear-to-r from-red via-green to-blue',
-    'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
+    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
   ],
   [
     'bg-linear-[to_right,var(--color-red),var(--color-green),var(--color-blue)]',
@@ -91,13 +91,13 @@ test('background gradient, going from 2 to 3', async ({ page }) => {
   )
 
   expect(await getPropertyValue('#x', 'background-image')).toEqual(
-    'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
   )
 
   await page.locator('#x').hover()
 
   expect(await getPropertyValue('#x', 'background-image')).toEqual(
-    'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
+    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
   )
 })
 
@@ -112,21 +112,21 @@ test('background gradient, going from 3 to 2', async ({ page }) => {
   )
 
   expect(await getPropertyValue('#x', 'background-image')).toEqual(
-    'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
+    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
   )
 
   await page.locator('#x').hover()
 
   expect(await getPropertyValue('#x', 'background-image')).toEqual(
-    'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+    'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
   )
 })
 
 for (let [classes, expected] of [
-  ['bg-conic from-red', 'conic-gradient(in oklch, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
+  ['bg-conic from-red', 'conic-gradient(in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
   [
     'bg-conic-45 from-red',
-    'conic-gradient(from 45deg in oklch, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
+    'conic-gradient(from 45deg in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
   ],
   [
     'bg-conic-[from_45deg] from-red',
@@ -148,7 +148,7 @@ for (let [classes, expected] of [
 }
 
 for (let [classes, expected] of [
-  ['bg-radial from-red', 'radial-gradient(in oklch, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
+  ['bg-radial from-red', 'radial-gradient(in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
   [
     'bg-radial-[at_0%_0%] from-red',
     'radial-gradient(at 0% 0%, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',