diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7940c36fd811..40f1317f2eb3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Allow spaces spaces around operators in attribute selector variants ([#14703](https://github.com/tailwindlabs/tailwindcss/pull/14703))
+- Ensure color opacity modifiers work with OKLCH colors ([#14741](https://github.com/tailwindlabs/tailwindcss/pull/14741))
 - _Upgrade (experimental)_: Migrate `flex-grow` to `grow` and `flex-shrink` to `shrink` ([#14721](https://github.com/tailwindlabs/tailwindcss/pull/14721))
 - _Upgrade (experimental)_: Minify arbitrary values when printing candidates ([#14720](https://github.com/tailwindlabs/tailwindcss/pull/14720))
 - _Upgrade (experimental)_: Ensure legacy theme values ending in `1` (like `theme(spacing.1)`) are correctly migrated to custom properties ([#14724](https://github.com/tailwindlabs/tailwindcss/pull/14724))
diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts
index ef7a188e133a..cf068b6e614b 100644
--- a/integrations/upgrade/js-config.test.ts
+++ b/integrations/upgrade/js-config.test.ts
@@ -270,17 +270,17 @@ test(
       @import 'tailwindcss';
 
       @theme {
-        --color-gray-50: oklch(0.985 0 none);
-        --color-gray-100: oklch(0.97 0 none);
-        --color-gray-200: oklch(0.922 0 none);
-        --color-gray-300: oklch(0.87 0 none);
-        --color-gray-400: oklch(0.708 0 none);
-        --color-gray-500: oklch(0.556 0 none);
-        --color-gray-600: oklch(0.439 0 none);
-        --color-gray-700: oklch(0.371 0 none);
-        --color-gray-800: oklch(0.269 0 none);
-        --color-gray-900: oklch(0.205 0 none);
-        --color-gray-950: oklch(0.145 0 none);
+        --color-gray-50: oklch(0.985 0 0);
+        --color-gray-100: oklch(0.97 0 0);
+        --color-gray-200: oklch(0.922 0 0);
+        --color-gray-300: oklch(0.87 0 0);
+        --color-gray-400: oklch(0.708 0 0);
+        --color-gray-500: oklch(0.556 0 0);
+        --color-gray-600: oklch(0.439 0 0);
+        --color-gray-700: oklch(0.371 0 0);
+        --color-gray-800: oklch(0.269 0 0);
+        --color-gray-900: oklch(0.205 0 0);
+        --color-gray-950: oklch(0.145 0 0);
       }
       "
     `)
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index 6bae1add233f..507e72d5fe2d 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -40,7 +40,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --color-gray-800: oklch(.278 .033 256.848);
     --color-gray-900: oklch(.21 .034 264.665);
     --color-gray-950: oklch(.13 .028 261.692);
-    --color-zinc-50: oklch(.985 0 none);
+    --color-zinc-50: oklch(.985 0 0);
     --color-zinc-100: oklch(.967 .001 286.375);
     --color-zinc-200: oklch(.92 .004 286.32);
     --color-zinc-300: oklch(.871 .006 286.286);
@@ -51,17 +51,17 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --color-zinc-800: oklch(.274 .006 286.033);
     --color-zinc-900: oklch(.21 .006 285.885);
     --color-zinc-950: oklch(.141 .005 285.823);
-    --color-neutral-50: oklch(.985 0 none);
-    --color-neutral-100: oklch(.97 0 none);
-    --color-neutral-200: oklch(.922 0 none);
-    --color-neutral-300: oklch(.87 0 none);
-    --color-neutral-400: oklch(.708 0 none);
-    --color-neutral-500: oklch(.556 0 none);
-    --color-neutral-600: oklch(.439 0 none);
-    --color-neutral-700: oklch(.371 0 none);
-    --color-neutral-800: oklch(.269 0 none);
-    --color-neutral-900: oklch(.205 0 none);
-    --color-neutral-950: oklch(.145 0 none);
+    --color-neutral-50: oklch(.985 0 0);
+    --color-neutral-100: oklch(.97 0 0);
+    --color-neutral-200: oklch(.922 0 0);
+    --color-neutral-300: oklch(.87 0 0);
+    --color-neutral-400: oklch(.708 0 0);
+    --color-neutral-500: oklch(.556 0 0);
+    --color-neutral-600: oklch(.439 0 0);
+    --color-neutral-700: oklch(.371 0 0);
+    --color-neutral-800: oklch(.269 0 0);
+    --color-neutral-900: oklch(.205 0 0);
+    --color-neutral-950: oklch(.145 0 0);
     --color-stone-50: oklch(.985 .001 106.423);
     --color-stone-100: oklch(.97 .001 106.424);
     --color-stone-200: oklch(.923 .003 48.717);
@@ -563,7 +563,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
   ::placeholder {
     opacity: 1;
-    color: color-mix(in srgb, currentColor 50%, transparent);
+    color: color-mix(in oklch, currentColor 50%, transparent);
   }
 
   img, svg, video, canvas, audio, iframe, embed, object {
@@ -590,7 +590,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 
   .text-black\\/50 {
-    color: color-mix(in srgb, var(--color-black, #000) 50%, transparent);
+    color: color-mix(in oklch, var(--color-black, #000) 50%, transparent);
   }
 
   .underline {
diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
index 169f646ba0ab..c1857b1bf673 100644
--- a/packages/tailwindcss/preflight.css
+++ b/packages/tailwindcss/preflight.css
@@ -286,7 +286,7 @@ textarea {
 
 ::placeholder {
   opacity: 1; /* 1 */
-  color: color-mix(in srgb, currentColor 50%, transparent); /* 2 */
+  color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
 }
 
 /*
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index cbc12d7d64a4..4a7c02cac093 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -39,7 +39,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --color-gray-800: oklch(.278 .033 256.848);
   --color-gray-900: oklch(.21 .034 264.665);
   --color-gray-950: oklch(.13 .028 261.692);
-  --color-zinc-50: oklch(.985 0 none);
+  --color-zinc-50: oklch(.985 0 0);
   --color-zinc-100: oklch(.967 .001 286.375);
   --color-zinc-200: oklch(.92 .004 286.32);
   --color-zinc-300: oklch(.871 .006 286.286);
@@ -50,17 +50,17 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --color-zinc-800: oklch(.274 .006 286.033);
   --color-zinc-900: oklch(.21 .006 285.885);
   --color-zinc-950: oklch(.141 .005 285.823);
-  --color-neutral-50: oklch(.985 0 none);
-  --color-neutral-100: oklch(.97 0 none);
-  --color-neutral-200: oklch(.922 0 none);
-  --color-neutral-300: oklch(.87 0 none);
-  --color-neutral-400: oklch(.708 0 none);
-  --color-neutral-500: oklch(.556 0 none);
-  --color-neutral-600: oklch(.439 0 none);
-  --color-neutral-700: oklch(.371 0 none);
-  --color-neutral-800: oklch(.269 0 none);
-  --color-neutral-900: oklch(.205 0 none);
-  --color-neutral-950: oklch(.145 0 none);
+  --color-neutral-50: oklch(.985 0 0);
+  --color-neutral-100: oklch(.97 0 0);
+  --color-neutral-200: oklch(.922 0 0);
+  --color-neutral-300: oklch(.87 0 0);
+  --color-neutral-400: oklch(.708 0 0);
+  --color-neutral-500: oklch(.556 0 0);
+  --color-neutral-600: oklch(.439 0 0);
+  --color-neutral-700: oklch(.371 0 0);
+  --color-neutral-800: oklch(.269 0 0);
+  --color-neutral-900: oklch(.205 0 0);
+  --color-neutral-950: oklch(.145 0 0);
   --color-stone-50: oklch(.985 .001 106.423);
   --color-stone-100: oklch(.97 .001 106.424);
   --color-stone-200: oklch(.923 .003 48.717);
diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
index 983c17919663..57168d12d41f 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: #0088cc80;
+  border-color: oklch(59.9824% .14119 241.555 / .5);
 }
 
 .border-\\[color\\:var\\(--my-color\\)\\] {
@@ -71,7 +71,7 @@ exports[`border-* 1`] = `
 }
 
 .border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-color: color-mix(in oklch, 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 srgb, var(--my-color) 50%, transparent);
+  border-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-current {
@@ -87,7 +87,7 @@ exports[`border-* 1`] = `
 }
 
 .border-current\\/50 {
-  border-color: color-mix(in srgb, currentColor 50%, transparent);
+  border-color: color-mix(in oklch, currentColor 50%, transparent);
 }
 
 .border-inherit {
@@ -99,7 +99,7 @@ exports[`border-* 1`] = `
 }
 
 .border-red-500\\/50 {
-  border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-transparent {
@@ -184,7 +184,7 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-\\[\\#0088cc\\]\\/50 {
-  border-bottom-color: #0088cc80;
+  border-bottom-color: oklch(59.9824% .14119 241.555 / .5);
 }
 
 .border-b-\\[color\\:var\\(--my-color\\)\\] {
@@ -192,7 +192,7 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-b-\\[var\\(--my-color\\)\\] {
@@ -200,7 +200,7 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-\\[var\\(--my-color\\)\\]\\/50 {
-  border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-b-current {
@@ -208,7 +208,7 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-current\\/50 {
-  border-bottom-color: color-mix(in srgb, currentColor 50%, transparent);
+  border-bottom-color: color-mix(in oklch, currentColor 50%, transparent);
 }
 
 .border-b-inherit {
@@ -220,7 +220,7 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-red-500\\/50 {
-  border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-bottom-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-b-transparent {
@@ -305,7 +305,7 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-\\[\\#0088cc\\]\\/50 {
-  border-inline-end-color: #0088cc80;
+  border-inline-end-color: oklch(59.9824% .14119 241.555 / .5);
 }
 
 .border-e-\\[color\\:var\\(--my-color\\)\\] {
@@ -313,7 +313,7 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-inline-end-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-e-\\[var\\(--my-color\\)\\] {
@@ -321,7 +321,7 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-\\[var\\(--my-color\\)\\]\\/50 {
-  border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-inline-end-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-e-current {
@@ -329,7 +329,7 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-current\\/50 {
-  border-inline-end-color: color-mix(in srgb, currentColor 50%, transparent);
+  border-inline-end-color: color-mix(in oklch, currentColor 50%, transparent);
 }
 
 .border-e-inherit {
@@ -341,7 +341,7 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-red-500\\/50 {
-  border-inline-end-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-inline-end-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-e-transparent {
@@ -426,7 +426,7 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-\\[\\#0088cc\\]\\/50 {
-  border-left-color: #0088cc80;
+  border-left-color: oklch(59.9824% .14119 241.555 / .5);
 }
 
 .border-l-\\[color\\:var\\(--my-color\\)\\] {
@@ -434,7 +434,7 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-l-\\[var\\(--my-color\\)\\] {
@@ -442,7 +442,7 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-\\[var\\(--my-color\\)\\]\\/50 {
-  border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-l-current {
@@ -450,7 +450,7 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-current\\/50 {
-  border-left-color: color-mix(in srgb, currentColor 50%, transparent);
+  border-left-color: color-mix(in oklch, currentColor 50%, transparent);
 }
 
 .border-l-inherit {
@@ -462,7 +462,7 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-red-500\\/50 {
-  border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-left-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-l-transparent {
@@ -547,7 +547,7 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-\\[\\#0088cc\\]\\/50 {
-  border-right-color: #0088cc80;
+  border-right-color: oklch(59.9824% .14119 241.555 / .5);
 }
 
 .border-r-\\[color\\:var\\(--my-color\\)\\] {
@@ -555,7 +555,7 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-r-\\[var\\(--my-color\\)\\] {
@@ -563,7 +563,7 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-\\[var\\(--my-color\\)\\]\\/50 {
-  border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-r-current {
@@ -571,7 +571,7 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-current\\/50 {
-  border-right-color: color-mix(in srgb, currentColor 50%, transparent);
+  border-right-color: color-mix(in oklch, currentColor 50%, transparent);
 }
 
 .border-r-inherit {
@@ -583,7 +583,7 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-red-500\\/50 {
-  border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-right-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-r-transparent {
@@ -668,7 +668,7 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-\\[\\#0088cc\\]\\/50 {
-  border-inline-start-color: #0088cc80;
+  border-inline-start-color: oklch(59.9824% .14119 241.555 / .5);
 }
 
 .border-s-\\[color\\:var\\(--my-color\\)\\] {
@@ -676,7 +676,7 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-inline-start-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-s-\\[var\\(--my-color\\)\\] {
@@ -684,7 +684,7 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-\\[var\\(--my-color\\)\\]\\/50 {
-  border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-inline-start-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-s-current {
@@ -692,7 +692,7 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-current\\/50 {
-  border-inline-start-color: color-mix(in srgb, currentColor 50%, transparent);
+  border-inline-start-color: color-mix(in oklch, currentColor 50%, transparent);
 }
 
 .border-s-inherit {
@@ -704,7 +704,7 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-red-500\\/50 {
-  border-inline-start-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-inline-start-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-s-transparent {
@@ -789,7 +789,7 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-\\[\\#0088cc\\]\\/50 {
-  border-top-color: #0088cc80;
+  border-top-color: oklch(59.9824% .14119 241.555 / .5);
 }
 
 .border-t-\\[color\\:var\\(--my-color\\)\\] {
@@ -797,7 +797,7 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-t-\\[var\\(--my-color\\)\\] {
@@ -805,7 +805,7 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-\\[var\\(--my-color\\)\\]\\/50 {
-  border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-t-current {
@@ -813,7 +813,7 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-current\\/50 {
-  border-top-color: color-mix(in srgb, currentColor 50%, transparent);
+  border-top-color: color-mix(in oklch, currentColor 50%, transparent);
 }
 
 .border-t-inherit {
@@ -825,7 +825,7 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-red-500\\/50 {
-  border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-top-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-t-transparent {
@@ -931,8 +931,8 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-\\[\\#0088cc\\]\\/50 {
-  border-left-color: #0088cc80;
-  border-right-color: #0088cc80;
+  border-left-color: oklch(59.9824% .14119 241.555 / .5);
+  border-right-color: oklch(59.9824% .14119 241.555 / .5);
 }
 
 .border-x-\\[color\\:var\\(--my-color\\)\\] {
@@ -941,8 +941,8 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
-  border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-x-\\[var\\(--my-color\\)\\] {
@@ -951,8 +951,8 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-\\[var\\(--my-color\\)\\]\\/50 {
-  border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
-  border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-x-current {
@@ -961,8 +961,8 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-current\\/50 {
-  border-left-color: color-mix(in srgb, currentColor 50%, transparent);
-  border-right-color: color-mix(in srgb, currentColor 50%, transparent);
+  border-left-color: color-mix(in oklch, currentColor 50%, transparent);
+  border-right-color: color-mix(in oklch, currentColor 50%, transparent);
 }
 
 .border-x-inherit {
@@ -976,8 +976,8 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-red-500\\/50 {
-  border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
-  border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-left-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
+  border-right-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-x-transparent {
@@ -1084,8 +1084,8 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-\\[\\#0088cc\\]\\/50 {
-  border-top-color: #0088cc80;
-  border-bottom-color: #0088cc80;
+  border-top-color: oklch(59.9824% .14119 241.555 / .5);
+  border-bottom-color: oklch(59.9824% .14119 241.555 / .5);
 }
 
 .border-y-\\[color\\:var\\(--my-color\\)\\] {
@@ -1094,8 +1094,8 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
-  border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-y-\\[var\\(--my-color\\)\\] {
@@ -1104,8 +1104,8 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-\\[var\\(--my-color\\)\\]\\/50 {
-  border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
-  border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+  border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
+  border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
 }
 
 .border-y-current {
@@ -1114,8 +1114,8 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-current\\/50 {
-  border-top-color: color-mix(in srgb, currentColor 50%, transparent);
-  border-bottom-color: color-mix(in srgb, currentColor 50%, transparent);
+  border-top-color: color-mix(in oklch, currentColor 50%, transparent);
+  border-bottom-color: color-mix(in oklch, currentColor 50%, transparent);
 }
 
 .border-y-inherit {
@@ -1129,8 +1129,8 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-red-500\\/50 {
-  border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
-  border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+  border-top-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
+  border-bottom-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
 }
 
 .border-y-transparent {
diff --git a/packages/tailwindcss/src/compat/colors.ts b/packages/tailwindcss/src/compat/colors.ts
index fdd7c8355e95..0a6cba403954 100644
--- a/packages/tailwindcss/src/compat/colors.ts
+++ b/packages/tailwindcss/src/compat/colors.ts
@@ -31,7 +31,7 @@ export default {
     '950': 'oklch(0.13 0.028 261.692)',
   },
   zinc: {
-    '50': 'oklch(0.985 0 none)',
+    '50': 'oklch(0.985 0 0)',
     '100': 'oklch(0.967 0.001 286.375)',
     '200': 'oklch(0.92 0.004 286.32)',
     '300': 'oklch(0.871 0.006 286.286)',
@@ -44,17 +44,17 @@ export default {
     '950': 'oklch(0.141 0.005 285.823)',
   },
   neutral: {
-    '50': 'oklch(0.985 0 none)',
-    '100': 'oklch(0.97 0 none)',
-    '200': 'oklch(0.922 0 none)',
-    '300': 'oklch(0.87 0 none)',
-    '400': 'oklch(0.708 0 none)',
-    '500': 'oklch(0.556 0 none)',
-    '600': 'oklch(0.439 0 none)',
-    '700': 'oklch(0.371 0 none)',
-    '800': 'oklch(0.269 0 none)',
-    '900': 'oklch(0.205 0 none)',
-    '950': 'oklch(0.145 0 none)',
+    '50': 'oklch(0.985 0 0)',
+    '100': 'oklch(0.97 0 0)',
+    '200': 'oklch(0.922 0 0)',
+    '300': 'oklch(0.87 0 0)',
+    '400': 'oklch(0.708 0 0)',
+    '500': 'oklch(0.556 0 0)',
+    '600': 'oklch(0.439 0 0)',
+    '700': 'oklch(0.371 0 0)',
+    '800': 'oklch(0.269 0 0)',
+    '900': 'oklch(0.205 0 0)',
+    '950': 'oklch(0.145 0 0)',
   },
   stone: {
     '50': 'oklch(0.985 0.001 106.423)',
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
index 2c7d1b315272..abde27c9f1e9 100644
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -252,13 +252,13 @@ describe('theme', async () => {
 
     expect(compiler.build(['percentage', 'fraction', 'variable'])).toMatchInlineSnapshot(`
       ".fraction {
-        color: color-mix(in srgb, #ef4444 50%, transparent);
+        color: color-mix(in oklch, #ef4444 50%, transparent);
       }
       .percentage {
-        color: color-mix(in srgb, #ef4444 50%, transparent);
+        color: color-mix(in oklch, #ef4444 50%, transparent);
       }
       .variable {
-        color: color-mix(in srgb, #ef4444 calc(var(--opacity) * 100%), transparent);
+        color: color-mix(in oklch, #ef4444 calc(var(--opacity) * 100%), transparent);
       }
       :root {
         --color-red-500: #ef4444;
@@ -3017,7 +3017,7 @@ describe('matchUtilities()', () => {
         }
 
         .scrollbar-\\[\\#08c\\]\\/50 {
-          scrollbar-color: #0088cc80;
+          scrollbar-color: oklch(59.9824% .14119 241.555 / .5);
         }
 
         .scrollbar-\\[2px\\] {
@@ -3180,7 +3180,7 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-\\[\\#fff\\]\\/50 {
-        scrollbar-color: #ffffff80;
+        scrollbar-color: oklch(100% 5.96046e-8 none / .5);
       }
 
       .scrollbar-\\[2px\\] {
@@ -3192,7 +3192,7 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        scrollbar-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+        scrollbar-color: color-mix(in oklch, var(--my-color) 50%, transparent);
       }
 
       .scrollbar-\\[length\\:var\\(--my-width\\)\\] {
@@ -3204,7 +3204,7 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-\\[var\\(--my-color\\)\\]\\/50 {
-        scrollbar-color: color-mix(in srgb, var(--my-color) 50%, transparent);
+        scrollbar-color: color-mix(in oklch, var(--my-color) 50%, transparent);
       }
 
       .scrollbar-black {
@@ -3212,7 +3212,7 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-black\\/50 {
-        scrollbar-color: #00000080;
+        scrollbar-color: oklch(0% none none / .5);
       }"
     `)
 
@@ -3278,7 +3278,7 @@ describe('matchUtilities()', () => {
       ).trim(),
     ).toMatchInlineSnapshot(`
       ".scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] {
-        scrollbar-color: color-mix(in srgb, var(--my-color) 25%, transparent);
+        scrollbar-color: color-mix(in oklch, var(--my-color) 25%, transparent);
       }
 
       .scrollbar-black {
@@ -3286,11 +3286,11 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-black\\/33 {
-        scrollbar-color: #00000054;
+        scrollbar-color: oklch(0% none none / .33);
       }
 
       .scrollbar-black\\/\\[50\\%\\] {
-        scrollbar-color: #00000080;
+        scrollbar-color: oklch(0% none none / .5);
       }
 
       .scrollbar-current {
@@ -3298,7 +3298,7 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-current\\/45 {
-        scrollbar-color: color-mix(in srgb, currentColor 45%, transparent);
+        scrollbar-color: color-mix(in oklch, currentColor 45%, transparent);
       }"
     `)
   })
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index 0d3b11ffbf5f..cd7820b49aae 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: #ff0000bf;
+            color: oklch(62.7955% .257683 29.2339 / .75);
           }"
         `)
       })
@@ -173,7 +173,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: #ff0000bf;
+            color: oklch(62.7955% .257683 29.2339 / .75);
           }"
         `)
       })
@@ -194,7 +194,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: #ff0000bf;
+            color: oklch(62.7955% .257683 29.2339 / .75);
           }"
         `)
       })
@@ -215,7 +215,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: color-mix(in srgb, red calc(var(--opacity) * 100%), transparent);
+            color: color-mix(in oklch, red calc(var(--opacity) * 100%), transparent);
           }"
         `)
       })
@@ -237,7 +237,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: color-mix(in srgb, red calc(var(--opacity, 50%) * 100%), transparent);
+            color: color-mix(in oklch, red calc(var(--opacity, 50%) * 100%), transparent);
           }"
         `)
       })
@@ -455,7 +455,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: #ff000040;
+            color: oklch(62.7955% .257683 29.2339 / .25);
           }"
         `)
       })
@@ -513,11 +513,11 @@ describe('theme function', () => {
         ).toMatchInlineSnapshot(`
           ":root {
             --color-red-500: red;
-            --color-foo: #ff000080;
+            --color-foo: oklch(62.7955% .257683 29.2339 / .5);
           }
 
           .red {
-            color: #ff000040;
+            color: oklch(62.7955% .257683 29.2339 / .25);
           }"
         `)
       })
@@ -561,7 +561,7 @@ describe('theme function', () => {
           }
 
           .red {
-            color: #ff000080;
+            color: oklch(62.7955% .257683 29.2339 / .5);
           }"
         `)
       })
@@ -849,10 +849,10 @@ describe('in plugins', () => {
         @layer base, utilities;
         @plugin "my-plugin";
         @theme reference {
-          --color-red: red;
-          --color-orange: orange;
-          --color-blue: blue;
-          --color-pink: pink;
+          --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);
         }
         @layer utilities {
           @tailwind utilities;
@@ -886,16 +886,16 @@ describe('in plugins', () => {
     expect(optimizeCss(compiled.build(['my-utility'])).trim()).toMatchInlineSnapshot(`
       "@layer base {
         .my-base-rule {
-          color: red;
-          background-color: #00f;
-          border-color: #ffc0cb1a;
-          outline-color: #ffa50026;
+          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);
         }
       }
 
       @layer utilities {
         .my-utility {
-          color: red;
+          color: oklch(62% .25 30);
         }
       }"
     `)
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index d826f4d910f9..5c1f6286c6a5 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -129,7 +129,7 @@ describe('arbitrary properties', () => {
   it('should generate arbitrary properties with modifiers', async () => {
     expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(`
       ".\\[color\\:red\\]\\/50 {
-        color: #ff000080;
+        color: oklch(62.7955% .257683 29.2339 / .5);
       }"
     `)
   })
@@ -141,7 +141,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 srgb, var(--my-color) 50%, transparent);
+        color: color-mix(in oklch, var(--my-color) 50%, transparent);
       }"
     `)
   })
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 3f811a2fa5c2..23d2bb2140af 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -7438,7 +7438,7 @@ test('accent', async () => {
     }
 
     .accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      accent-color: #0088cc80;
+      accent-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .accent-current {
@@ -7446,7 +7446,7 @@ test('accent', async () => {
     }
 
     .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] {
-      accent-color: color-mix(in srgb, currentColor 50%, transparent);
+      accent-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .accent-inherit {
@@ -7458,7 +7458,7 @@ test('accent', async () => {
     }
 
     .accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] {
-      accent-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      accent-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .accent-transparent {
@@ -7538,7 +7538,7 @@ test('caret', async () => {
     }
 
     .caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      caret-color: #0088cc80;
+      caret-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .caret-current {
@@ -7546,7 +7546,7 @@ test('caret', async () => {
     }
 
     .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] {
-      caret-color: color-mix(in srgb, currentColor 50%, transparent);
+      caret-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .caret-inherit {
@@ -7558,7 +7558,7 @@ test('caret', async () => {
     }
 
     .caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] {
-      caret-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      caret-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .caret-transparent {
@@ -7636,15 +7636,15 @@ test('divide-color', async () => {
     }
 
     :where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)) {
-      border-color: #0088cc80;
+      border-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)) {
-      border-color: #0088cc80;
+      border-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: #0088cc80;
+      border-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     :where(.divide-current > :not(:last-child)) {
@@ -7652,15 +7652,15 @@ test('divide-color', async () => {
     }
 
     :where(.divide-current\\/50 > :not(:last-child)) {
-      border-color: color-mix(in srgb, currentColor 50%, transparent);
+      border-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) {
-      border-color: color-mix(in srgb, currentColor 50%, transparent);
+      border-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: color-mix(in srgb, currentColor 50%, transparent);
+      border-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     :where(.divide-inherit > :not(:last-child)) {
@@ -7672,15 +7672,15 @@ test('divide-color', async () => {
     }
 
     :where(.divide-red-500\\/50 > :not(:last-child)) {
-      border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) {
-      border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     :where(.divide-transparent > :not(:last-child)) {
@@ -9509,7 +9509,7 @@ test('bg', async () => {
     }
 
     .bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      background-color: #0088cc80;
+      background-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .bg-\\[color\\:var\\(--some-var\\)\\] {
@@ -9517,7 +9517,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 srgb, var(--some-var) 50%, transparent);
+      background-color: color-mix(in oklch, var(--some-var) 50%, transparent);
     }
 
     .bg-\\[var\\(--some-var\\)\\] {
@@ -9525,7 +9525,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 srgb, var(--some-var) 50%, transparent);
+      background-color: color-mix(in oklch, var(--some-var) 50%, transparent);
     }
 
     .bg-current {
@@ -9533,11 +9533,11 @@ test('bg', async () => {
     }
 
     .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] {
-      background-color: color-mix(in srgb, currentColor 50%, transparent);
+      background-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .bg-current\\/\\[var\\(--bg-opacity\\)\\] {
-      background-color: color-mix(in srgb, currentColor calc(var(--bg-opacity) * 100%), transparent);
+      background-color: color-mix(in oklch, currentColor calc(var(--bg-opacity) * 100%), transparent);
     }
 
     .bg-inherit {
@@ -9549,7 +9549,7 @@ test('bg', async () => {
     }
 
     .bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] {
-      background-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      background-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .bg-transparent {
@@ -9977,7 +9977,7 @@ test('from', async () => {
     }
 
     .from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-gradient-from: #0088cc80;
+      --tw-gradient-from: oklch(59.9824% .14119 241.555 / .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));
     }
 
@@ -9987,7 +9987,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 srgb, var(--my-color) 50%, transparent);
+      --tw-gradient-from: color-mix(in oklch, 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));
     }
 
@@ -9997,7 +9997,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 srgb, var(--my-color) 50%, transparent);
+      --tw-gradient-from: color-mix(in oklch, 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));
     }
 
@@ -10007,7 +10007,7 @@ test('from', async () => {
     }
 
     .from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] {
-      --tw-gradient-from: color-mix(in srgb, currentColor 50%, transparent);
+      --tw-gradient-from: color-mix(in oklch, 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));
     }
 
@@ -10022,7 +10022,7 @@ test('from', async () => {
     }
 
     .from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] {
-      --tw-gradient-from: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-gradient-from: color-mix(in oklch, var(--color-red-500, #ef4444) 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));
     }
 
@@ -10213,7 +10213,7 @@ test('via', async () => {
     }
 
     .via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-gradient-via: #0088cc80;
+      --tw-gradient-via: oklch(59.9824% .14119 241.555 / .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);
     }
@@ -10225,7 +10225,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 srgb, var(--my-color) 50%, transparent);
+      --tw-gradient-via: color-mix(in oklch, 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);
     }
@@ -10237,7 +10237,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 srgb, var(--my-color) 50%, transparent);
+      --tw-gradient-via: color-mix(in oklch, 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);
     }
@@ -10249,7 +10249,7 @@ test('via', async () => {
     }
 
     .via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] {
-      --tw-gradient-via: color-mix(in srgb, currentColor 50%, transparent);
+      --tw-gradient-via: color-mix(in oklch, 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);
     }
@@ -10267,7 +10267,7 @@ test('via', async () => {
     }
 
     .via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] {
-      --tw-gradient-via: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-gradient-via: color-mix(in oklch, var(--color-red-500, #ef4444) 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);
     }
@@ -10457,7 +10457,7 @@ test('to', async () => {
     }
 
     .to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-gradient-to: #0088cc80;
+      --tw-gradient-to: oklch(59.9824% .14119 241.555 / .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));
     }
 
@@ -10467,7 +10467,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 srgb, var(--my-color) 50%, transparent);
+      --tw-gradient-to: color-mix(in oklch, 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));
     }
 
@@ -10477,7 +10477,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 srgb, var(--my-color) 50%, transparent);
+      --tw-gradient-to: color-mix(in oklch, 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));
     }
 
@@ -10487,7 +10487,7 @@ test('to', async () => {
     }
 
     .to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] {
-      --tw-gradient-to: color-mix(in srgb, currentColor 50%, transparent);
+      --tw-gradient-to: color-mix(in oklch, 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));
     }
 
@@ -10502,7 +10502,7 @@ test('to', async () => {
     }
 
     .to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] {
-      --tw-gradient-to: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-gradient-to: color-mix(in oklch, var(--color-red-500, #ef4444) 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));
     }
 
@@ -11018,7 +11018,7 @@ test('fill', async () => {
     }
 
     .fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      fill: #0088cc80;
+      fill: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .fill-current {
@@ -11026,7 +11026,7 @@ test('fill', async () => {
     }
 
     .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] {
-      fill: color-mix(in srgb, currentColor 50%, transparent);
+      fill: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .fill-inherit {
@@ -11038,7 +11038,7 @@ test('fill', async () => {
     }
 
     .fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] {
-      fill: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      fill: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .fill-transparent {
@@ -11124,7 +11124,7 @@ test('stroke', async () => {
     }
 
     .stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      stroke: #0088cc80;
+      stroke: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .stroke-\\[color\\:var\\(--my-color\\)\\] {
@@ -11132,7 +11132,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 srgb, var(--my-color) 50%, transparent);
+      stroke: color-mix(in oklch, var(--my-color) 50%, transparent);
     }
 
     .stroke-\\[var\\(--my-color\\)\\] {
@@ -11140,7 +11140,7 @@ test('stroke', async () => {
     }
 
     .stroke-\\[var\\(--my-color\\)\\]\\/50, .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      stroke: color-mix(in srgb, var(--my-color) 50%, transparent);
+      stroke: color-mix(in oklch, var(--my-color) 50%, transparent);
     }
 
     .stroke-current {
@@ -11148,7 +11148,7 @@ test('stroke', async () => {
     }
 
     .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] {
-      stroke: color-mix(in srgb, currentColor 50%, transparent);
+      stroke: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .stroke-inherit {
@@ -11164,7 +11164,7 @@ test('stroke', async () => {
     }
 
     .stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] {
-      stroke: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      stroke: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .stroke-transparent {
@@ -11972,15 +11972,15 @@ test('placeholder', async () => {
     }
 
     .placeholder-\\[\\#0088cc\\]\\/50::placeholder {
-      color: #0088cc80;
+      color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder {
-      color: #0088cc80;
+      color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder {
-      color: #0088cc80;
+      color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .placeholder-current::placeholder {
@@ -11988,15 +11988,15 @@ test('placeholder', async () => {
     }
 
     .placeholder-current\\/50::placeholder {
-      color: color-mix(in srgb, currentColor 50%, transparent);
+      color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .placeholder-current\\/\\[0\\.5\\]::placeholder {
-      color: color-mix(in srgb, currentColor 50%, transparent);
+      color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .placeholder-current\\/\\[50\\%\\]::placeholder {
-      color: color-mix(in srgb, currentColor 50%, transparent);
+      color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .placeholder-inherit::placeholder {
@@ -12008,15 +12008,15 @@ test('placeholder', async () => {
     }
 
     .placeholder-red-500\\/50::placeholder {
-      color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .placeholder-red-500\\/\\[0\\.5\\]::placeholder {
-      color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .placeholder-red-500\\/\\[50\\%\\]::placeholder {
-      color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .placeholder-transparent::placeholder {
@@ -12109,7 +12109,7 @@ test('decoration', async () => {
     }
 
     .decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      text-decoration-color: #0088cc80;
+      text-decoration-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .decoration-\\[color\\:var\\(--my-color\\)\\] {
@@ -12118,8 +12118,8 @@ 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 srgb, var(--my-color) 50%, transparent);
-      text-decoration-color: color-mix(in srgb, 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);
     }
 
     .decoration-\\[var\\(--my-color\\)\\] {
@@ -12128,8 +12128,8 @@ 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 srgb, var(--my-color) 50%, transparent);
-      text-decoration-color: color-mix(in srgb, 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);
     }
 
     .decoration-current {
@@ -12137,8 +12137,8 @@ test('decoration', async () => {
     }
 
     .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
-      text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklch, currentColor 50%, transparent);
+      text-decoration-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .decoration-inherit {
@@ -12152,8 +12152,8 @@ test('decoration', async () => {
     }
 
     .decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
-      text-decoration-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
+      text-decoration-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .decoration-transparent {
@@ -13844,15 +13844,23 @@ test('outline', async () => {
     }
 
     .outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      outline-color: #0088cc80;
+      outline-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .outline-\\[black\\] {
       outline-color: #000;
     }
 
-    .outline-\\[black\\]\\/50, .outline-\\[black\\]\\/\\[0\\.5\\], .outline-\\[black\\]\\/\\[50\\%\\] {
-      outline-color: #00000080;
+    .outline-\\[black\\]\\/50 {
+      outline-color: oklch(0% none none / .5);
+    }
+
+    .outline-\\[black\\]\\/\\[0\\.5\\] {
+      outline-color: oklch(0% none none / .5);
+    }
+
+    .outline-\\[black\\]\\/\\[50\\%\\] {
+      outline-color: oklch(0% none none / .5);
     }
 
     .outline-\\[color\\:var\\(--value\\)\\] {
@@ -13860,7 +13868,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 srgb, var(--value) 50%, transparent);
+      outline-color: color-mix(in oklch, var(--value) 50%, transparent);
     }
 
     .outline-\\[var\\(--value\\)\\] {
@@ -13868,7 +13876,7 @@ test('outline', async () => {
     }
 
     .outline-\\[var\\(--value\\)\\]\\/50, .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\], .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] {
-      outline-color: color-mix(in srgb, var(--value) 50%, transparent);
+      outline-color: color-mix(in oklch, var(--value) 50%, transparent);
     }
 
     .outline-current {
@@ -13876,7 +13884,7 @@ test('outline', async () => {
     }
 
     .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] {
-      outline-color: color-mix(in srgb, currentColor 50%, transparent);
+      outline-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .outline-inherit {
@@ -13888,7 +13896,7 @@ test('outline', async () => {
     }
 
     .outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] {
-      outline-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      outline-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .outline-transparent {
@@ -14241,7 +14249,7 @@ test('text', async () => {
     }
 
     .text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      color: #0088cc80;
+      color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .text-\\[color\\:var\\(--my-color\\)\\] {
@@ -14249,7 +14257,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 srgb, var(--my-color) 50%, transparent);
+      color: color-mix(in oklch, var(--my-color) 50%, transparent);
     }
 
     .text-\\[var\\(--my-color\\)\\] {
@@ -14257,7 +14265,7 @@ test('text', async () => {
     }
 
     .text-\\[var\\(--my-color\\)\\]\\/50, .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      color: color-mix(in srgb, var(--my-color) 50%, transparent);
+      color: color-mix(in oklch, var(--my-color) 50%, transparent);
     }
 
     .text-current {
@@ -14265,7 +14273,7 @@ test('text', async () => {
     }
 
     .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] {
-      color: color-mix(in srgb, currentColor 50%, transparent);
+      color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .text-inherit {
@@ -14277,7 +14285,7 @@ test('text', async () => {
     }
 
     .text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] {
-      color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .text-transparent {
@@ -14395,7 +14403,7 @@ test('shadow', async () => {
     }
 
     .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-shadow-color: #0088cc80;
+      --tw-shadow-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .shadow-\\[color\\:var\\(--value\\)\\] {
@@ -14403,7 +14411,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 srgb, var(--value) 50%, transparent);
+      --tw-shadow-color: color-mix(in oklch, var(--value) 50%, transparent);
     }
 
     .shadow-current {
@@ -14411,7 +14419,7 @@ test('shadow', async () => {
     }
 
     .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] {
-      --tw-shadow-color: color-mix(in srgb, currentColor 50%, transparent);
+      --tw-shadow-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .shadow-inherit {
@@ -14423,7 +14431,7 @@ test('shadow', async () => {
     }
 
     .shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] {
-      --tw-shadow-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-shadow-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .shadow-transparent {
@@ -14623,7 +14631,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: #0088cc80;
+      --tw-inset-shadow-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .inset-shadow-\\[color\\:var\\(--value\\)\\] {
@@ -14631,7 +14639,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 srgb, var(--value) 50%, transparent);
+      --tw-inset-shadow-color: color-mix(in oklch, var(--value) 50%, transparent);
     }
 
     .inset-shadow-current {
@@ -14639,7 +14647,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 srgb, currentColor 50%, transparent);
+      --tw-inset-shadow-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .inset-shadow-inherit {
@@ -14651,7 +14659,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-inset-shadow-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .inset-shadow-transparent {
@@ -14857,7 +14865,7 @@ test('ring', async () => {
     }
 
     .ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-ring-color: #0088cc80;
+      --tw-ring-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .ring-\\[color\\:var\\(--my-color\\)\\] {
@@ -14865,7 +14873,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 srgb, var(--my-color) 50%, transparent);
+      --tw-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
     }
 
     .ring-\\[var\\(--my-color\\)\\] {
@@ -14873,7 +14881,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 srgb, var(--my-color) 50%, transparent);
+      --tw-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
     }
 
     .ring-current {
@@ -14881,7 +14889,7 @@ test('ring', async () => {
     }
 
     .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] {
-      --tw-ring-color: color-mix(in srgb, currentColor 50%, transparent);
+      --tw-ring-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .ring-inherit {
@@ -14893,7 +14901,7 @@ test('ring', async () => {
     }
 
     .ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] {
-      --tw-ring-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-ring-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .ring-transparent {
@@ -15120,7 +15128,7 @@ test('inset-ring', async () => {
     }
 
     .inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-inset-ring-color: #0088cc80;
+      --tw-inset-ring-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .inset-ring-\\[color\\:var\\(--my-color\\)\\] {
@@ -15128,7 +15136,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 srgb, var(--my-color) 50%, transparent);
+      --tw-inset-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
     }
 
     .inset-ring-\\[var\\(--my-color\\)\\] {
@@ -15136,7 +15144,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 srgb, var(--my-color) 50%, transparent);
+      --tw-inset-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
     }
 
     .inset-ring-current {
@@ -15144,7 +15152,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 srgb, currentColor 50%, transparent);
+      --tw-inset-ring-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .inset-ring-inherit {
@@ -15156,7 +15164,7 @@ test('inset-ring', async () => {
     }
 
     .inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] {
-      --tw-inset-ring-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-inset-ring-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .inset-ring-transparent {
@@ -15371,7 +15379,7 @@ test('ring-offset', async () => {
     }
 
     .ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-ring-offset-color: #0088cc80;
+      --tw-ring-offset-color: oklch(59.9824% .14119 241.555 / .5);
     }
 
     .ring-offset-\\[color\\:var\\(--my-color\\)\\] {
@@ -15379,7 +15387,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 srgb, var(--my-color) 50%, transparent);
+      --tw-ring-offset-color: color-mix(in oklch, var(--my-color) 50%, transparent);
     }
 
     .ring-offset-\\[var\\(--my-color\\)\\] {
@@ -15387,7 +15395,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 srgb, var(--my-color) 50%, transparent);
+      --tw-ring-offset-color: color-mix(in oklch, var(--my-color) 50%, transparent);
     }
 
     .ring-offset-current {
@@ -15395,7 +15403,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 srgb, currentColor 50%, transparent);
+      --tw-ring-offset-color: color-mix(in oklch, currentColor 50%, transparent);
     }
 
     .ring-offset-inherit {
@@ -15407,7 +15415,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 srgb, var(--color-red-500, #ef4444) 50%, transparent);
+      --tw-ring-offset-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
     }
 
     .ring-offset-transparent {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index a47dc123fdb2..5d46c7f32ab2 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -119,7 +119,7 @@ export function withAlpha(value: string, alpha: string): string {
     alpha = `calc(${alpha} * 100%)`
   }
 
-  return `color-mix(in srgb, ${value} ${alpha}, transparent)`
+  return `color-mix(in oklch, ${value} ${alpha}, transparent)`
 }
 
 /**
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index e29764ea2c94..defd5d63eb3a 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -214,17 +214,17 @@ test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) =>
     page,
     html`<div
       id="x"
-      class="shadow shadow-[#f00]/50 inset-shadow inset-shadow-[#0f0]/50 ring ring-[#fff]/50 inset-ring inset-ring-[#00f]/50"
+      class="shadow shadow-[#f00] inset-shadow inset-shadow-[#0f0] ring ring-[#fff] inset-ring inset-ring-[#00f]"
     ></div>`,
   )
 
   expect(await getPropertyValue('#x', 'box-shadow')).toEqual(
     [
-      'rgba(0, 255, 0, 0.5) 0px 2px 4px 0px inset', // inset-shadow
-      'rgba(0, 0, 255, 0.5) 0px 0px 0px 1px inset', // inset-ring
+      'rgb(0, 255, 0) 0px 2px 4px 0px inset', // inset-shadow
+      'rgb(0, 0, 255) 0px 0px 0px 1px inset', // inset-ring
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px', // ring-offset (disabled)
-      'rgba(255, 255, 255, 0.5) 0px 0px 0px 1px', // ring
-      'rgba(255, 0, 0, 0.5) 0px 1px 3px 0px, rgba(255, 0, 0, 0.5) 0px 1px 2px -1px', // shadow
+      'rgb(255, 255, 255) 0px 0px 0px 1px', // ring
+      'rgb(255, 0, 0) 0px 1px 3px 0px, rgb(255, 0, 0) 0px 1px 2px -1px', // shadow
     ].join(', '),
   )
 })
diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
index 3c9bdeaf397b..e16fc2acc860 100644
--- a/packages/tailwindcss/theme.css
+++ b/packages/tailwindcss/theme.css
@@ -44,7 +44,7 @@
   --color-gray-900: oklch(0.21 0.034 264.665);
   --color-gray-950: oklch(0.13 0.028 261.692);
 
-  --color-zinc-50: oklch(0.985 0 none);
+  --color-zinc-50: oklch(0.985 0 0);
   --color-zinc-100: oklch(0.967 0.001 286.375);
   --color-zinc-200: oklch(0.92 0.004 286.32);
   --color-zinc-300: oklch(0.871 0.006 286.286);
@@ -56,17 +56,17 @@
   --color-zinc-900: oklch(0.21 0.006 285.885);
   --color-zinc-950: oklch(0.141 0.005 285.823);
 
-  --color-neutral-50: oklch(0.985 0 none);
-  --color-neutral-100: oklch(0.97 0 none);
-  --color-neutral-200: oklch(0.922 0 none);
-  --color-neutral-300: oklch(0.87 0 none);
-  --color-neutral-400: oklch(0.708 0 none);
-  --color-neutral-500: oklch(0.556 0 none);
-  --color-neutral-600: oklch(0.439 0 none);
-  --color-neutral-700: oklch(0.371 0 none);
-  --color-neutral-800: oklch(0.269 0 none);
-  --color-neutral-900: oklch(0.205 0 none);
-  --color-neutral-950: oklch(0.145 0 none);
+  --color-neutral-50: oklch(0.985 0 0);
+  --color-neutral-100: oklch(0.97 0 0);
+  --color-neutral-200: oklch(0.922 0 0);
+  --color-neutral-300: oklch(0.87 0 0);
+  --color-neutral-400: oklch(0.708 0 0);
+  --color-neutral-500: oklch(0.556 0 0);
+  --color-neutral-600: oklch(0.439 0 0);
+  --color-neutral-700: oklch(0.371 0 0);
+  --color-neutral-800: oklch(0.269 0 0);
+  --color-neutral-900: oklch(0.205 0 0);
+  --color-neutral-950: oklch(0.145 0 0);
 
   --color-stone-50: oklch(0.985 0.001 106.423);
   --color-stone-100: oklch(0.97 0.001 106.424);