diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e47a5beeee1..496c8ae32e36 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add first draft of new wide-gamut color palette ([#14693](https://github.com/tailwindlabs/tailwindcss/pull/14693))
 - _Upgrade (experimental)_: Migrate `theme(…)` calls in classes to `var(…)` or to the modern `theme(…)` syntax ([#14664](https://github.com/tailwindlabs/tailwindcss/pull/14664))
 
 ### Fixed
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index a3442c5c93c7..6bae1add233f 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -18,248 +18,248 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --breakpoint-2xl: 96rem;
     --color-black: #000;
     --color-white: #fff;
-    --color-slate-50: #f8fafc;
-    --color-slate-100: #f1f5f9;
-    --color-slate-200: #e2e8f0;
-    --color-slate-300: #cbd5e1;
-    --color-slate-400: #94a3b8;
-    --color-slate-500: #64748b;
-    --color-slate-600: #475569;
-    --color-slate-700: #334155;
-    --color-slate-800: #1e293b;
-    --color-slate-900: #0f172a;
-    --color-slate-950: #020617;
-    --color-gray-50: #f9fafb;
-    --color-gray-100: #f3f4f6;
-    --color-gray-200: #e5e7eb;
-    --color-gray-300: #d1d5db;
-    --color-gray-400: #9ca3af;
-    --color-gray-500: #6b7280;
-    --color-gray-600: #4b5563;
-    --color-gray-700: #374151;
-    --color-gray-800: #1f2937;
-    --color-gray-900: #111827;
-    --color-gray-950: #030712;
-    --color-zinc-50: #fafafa;
-    --color-zinc-100: #f4f4f5;
-    --color-zinc-200: #e4e4e7;
-    --color-zinc-300: #d4d4d8;
-    --color-zinc-400: #a1a1aa;
-    --color-zinc-500: #71717a;
-    --color-zinc-600: #52525b;
-    --color-zinc-700: #3f3f46;
-    --color-zinc-800: #27272a;
-    --color-zinc-900: #18181b;
-    --color-zinc-950: #09090b;
-    --color-neutral-50: #fafafa;
-    --color-neutral-100: #f5f5f5;
-    --color-neutral-200: #e5e5e5;
-    --color-neutral-300: #d4d4d4;
-    --color-neutral-400: #a3a3a3;
-    --color-neutral-500: #737373;
-    --color-neutral-600: #525252;
-    --color-neutral-700: #404040;
-    --color-neutral-800: #262626;
-    --color-neutral-900: #171717;
-    --color-neutral-950: #0a0a0a;
-    --color-stone-50: #fafaf9;
-    --color-stone-100: #f5f5f4;
-    --color-stone-200: #e7e5e4;
-    --color-stone-300: #d6d3d1;
-    --color-stone-400: #a8a29e;
-    --color-stone-500: #78716c;
-    --color-stone-600: #57534e;
-    --color-stone-700: #44403c;
-    --color-stone-800: #292524;
-    --color-stone-900: #1c1917;
-    --color-stone-950: #0c0a09;
-    --color-red-50: #fef2f2;
-    --color-red-100: #fee2e2;
-    --color-red-200: #fecaca;
-    --color-red-300: #fca5a5;
-    --color-red-400: #f87171;
-    --color-red-500: #ef4444;
-    --color-red-600: #dc2626;
-    --color-red-700: #b91c1c;
-    --color-red-800: #991b1b;
-    --color-red-900: #7f1d1d;
-    --color-red-950: #450a0a;
-    --color-orange-50: #fff7ed;
-    --color-orange-100: #ffedd5;
-    --color-orange-200: #fed7aa;
-    --color-orange-300: #fdba74;
-    --color-orange-400: #fb923c;
-    --color-orange-500: #f97316;
-    --color-orange-600: #ea580c;
-    --color-orange-700: #c2410c;
-    --color-orange-800: #9a3412;
-    --color-orange-900: #7c2d12;
-    --color-orange-950: #431407;
-    --color-amber-50: #fffbeb;
-    --color-amber-100: #fef3c7;
-    --color-amber-200: #fde68a;
-    --color-amber-300: #fcd34d;
-    --color-amber-400: #fbbf24;
-    --color-amber-500: #f59e0b;
-    --color-amber-600: #d97706;
-    --color-amber-700: #b45309;
-    --color-amber-800: #92400e;
-    --color-amber-900: #78350f;
-    --color-amber-950: #451a03;
-    --color-yellow-50: #fefce8;
-    --color-yellow-100: #fef9c3;
-    --color-yellow-200: #fef08a;
-    --color-yellow-300: #fde047;
-    --color-yellow-400: #facc15;
-    --color-yellow-500: #eab308;
-    --color-yellow-600: #ca8a04;
-    --color-yellow-700: #a16207;
-    --color-yellow-800: #854d0e;
-    --color-yellow-900: #713f12;
-    --color-yellow-950: #422006;
-    --color-lime-50: #f7fee7;
-    --color-lime-100: #ecfccb;
-    --color-lime-200: #d9f99d;
-    --color-lime-300: #bef264;
-    --color-lime-400: #a3e635;
-    --color-lime-500: #84cc16;
-    --color-lime-600: #65a30d;
-    --color-lime-700: #4d7c0f;
-    --color-lime-800: #3f6212;
-    --color-lime-900: #365314;
-    --color-lime-950: #1a2e05;
-    --color-green-50: #f0fdf4;
-    --color-green-100: #dcfce7;
-    --color-green-200: #bbf7d0;
-    --color-green-300: #86efac;
-    --color-green-400: #4ade80;
-    --color-green-500: #22c55e;
-    --color-green-600: #16a34a;
-    --color-green-700: #15803d;
-    --color-green-800: #166534;
-    --color-green-900: #14532d;
-    --color-green-950: #052e16;
-    --color-emerald-50: #ecfdf5;
-    --color-emerald-100: #d1fae5;
-    --color-emerald-200: #a7f3d0;
-    --color-emerald-300: #6ee7b7;
-    --color-emerald-400: #34d399;
-    --color-emerald-500: #10b981;
-    --color-emerald-600: #059669;
-    --color-emerald-700: #047857;
-    --color-emerald-800: #065f46;
-    --color-emerald-900: #064e3b;
-    --color-emerald-950: #022c22;
-    --color-teal-50: #f0fdfa;
-    --color-teal-100: #ccfbf1;
-    --color-teal-200: #99f6e4;
-    --color-teal-300: #5eead4;
-    --color-teal-400: #2dd4bf;
-    --color-teal-500: #14b8a6;
-    --color-teal-600: #0d9488;
-    --color-teal-700: #0f766e;
-    --color-teal-800: #115e59;
-    --color-teal-900: #134e4a;
-    --color-teal-950: #042f2e;
-    --color-cyan-50: #ecfeff;
-    --color-cyan-100: #cffafe;
-    --color-cyan-200: #a5f3fc;
-    --color-cyan-300: #67e8f9;
-    --color-cyan-400: #22d3ee;
-    --color-cyan-500: #06b6d4;
-    --color-cyan-600: #0891b2;
-    --color-cyan-700: #0e7490;
-    --color-cyan-800: #155e75;
-    --color-cyan-900: #164e63;
-    --color-cyan-950: #083344;
-    --color-sky-50: #f0f9ff;
-    --color-sky-100: #e0f2fe;
-    --color-sky-200: #bae6fd;
-    --color-sky-300: #7dd3fc;
-    --color-sky-400: #38bdf8;
-    --color-sky-500: #0ea5e9;
-    --color-sky-600: #0284c7;
-    --color-sky-700: #0369a1;
-    --color-sky-800: #075985;
-    --color-sky-900: #0c4a6e;
-    --color-sky-950: #082f49;
-    --color-blue-50: #eff6ff;
-    --color-blue-100: #dbeafe;
-    --color-blue-200: #bfdbfe;
-    --color-blue-300: #93c5fd;
-    --color-blue-400: #60a5fa;
-    --color-blue-500: #3b82f6;
-    --color-blue-600: #2563eb;
-    --color-blue-700: #1d4ed8;
-    --color-blue-800: #1e40af;
-    --color-blue-900: #1e3a8a;
-    --color-blue-950: #172554;
-    --color-indigo-50: #eef2ff;
-    --color-indigo-100: #e0e7ff;
-    --color-indigo-200: #c7d2fe;
-    --color-indigo-300: #a5b4fc;
-    --color-indigo-400: #818cf8;
-    --color-indigo-500: #6366f1;
-    --color-indigo-600: #4f46e5;
-    --color-indigo-700: #4338ca;
-    --color-indigo-800: #3730a3;
-    --color-indigo-900: #312e81;
-    --color-indigo-950: #1e1b4b;
-    --color-violet-50: #f5f3ff;
-    --color-violet-100: #ede9fe;
-    --color-violet-200: #ddd6fe;
-    --color-violet-300: #c4b5fd;
-    --color-violet-400: #a78bfa;
-    --color-violet-500: #8b5cf6;
-    --color-violet-600: #7c3aed;
-    --color-violet-700: #6d28d9;
-    --color-violet-800: #5b21b6;
-    --color-violet-900: #4c1d95;
-    --color-violet-950: #2e1065;
-    --color-purple-50: #faf5ff;
-    --color-purple-100: #f3e8ff;
-    --color-purple-200: #e9d5ff;
-    --color-purple-300: #d8b4fe;
-    --color-purple-400: #c084fc;
-    --color-purple-500: #a855f7;
-    --color-purple-600: #9333ea;
-    --color-purple-700: #7e22ce;
-    --color-purple-800: #6b21a8;
-    --color-purple-900: #581c87;
-    --color-purple-950: #3b0764;
-    --color-fuchsia-50: #fdf4ff;
-    --color-fuchsia-100: #fae8ff;
-    --color-fuchsia-200: #f5d0fe;
-    --color-fuchsia-300: #f0abfc;
-    --color-fuchsia-400: #e879f9;
-    --color-fuchsia-500: #d946ef;
-    --color-fuchsia-600: #c026d3;
-    --color-fuchsia-700: #a21caf;
-    --color-fuchsia-800: #86198f;
-    --color-fuchsia-900: #701a75;
-    --color-fuchsia-950: #4a044e;
-    --color-pink-50: #fdf2f8;
-    --color-pink-100: #fce7f3;
-    --color-pink-200: #fbcfe8;
-    --color-pink-300: #f9a8d4;
-    --color-pink-400: #f472b6;
-    --color-pink-500: #ec4899;
-    --color-pink-600: #db2777;
-    --color-pink-700: #be185d;
-    --color-pink-800: #9d174d;
-    --color-pink-900: #831843;
-    --color-pink-950: #500724;
-    --color-rose-50: #fff1f2;
-    --color-rose-100: #ffe4e6;
-    --color-rose-200: #fecdd3;
-    --color-rose-300: #fda4af;
-    --color-rose-400: #fb7185;
-    --color-rose-500: #f43f5e;
-    --color-rose-600: #e11d48;
-    --color-rose-700: #be123c;
-    --color-rose-800: #9f1239;
-    --color-rose-900: #881337;
-    --color-rose-950: #4c0519;
+    --color-slate-50: oklch(.984 .003 247.858);
+    --color-slate-100: oklch(.968 .007 247.896);
+    --color-slate-200: oklch(.929 .013 255.508);
+    --color-slate-300: oklch(.869 .022 252.894);
+    --color-slate-400: oklch(.704 .04 256.788);
+    --color-slate-500: oklch(.554 .046 257.417);
+    --color-slate-600: oklch(.446 .043 257.281);
+    --color-slate-700: oklch(.372 .044 257.287);
+    --color-slate-800: oklch(.279 .041 260.031);
+    --color-slate-900: oklch(.208 .042 265.755);
+    --color-slate-950: oklch(.129 .042 264.695);
+    --color-gray-50: oklch(.985 .002 247.839);
+    --color-gray-100: oklch(.967 .003 264.542);
+    --color-gray-200: oklch(.928 .006 264.531);
+    --color-gray-300: oklch(.872 .01 258.338);
+    --color-gray-400: oklch(.707 .022 261.325);
+    --color-gray-500: oklch(.551 .027 264.364);
+    --color-gray-600: oklch(.446 .03 256.802);
+    --color-gray-700: oklch(.373 .034 259.733);
+    --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-100: oklch(.967 .001 286.375);
+    --color-zinc-200: oklch(.92 .004 286.32);
+    --color-zinc-300: oklch(.871 .006 286.286);
+    --color-zinc-400: oklch(.705 .015 286.067);
+    --color-zinc-500: oklch(.552 .016 285.938);
+    --color-zinc-600: oklch(.442 .017 285.786);
+    --color-zinc-700: oklch(.37 .013 285.805);
+    --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-stone-50: oklch(.985 .001 106.423);
+    --color-stone-100: oklch(.97 .001 106.424);
+    --color-stone-200: oklch(.923 .003 48.717);
+    --color-stone-300: oklch(.869 .005 56.366);
+    --color-stone-400: oklch(.709 .01 56.259);
+    --color-stone-500: oklch(.553 .013 58.071);
+    --color-stone-600: oklch(.444 .011 73.639);
+    --color-stone-700: oklch(.374 .01 67.558);
+    --color-stone-800: oklch(.268 .007 34.298);
+    --color-stone-900: oklch(.216 .006 56.043);
+    --color-stone-950: oklch(.147 .004 49.25);
+    --color-red-50: oklch(.971 .013 17.38);
+    --color-red-100: oklch(.936 .032 17.717);
+    --color-red-200: oklch(.885 .062 18.334);
+    --color-red-300: oklch(.808 .114 19.571);
+    --color-red-400: oklch(.704 .191 22.216);
+    --color-red-500: oklch(.637 .237 25.331);
+    --color-red-600: oklch(.577 .245 27.325);
+    --color-red-700: oklch(.505 .213 27.518);
+    --color-red-800: oklch(.444 .177 26.899);
+    --color-red-900: oklch(.396 .141 25.723);
+    --color-red-950: oklch(.258 .092 26.042);
+    --color-orange-50: oklch(.98 .016 73.684);
+    --color-orange-100: oklch(.954 .038 75.164);
+    --color-orange-200: oklch(.901 .076 70.697);
+    --color-orange-300: oklch(.837 .128 66.29);
+    --color-orange-400: oklch(.75 .183 55.934);
+    --color-orange-500: oklch(.705 .213 47.604);
+    --color-orange-600: oklch(.646 .222 41.116);
+    --color-orange-700: oklch(.553 .195 38.402);
+    --color-orange-800: oklch(.47 .157 37.304);
+    --color-orange-900: oklch(.408 .123 38.172);
+    --color-orange-950: oklch(.266 .079 36.259);
+    --color-amber-50: oklch(.987 .022 95.277);
+    --color-amber-100: oklch(.962 .059 95.617);
+    --color-amber-200: oklch(.924 .12 95.746);
+    --color-amber-300: oklch(.879 .169 91.605);
+    --color-amber-400: oklch(.828 .189 84.429);
+    --color-amber-500: oklch(.769 .188 70.08);
+    --color-amber-600: oklch(.666 .179 58.318);
+    --color-amber-700: oklch(.555 .163 48.998);
+    --color-amber-800: oklch(.473 .137 46.201);
+    --color-amber-900: oklch(.414 .112 45.904);
+    --color-amber-950: oklch(.279 .077 45.635);
+    --color-yellow-50: oklch(.987 .026 102.212);
+    --color-yellow-100: oklch(.973 .071 103.193);
+    --color-yellow-200: oklch(.945 .129 101.54);
+    --color-yellow-300: oklch(.905 .182 98.111);
+    --color-yellow-400: oklch(.852 .199 91.936);
+    --color-yellow-500: oklch(.795 .184 86.047);
+    --color-yellow-600: oklch(.681 .162 75.834);
+    --color-yellow-700: oklch(.554 .135 66.442);
+    --color-yellow-800: oklch(.476 .114 61.907);
+    --color-yellow-900: oklch(.421 .095 57.708);
+    --color-yellow-950: oklch(.286 .066 53.813);
+    --color-lime-50: oklch(.986 .031 120.757);
+    --color-lime-100: oklch(.967 .067 122.328);
+    --color-lime-200: oklch(.938 .127 124.321);
+    --color-lime-300: oklch(.897 .196 126.665);
+    --color-lime-400: oklch(.841 .238 128.85);
+    --color-lime-500: oklch(.768 .233 130.85);
+    --color-lime-600: oklch(.648 .2 131.684);
+    --color-lime-700: oklch(.532 .157 131.589);
+    --color-lime-800: oklch(.453 .124 130.933);
+    --color-lime-900: oklch(.405 .101 131.063);
+    --color-lime-950: oklch(.274 .072 132.109);
+    --color-green-50: oklch(.982 .018 155.826);
+    --color-green-100: oklch(.962 .044 156.743);
+    --color-green-200: oklch(.925 .084 155.995);
+    --color-green-300: oklch(.871 .15 154.449);
+    --color-green-400: oklch(.792 .209 151.711);
+    --color-green-500: oklch(.723 .219 149.579);
+    --color-green-600: oklch(.627 .194 149.214);
+    --color-green-700: oklch(.527 .154 150.069);
+    --color-green-800: oklch(.448 .119 151.328);
+    --color-green-900: oklch(.393 .095 152.535);
+    --color-green-950: oklch(.266 .065 152.934);
+    --color-emerald-50: oklch(.979 .021 166.113);
+    --color-emerald-100: oklch(.95 .052 163.051);
+    --color-emerald-200: oklch(.905 .093 164.15);
+    --color-emerald-300: oklch(.845 .143 164.978);
+    --color-emerald-400: oklch(.765 .177 163.223);
+    --color-emerald-500: oklch(.696 .17 162.48);
+    --color-emerald-600: oklch(.596 .145 163.225);
+    --color-emerald-700: oklch(.508 .118 165.612);
+    --color-emerald-800: oklch(.432 .095 166.913);
+    --color-emerald-900: oklch(.378 .077 168.94);
+    --color-emerald-950: oklch(.262 .051 172.552);
+    --color-teal-50: oklch(.984 .014 180.72);
+    --color-teal-100: oklch(.953 .051 180.801);
+    --color-teal-200: oklch(.91 .096 180.426);
+    --color-teal-300: oklch(.855 .138 181.071);
+    --color-teal-400: oklch(.777 .152 181.912);
+    --color-teal-500: oklch(.704 .14 182.503);
+    --color-teal-600: oklch(.6 .118 184.704);
+    --color-teal-700: oklch(.511 .096 186.391);
+    --color-teal-800: oklch(.437 .078 188.216);
+    --color-teal-900: oklch(.386 .063 188.416);
+    --color-teal-950: oklch(.277 .046 192.524);
+    --color-cyan-50: oklch(.984 .019 200.873);
+    --color-cyan-100: oklch(.956 .045 203.388);
+    --color-cyan-200: oklch(.917 .08 205.041);
+    --color-cyan-300: oklch(.865 .127 207.078);
+    --color-cyan-400: oklch(.789 .154 211.53);
+    --color-cyan-500: oklch(.715 .143 215.221);
+    --color-cyan-600: oklch(.609 .126 221.723);
+    --color-cyan-700: oklch(.52 .105 223.128);
+    --color-cyan-800: oklch(.45 .085 224.283);
+    --color-cyan-900: oklch(.398 .07 227.392);
+    --color-cyan-950: oklch(.302 .056 229.695);
+    --color-sky-50: oklch(.977 .013 236.62);
+    --color-sky-100: oklch(.951 .026 236.824);
+    --color-sky-200: oklch(.901 .058 230.902);
+    --color-sky-300: oklch(.828 .111 230.318);
+    --color-sky-400: oklch(.746 .16 232.661);
+    --color-sky-500: oklch(.685 .169 237.323);
+    --color-sky-600: oklch(.588 .158 241.966);
+    --color-sky-700: oklch(.5 .134 242.749);
+    --color-sky-800: oklch(.443 .11 240.79);
+    --color-sky-900: oklch(.391 .09 240.876);
+    --color-sky-950: oklch(.293 .066 243.157);
+    --color-blue-50: oklch(.97 .014 254.604);
+    --color-blue-100: oklch(.932 .032 255.585);
+    --color-blue-200: oklch(.882 .059 254.128);
+    --color-blue-300: oklch(.809 .105 251.813);
+    --color-blue-400: oklch(.707 .165 254.624);
+    --color-blue-500: oklch(.623 .214 259.815);
+    --color-blue-600: oklch(.546 .245 262.881);
+    --color-blue-700: oklch(.488 .243 264.376);
+    --color-blue-800: oklch(.424 .199 265.638);
+    --color-blue-900: oklch(.379 .146 265.522);
+    --color-blue-950: oklch(.282 .091 267.935);
+    --color-indigo-50: oklch(.962 .018 272.314);
+    --color-indigo-100: oklch(.93 .034 272.788);
+    --color-indigo-200: oklch(.87 .065 274.039);
+    --color-indigo-300: oklch(.785 .115 274.713);
+    --color-indigo-400: oklch(.673 .182 276.935);
+    --color-indigo-500: oklch(.585 .233 277.117);
+    --color-indigo-600: oklch(.511 .262 276.966);
+    --color-indigo-700: oklch(.457 .24 277.023);
+    --color-indigo-800: oklch(.398 .195 277.366);
+    --color-indigo-900: oklch(.359 .144 278.697);
+    --color-indigo-950: oklch(.257 .09 281.288);
+    --color-violet-50: oklch(.969 .016 293.756);
+    --color-violet-100: oklch(.943 .029 294.588);
+    --color-violet-200: oklch(.894 .057 293.283);
+    --color-violet-300: oklch(.811 .111 293.571);
+    --color-violet-400: oklch(.702 .183 293.541);
+    --color-violet-500: oklch(.606 .25 292.717);
+    --color-violet-600: oklch(.541 .281 293.009);
+    --color-violet-700: oklch(.491 .27 292.581);
+    --color-violet-800: oklch(.432 .232 292.759);
+    --color-violet-900: oklch(.38 .189 293.745);
+    --color-violet-950: oklch(.283 .141 291.089);
+    --color-purple-50: oklch(.977 .014 308.299);
+    --color-purple-100: oklch(.946 .033 307.174);
+    --color-purple-200: oklch(.902 .063 306.703);
+    --color-purple-300: oklch(.827 .119 306.383);
+    --color-purple-400: oklch(.714 .203 305.504);
+    --color-purple-500: oklch(.627 .265 303.9);
+    --color-purple-600: oklch(.558 .288 302.321);
+    --color-purple-700: oklch(.496 .265 301.924);
+    --color-purple-800: oklch(.438 .218 303.724);
+    --color-purple-900: oklch(.381 .176 304.987);
+    --color-purple-950: oklch(.291 .149 302.717);
+    --color-fuchsia-50: oklch(.977 .017 320.058);
+    --color-fuchsia-100: oklch(.952 .037 318.852);
+    --color-fuchsia-200: oklch(.903 .076 319.62);
+    --color-fuchsia-300: oklch(.833 .145 321.434);
+    --color-fuchsia-400: oklch(.74 .238 322.16);
+    --color-fuchsia-500: oklch(.667 .295 322.15);
+    --color-fuchsia-600: oklch(.591 .293 322.896);
+    --color-fuchsia-700: oklch(.518 .253 323.949);
+    --color-fuchsia-800: oklch(.452 .211 324.591);
+    --color-fuchsia-900: oklch(.401 .17 325.612);
+    --color-fuchsia-950: oklch(.293 .136 325.661);
+    --color-pink-50: oklch(.971 .014 343.198);
+    --color-pink-100: oklch(.948 .028 342.258);
+    --color-pink-200: oklch(.899 .061 343.231);
+    --color-pink-300: oklch(.823 .12 346.018);
+    --color-pink-400: oklch(.718 .202 349.761);
+    --color-pink-500: oklch(.656 .241 354.308);
+    --color-pink-600: oklch(.592 .249 .584);
+    --color-pink-700: oklch(.525 .223 3.958);
+    --color-pink-800: oklch(.459 .187 3.815);
+    --color-pink-900: oklch(.408 .153 2.432);
+    --color-pink-950: oklch(.284 .109 3.907);
+    --color-rose-50: oklch(.969 .015 12.422);
+    --color-rose-100: oklch(.941 .03 12.58);
+    --color-rose-200: oklch(.892 .058 10.001);
+    --color-rose-300: oklch(.81 .117 11.638);
+    --color-rose-400: oklch(.712 .194 13.428);
+    --color-rose-500: oklch(.645 .246 16.439);
+    --color-rose-600: oklch(.586 .253 17.585);
+    --color-rose-700: oklch(.514 .222 16.935);
+    --color-rose-800: oklch(.455 .188 13.697);
+    --color-rose-900: oklch(.41 .159 10.272);
+    --color-rose-950: oklch(.271 .105 12.094);
     --animate-spin: spin 1s linear infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts
index ab1c25dd415d..4c7e15a8634e 100644
--- a/packages/@tailwindcss-postcss/src/index.test.ts
+++ b/packages/@tailwindcss-postcss/src/index.test.ts
@@ -100,7 +100,7 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
 
   expect(result.css.trim()).toMatchInlineSnapshot(`
     ".foo {
-      color: var(--color-red-500, #ef4444);
+      color: var(--color-red-500, oklch(.637 .237 25.331));
     }"
   `)
 })
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index a29cb7740f22..cbc12d7d64a4 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -17,248 +17,248 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --breakpoint-2xl: 96rem;
   --color-black: #000;
   --color-white: #fff;
-  --color-slate-50: #f8fafc;
-  --color-slate-100: #f1f5f9;
-  --color-slate-200: #e2e8f0;
-  --color-slate-300: #cbd5e1;
-  --color-slate-400: #94a3b8;
-  --color-slate-500: #64748b;
-  --color-slate-600: #475569;
-  --color-slate-700: #334155;
-  --color-slate-800: #1e293b;
-  --color-slate-900: #0f172a;
-  --color-slate-950: #020617;
-  --color-gray-50: #f9fafb;
-  --color-gray-100: #f3f4f6;
-  --color-gray-200: #e5e7eb;
-  --color-gray-300: #d1d5db;
-  --color-gray-400: #9ca3af;
-  --color-gray-500: #6b7280;
-  --color-gray-600: #4b5563;
-  --color-gray-700: #374151;
-  --color-gray-800: #1f2937;
-  --color-gray-900: #111827;
-  --color-gray-950: #030712;
-  --color-zinc-50: #fafafa;
-  --color-zinc-100: #f4f4f5;
-  --color-zinc-200: #e4e4e7;
-  --color-zinc-300: #d4d4d8;
-  --color-zinc-400: #a1a1aa;
-  --color-zinc-500: #71717a;
-  --color-zinc-600: #52525b;
-  --color-zinc-700: #3f3f46;
-  --color-zinc-800: #27272a;
-  --color-zinc-900: #18181b;
-  --color-zinc-950: #09090b;
-  --color-neutral-50: #fafafa;
-  --color-neutral-100: #f5f5f5;
-  --color-neutral-200: #e5e5e5;
-  --color-neutral-300: #d4d4d4;
-  --color-neutral-400: #a3a3a3;
-  --color-neutral-500: #737373;
-  --color-neutral-600: #525252;
-  --color-neutral-700: #404040;
-  --color-neutral-800: #262626;
-  --color-neutral-900: #171717;
-  --color-neutral-950: #0a0a0a;
-  --color-stone-50: #fafaf9;
-  --color-stone-100: #f5f5f4;
-  --color-stone-200: #e7e5e4;
-  --color-stone-300: #d6d3d1;
-  --color-stone-400: #a8a29e;
-  --color-stone-500: #78716c;
-  --color-stone-600: #57534e;
-  --color-stone-700: #44403c;
-  --color-stone-800: #292524;
-  --color-stone-900: #1c1917;
-  --color-stone-950: #0c0a09;
-  --color-red-50: #fef2f2;
-  --color-red-100: #fee2e2;
-  --color-red-200: #fecaca;
-  --color-red-300: #fca5a5;
-  --color-red-400: #f87171;
-  --color-red-500: #ef4444;
-  --color-red-600: #dc2626;
-  --color-red-700: #b91c1c;
-  --color-red-800: #991b1b;
-  --color-red-900: #7f1d1d;
-  --color-red-950: #450a0a;
-  --color-orange-50: #fff7ed;
-  --color-orange-100: #ffedd5;
-  --color-orange-200: #fed7aa;
-  --color-orange-300: #fdba74;
-  --color-orange-400: #fb923c;
-  --color-orange-500: #f97316;
-  --color-orange-600: #ea580c;
-  --color-orange-700: #c2410c;
-  --color-orange-800: #9a3412;
-  --color-orange-900: #7c2d12;
-  --color-orange-950: #431407;
-  --color-amber-50: #fffbeb;
-  --color-amber-100: #fef3c7;
-  --color-amber-200: #fde68a;
-  --color-amber-300: #fcd34d;
-  --color-amber-400: #fbbf24;
-  --color-amber-500: #f59e0b;
-  --color-amber-600: #d97706;
-  --color-amber-700: #b45309;
-  --color-amber-800: #92400e;
-  --color-amber-900: #78350f;
-  --color-amber-950: #451a03;
-  --color-yellow-50: #fefce8;
-  --color-yellow-100: #fef9c3;
-  --color-yellow-200: #fef08a;
-  --color-yellow-300: #fde047;
-  --color-yellow-400: #facc15;
-  --color-yellow-500: #eab308;
-  --color-yellow-600: #ca8a04;
-  --color-yellow-700: #a16207;
-  --color-yellow-800: #854d0e;
-  --color-yellow-900: #713f12;
-  --color-yellow-950: #422006;
-  --color-lime-50: #f7fee7;
-  --color-lime-100: #ecfccb;
-  --color-lime-200: #d9f99d;
-  --color-lime-300: #bef264;
-  --color-lime-400: #a3e635;
-  --color-lime-500: #84cc16;
-  --color-lime-600: #65a30d;
-  --color-lime-700: #4d7c0f;
-  --color-lime-800: #3f6212;
-  --color-lime-900: #365314;
-  --color-lime-950: #1a2e05;
-  --color-green-50: #f0fdf4;
-  --color-green-100: #dcfce7;
-  --color-green-200: #bbf7d0;
-  --color-green-300: #86efac;
-  --color-green-400: #4ade80;
-  --color-green-500: #22c55e;
-  --color-green-600: #16a34a;
-  --color-green-700: #15803d;
-  --color-green-800: #166534;
-  --color-green-900: #14532d;
-  --color-green-950: #052e16;
-  --color-emerald-50: #ecfdf5;
-  --color-emerald-100: #d1fae5;
-  --color-emerald-200: #a7f3d0;
-  --color-emerald-300: #6ee7b7;
-  --color-emerald-400: #34d399;
-  --color-emerald-500: #10b981;
-  --color-emerald-600: #059669;
-  --color-emerald-700: #047857;
-  --color-emerald-800: #065f46;
-  --color-emerald-900: #064e3b;
-  --color-emerald-950: #022c22;
-  --color-teal-50: #f0fdfa;
-  --color-teal-100: #ccfbf1;
-  --color-teal-200: #99f6e4;
-  --color-teal-300: #5eead4;
-  --color-teal-400: #2dd4bf;
-  --color-teal-500: #14b8a6;
-  --color-teal-600: #0d9488;
-  --color-teal-700: #0f766e;
-  --color-teal-800: #115e59;
-  --color-teal-900: #134e4a;
-  --color-teal-950: #042f2e;
-  --color-cyan-50: #ecfeff;
-  --color-cyan-100: #cffafe;
-  --color-cyan-200: #a5f3fc;
-  --color-cyan-300: #67e8f9;
-  --color-cyan-400: #22d3ee;
-  --color-cyan-500: #06b6d4;
-  --color-cyan-600: #0891b2;
-  --color-cyan-700: #0e7490;
-  --color-cyan-800: #155e75;
-  --color-cyan-900: #164e63;
-  --color-cyan-950: #083344;
-  --color-sky-50: #f0f9ff;
-  --color-sky-100: #e0f2fe;
-  --color-sky-200: #bae6fd;
-  --color-sky-300: #7dd3fc;
-  --color-sky-400: #38bdf8;
-  --color-sky-500: #0ea5e9;
-  --color-sky-600: #0284c7;
-  --color-sky-700: #0369a1;
-  --color-sky-800: #075985;
-  --color-sky-900: #0c4a6e;
-  --color-sky-950: #082f49;
-  --color-blue-50: #eff6ff;
-  --color-blue-100: #dbeafe;
-  --color-blue-200: #bfdbfe;
-  --color-blue-300: #93c5fd;
-  --color-blue-400: #60a5fa;
-  --color-blue-500: #3b82f6;
-  --color-blue-600: #2563eb;
-  --color-blue-700: #1d4ed8;
-  --color-blue-800: #1e40af;
-  --color-blue-900: #1e3a8a;
-  --color-blue-950: #172554;
-  --color-indigo-50: #eef2ff;
-  --color-indigo-100: #e0e7ff;
-  --color-indigo-200: #c7d2fe;
-  --color-indigo-300: #a5b4fc;
-  --color-indigo-400: #818cf8;
-  --color-indigo-500: #6366f1;
-  --color-indigo-600: #4f46e5;
-  --color-indigo-700: #4338ca;
-  --color-indigo-800: #3730a3;
-  --color-indigo-900: #312e81;
-  --color-indigo-950: #1e1b4b;
-  --color-violet-50: #f5f3ff;
-  --color-violet-100: #ede9fe;
-  --color-violet-200: #ddd6fe;
-  --color-violet-300: #c4b5fd;
-  --color-violet-400: #a78bfa;
-  --color-violet-500: #8b5cf6;
-  --color-violet-600: #7c3aed;
-  --color-violet-700: #6d28d9;
-  --color-violet-800: #5b21b6;
-  --color-violet-900: #4c1d95;
-  --color-violet-950: #2e1065;
-  --color-purple-50: #faf5ff;
-  --color-purple-100: #f3e8ff;
-  --color-purple-200: #e9d5ff;
-  --color-purple-300: #d8b4fe;
-  --color-purple-400: #c084fc;
-  --color-purple-500: #a855f7;
-  --color-purple-600: #9333ea;
-  --color-purple-700: #7e22ce;
-  --color-purple-800: #6b21a8;
-  --color-purple-900: #581c87;
-  --color-purple-950: #3b0764;
-  --color-fuchsia-50: #fdf4ff;
-  --color-fuchsia-100: #fae8ff;
-  --color-fuchsia-200: #f5d0fe;
-  --color-fuchsia-300: #f0abfc;
-  --color-fuchsia-400: #e879f9;
-  --color-fuchsia-500: #d946ef;
-  --color-fuchsia-600: #c026d3;
-  --color-fuchsia-700: #a21caf;
-  --color-fuchsia-800: #86198f;
-  --color-fuchsia-900: #701a75;
-  --color-fuchsia-950: #4a044e;
-  --color-pink-50: #fdf2f8;
-  --color-pink-100: #fce7f3;
-  --color-pink-200: #fbcfe8;
-  --color-pink-300: #f9a8d4;
-  --color-pink-400: #f472b6;
-  --color-pink-500: #ec4899;
-  --color-pink-600: #db2777;
-  --color-pink-700: #be185d;
-  --color-pink-800: #9d174d;
-  --color-pink-900: #831843;
-  --color-pink-950: #500724;
-  --color-rose-50: #fff1f2;
-  --color-rose-100: #ffe4e6;
-  --color-rose-200: #fecdd3;
-  --color-rose-300: #fda4af;
-  --color-rose-400: #fb7185;
-  --color-rose-500: #f43f5e;
-  --color-rose-600: #e11d48;
-  --color-rose-700: #be123c;
-  --color-rose-800: #9f1239;
-  --color-rose-900: #881337;
-  --color-rose-950: #4c0519;
+  --color-slate-50: oklch(.984 .003 247.858);
+  --color-slate-100: oklch(.968 .007 247.896);
+  --color-slate-200: oklch(.929 .013 255.508);
+  --color-slate-300: oklch(.869 .022 252.894);
+  --color-slate-400: oklch(.704 .04 256.788);
+  --color-slate-500: oklch(.554 .046 257.417);
+  --color-slate-600: oklch(.446 .043 257.281);
+  --color-slate-700: oklch(.372 .044 257.287);
+  --color-slate-800: oklch(.279 .041 260.031);
+  --color-slate-900: oklch(.208 .042 265.755);
+  --color-slate-950: oklch(.129 .042 264.695);
+  --color-gray-50: oklch(.985 .002 247.839);
+  --color-gray-100: oklch(.967 .003 264.542);
+  --color-gray-200: oklch(.928 .006 264.531);
+  --color-gray-300: oklch(.872 .01 258.338);
+  --color-gray-400: oklch(.707 .022 261.325);
+  --color-gray-500: oklch(.551 .027 264.364);
+  --color-gray-600: oklch(.446 .03 256.802);
+  --color-gray-700: oklch(.373 .034 259.733);
+  --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-100: oklch(.967 .001 286.375);
+  --color-zinc-200: oklch(.92 .004 286.32);
+  --color-zinc-300: oklch(.871 .006 286.286);
+  --color-zinc-400: oklch(.705 .015 286.067);
+  --color-zinc-500: oklch(.552 .016 285.938);
+  --color-zinc-600: oklch(.442 .017 285.786);
+  --color-zinc-700: oklch(.37 .013 285.805);
+  --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-stone-50: oklch(.985 .001 106.423);
+  --color-stone-100: oklch(.97 .001 106.424);
+  --color-stone-200: oklch(.923 .003 48.717);
+  --color-stone-300: oklch(.869 .005 56.366);
+  --color-stone-400: oklch(.709 .01 56.259);
+  --color-stone-500: oklch(.553 .013 58.071);
+  --color-stone-600: oklch(.444 .011 73.639);
+  --color-stone-700: oklch(.374 .01 67.558);
+  --color-stone-800: oklch(.268 .007 34.298);
+  --color-stone-900: oklch(.216 .006 56.043);
+  --color-stone-950: oklch(.147 .004 49.25);
+  --color-red-50: oklch(.971 .013 17.38);
+  --color-red-100: oklch(.936 .032 17.717);
+  --color-red-200: oklch(.885 .062 18.334);
+  --color-red-300: oklch(.808 .114 19.571);
+  --color-red-400: oklch(.704 .191 22.216);
+  --color-red-500: oklch(.637 .237 25.331);
+  --color-red-600: oklch(.577 .245 27.325);
+  --color-red-700: oklch(.505 .213 27.518);
+  --color-red-800: oklch(.444 .177 26.899);
+  --color-red-900: oklch(.396 .141 25.723);
+  --color-red-950: oklch(.258 .092 26.042);
+  --color-orange-50: oklch(.98 .016 73.684);
+  --color-orange-100: oklch(.954 .038 75.164);
+  --color-orange-200: oklch(.901 .076 70.697);
+  --color-orange-300: oklch(.837 .128 66.29);
+  --color-orange-400: oklch(.75 .183 55.934);
+  --color-orange-500: oklch(.705 .213 47.604);
+  --color-orange-600: oklch(.646 .222 41.116);
+  --color-orange-700: oklch(.553 .195 38.402);
+  --color-orange-800: oklch(.47 .157 37.304);
+  --color-orange-900: oklch(.408 .123 38.172);
+  --color-orange-950: oklch(.266 .079 36.259);
+  --color-amber-50: oklch(.987 .022 95.277);
+  --color-amber-100: oklch(.962 .059 95.617);
+  --color-amber-200: oklch(.924 .12 95.746);
+  --color-amber-300: oklch(.879 .169 91.605);
+  --color-amber-400: oklch(.828 .189 84.429);
+  --color-amber-500: oklch(.769 .188 70.08);
+  --color-amber-600: oklch(.666 .179 58.318);
+  --color-amber-700: oklch(.555 .163 48.998);
+  --color-amber-800: oklch(.473 .137 46.201);
+  --color-amber-900: oklch(.414 .112 45.904);
+  --color-amber-950: oklch(.279 .077 45.635);
+  --color-yellow-50: oklch(.987 .026 102.212);
+  --color-yellow-100: oklch(.973 .071 103.193);
+  --color-yellow-200: oklch(.945 .129 101.54);
+  --color-yellow-300: oklch(.905 .182 98.111);
+  --color-yellow-400: oklch(.852 .199 91.936);
+  --color-yellow-500: oklch(.795 .184 86.047);
+  --color-yellow-600: oklch(.681 .162 75.834);
+  --color-yellow-700: oklch(.554 .135 66.442);
+  --color-yellow-800: oklch(.476 .114 61.907);
+  --color-yellow-900: oklch(.421 .095 57.708);
+  --color-yellow-950: oklch(.286 .066 53.813);
+  --color-lime-50: oklch(.986 .031 120.757);
+  --color-lime-100: oklch(.967 .067 122.328);
+  --color-lime-200: oklch(.938 .127 124.321);
+  --color-lime-300: oklch(.897 .196 126.665);
+  --color-lime-400: oklch(.841 .238 128.85);
+  --color-lime-500: oklch(.768 .233 130.85);
+  --color-lime-600: oklch(.648 .2 131.684);
+  --color-lime-700: oklch(.532 .157 131.589);
+  --color-lime-800: oklch(.453 .124 130.933);
+  --color-lime-900: oklch(.405 .101 131.063);
+  --color-lime-950: oklch(.274 .072 132.109);
+  --color-green-50: oklch(.982 .018 155.826);
+  --color-green-100: oklch(.962 .044 156.743);
+  --color-green-200: oklch(.925 .084 155.995);
+  --color-green-300: oklch(.871 .15 154.449);
+  --color-green-400: oklch(.792 .209 151.711);
+  --color-green-500: oklch(.723 .219 149.579);
+  --color-green-600: oklch(.627 .194 149.214);
+  --color-green-700: oklch(.527 .154 150.069);
+  --color-green-800: oklch(.448 .119 151.328);
+  --color-green-900: oklch(.393 .095 152.535);
+  --color-green-950: oklch(.266 .065 152.934);
+  --color-emerald-50: oklch(.979 .021 166.113);
+  --color-emerald-100: oklch(.95 .052 163.051);
+  --color-emerald-200: oklch(.905 .093 164.15);
+  --color-emerald-300: oklch(.845 .143 164.978);
+  --color-emerald-400: oklch(.765 .177 163.223);
+  --color-emerald-500: oklch(.696 .17 162.48);
+  --color-emerald-600: oklch(.596 .145 163.225);
+  --color-emerald-700: oklch(.508 .118 165.612);
+  --color-emerald-800: oklch(.432 .095 166.913);
+  --color-emerald-900: oklch(.378 .077 168.94);
+  --color-emerald-950: oklch(.262 .051 172.552);
+  --color-teal-50: oklch(.984 .014 180.72);
+  --color-teal-100: oklch(.953 .051 180.801);
+  --color-teal-200: oklch(.91 .096 180.426);
+  --color-teal-300: oklch(.855 .138 181.071);
+  --color-teal-400: oklch(.777 .152 181.912);
+  --color-teal-500: oklch(.704 .14 182.503);
+  --color-teal-600: oklch(.6 .118 184.704);
+  --color-teal-700: oklch(.511 .096 186.391);
+  --color-teal-800: oklch(.437 .078 188.216);
+  --color-teal-900: oklch(.386 .063 188.416);
+  --color-teal-950: oklch(.277 .046 192.524);
+  --color-cyan-50: oklch(.984 .019 200.873);
+  --color-cyan-100: oklch(.956 .045 203.388);
+  --color-cyan-200: oklch(.917 .08 205.041);
+  --color-cyan-300: oklch(.865 .127 207.078);
+  --color-cyan-400: oklch(.789 .154 211.53);
+  --color-cyan-500: oklch(.715 .143 215.221);
+  --color-cyan-600: oklch(.609 .126 221.723);
+  --color-cyan-700: oklch(.52 .105 223.128);
+  --color-cyan-800: oklch(.45 .085 224.283);
+  --color-cyan-900: oklch(.398 .07 227.392);
+  --color-cyan-950: oklch(.302 .056 229.695);
+  --color-sky-50: oklch(.977 .013 236.62);
+  --color-sky-100: oklch(.951 .026 236.824);
+  --color-sky-200: oklch(.901 .058 230.902);
+  --color-sky-300: oklch(.828 .111 230.318);
+  --color-sky-400: oklch(.746 .16 232.661);
+  --color-sky-500: oklch(.685 .169 237.323);
+  --color-sky-600: oklch(.588 .158 241.966);
+  --color-sky-700: oklch(.5 .134 242.749);
+  --color-sky-800: oklch(.443 .11 240.79);
+  --color-sky-900: oklch(.391 .09 240.876);
+  --color-sky-950: oklch(.293 .066 243.157);
+  --color-blue-50: oklch(.97 .014 254.604);
+  --color-blue-100: oklch(.932 .032 255.585);
+  --color-blue-200: oklch(.882 .059 254.128);
+  --color-blue-300: oklch(.809 .105 251.813);
+  --color-blue-400: oklch(.707 .165 254.624);
+  --color-blue-500: oklch(.623 .214 259.815);
+  --color-blue-600: oklch(.546 .245 262.881);
+  --color-blue-700: oklch(.488 .243 264.376);
+  --color-blue-800: oklch(.424 .199 265.638);
+  --color-blue-900: oklch(.379 .146 265.522);
+  --color-blue-950: oklch(.282 .091 267.935);
+  --color-indigo-50: oklch(.962 .018 272.314);
+  --color-indigo-100: oklch(.93 .034 272.788);
+  --color-indigo-200: oklch(.87 .065 274.039);
+  --color-indigo-300: oklch(.785 .115 274.713);
+  --color-indigo-400: oklch(.673 .182 276.935);
+  --color-indigo-500: oklch(.585 .233 277.117);
+  --color-indigo-600: oklch(.511 .262 276.966);
+  --color-indigo-700: oklch(.457 .24 277.023);
+  --color-indigo-800: oklch(.398 .195 277.366);
+  --color-indigo-900: oklch(.359 .144 278.697);
+  --color-indigo-950: oklch(.257 .09 281.288);
+  --color-violet-50: oklch(.969 .016 293.756);
+  --color-violet-100: oklch(.943 .029 294.588);
+  --color-violet-200: oklch(.894 .057 293.283);
+  --color-violet-300: oklch(.811 .111 293.571);
+  --color-violet-400: oklch(.702 .183 293.541);
+  --color-violet-500: oklch(.606 .25 292.717);
+  --color-violet-600: oklch(.541 .281 293.009);
+  --color-violet-700: oklch(.491 .27 292.581);
+  --color-violet-800: oklch(.432 .232 292.759);
+  --color-violet-900: oklch(.38 .189 293.745);
+  --color-violet-950: oklch(.283 .141 291.089);
+  --color-purple-50: oklch(.977 .014 308.299);
+  --color-purple-100: oklch(.946 .033 307.174);
+  --color-purple-200: oklch(.902 .063 306.703);
+  --color-purple-300: oklch(.827 .119 306.383);
+  --color-purple-400: oklch(.714 .203 305.504);
+  --color-purple-500: oklch(.627 .265 303.9);
+  --color-purple-600: oklch(.558 .288 302.321);
+  --color-purple-700: oklch(.496 .265 301.924);
+  --color-purple-800: oklch(.438 .218 303.724);
+  --color-purple-900: oklch(.381 .176 304.987);
+  --color-purple-950: oklch(.291 .149 302.717);
+  --color-fuchsia-50: oklch(.977 .017 320.058);
+  --color-fuchsia-100: oklch(.952 .037 318.852);
+  --color-fuchsia-200: oklch(.903 .076 319.62);
+  --color-fuchsia-300: oklch(.833 .145 321.434);
+  --color-fuchsia-400: oklch(.74 .238 322.16);
+  --color-fuchsia-500: oklch(.667 .295 322.15);
+  --color-fuchsia-600: oklch(.591 .293 322.896);
+  --color-fuchsia-700: oklch(.518 .253 323.949);
+  --color-fuchsia-800: oklch(.452 .211 324.591);
+  --color-fuchsia-900: oklch(.401 .17 325.612);
+  --color-fuchsia-950: oklch(.293 .136 325.661);
+  --color-pink-50: oklch(.971 .014 343.198);
+  --color-pink-100: oklch(.948 .028 342.258);
+  --color-pink-200: oklch(.899 .061 343.231);
+  --color-pink-300: oklch(.823 .12 346.018);
+  --color-pink-400: oklch(.718 .202 349.761);
+  --color-pink-500: oklch(.656 .241 354.308);
+  --color-pink-600: oklch(.592 .249 .584);
+  --color-pink-700: oklch(.525 .223 3.958);
+  --color-pink-800: oklch(.459 .187 3.815);
+  --color-pink-900: oklch(.408 .153 2.432);
+  --color-pink-950: oklch(.284 .109 3.907);
+  --color-rose-50: oklch(.969 .015 12.422);
+  --color-rose-100: oklch(.941 .03 12.58);
+  --color-rose-200: oklch(.892 .058 10.001);
+  --color-rose-300: oklch(.81 .117 11.638);
+  --color-rose-400: oklch(.712 .194 13.428);
+  --color-rose-500: oklch(.645 .246 16.439);
+  --color-rose-600: oklch(.586 .253 17.585);
+  --color-rose-700: oklch(.514 .222 16.935);
+  --color-rose-800: oklch(.455 .188 13.697);
+  --color-rose-900: oklch(.41 .159 10.272);
+  --color-rose-950: oklch(.271 .105 12.094);
   --animate-spin: spin 1s linear infinite;
   --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
   --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
@@ -410,7 +410,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
 }
 
 .bg-red-500 {
-  background-color: var(--color-red-500, #ef4444);
+  background-color: var(--color-red-500, oklch(.637 .237 25.331));
 }
 
 .shadow {
diff --git a/packages/tailwindcss/src/compat/colors.ts b/packages/tailwindcss/src/compat/colors.ts
index 9489134e240f..fdd7c8355e95 100644
--- a/packages/tailwindcss/src/compat/colors.ts
+++ b/packages/tailwindcss/src/compat/colors.ts
@@ -5,289 +5,289 @@ export default {
   black: '#000',
   white: '#fff',
   slate: {
-    50: '#f8fafc',
-    100: '#f1f5f9',
-    200: '#e2e8f0',
-    300: '#cbd5e1',
-    400: '#94a3b8',
-    500: '#64748b',
-    600: '#475569',
-    700: '#334155',
-    800: '#1e293b',
-    900: '#0f172a',
-    950: '#020617',
+    '50': 'oklch(0.984 0.003 247.858)',
+    '100': 'oklch(0.968 0.007 247.896)',
+    '200': 'oklch(0.929 0.013 255.508)',
+    '300': 'oklch(0.869 0.022 252.894)',
+    '400': 'oklch(0.704 0.04 256.788)',
+    '500': 'oklch(0.554 0.046 257.417)',
+    '600': 'oklch(0.446 0.043 257.281)',
+    '700': 'oklch(0.372 0.044 257.287)',
+    '800': 'oklch(0.279 0.041 260.031)',
+    '900': 'oklch(0.208 0.042 265.755)',
+    '950': 'oklch(0.129 0.042 264.695)',
   },
   gray: {
-    50: '#f9fafb',
-    100: '#f3f4f6',
-    200: '#e5e7eb',
-    300: '#d1d5db',
-    400: '#9ca3af',
-    500: '#6b7280',
-    600: '#4b5563',
-    700: '#374151',
-    800: '#1f2937',
-    900: '#111827',
-    950: '#030712',
+    '50': 'oklch(0.985 0.002 247.839)',
+    '100': 'oklch(0.967 0.003 264.542)',
+    '200': 'oklch(0.928 0.006 264.531)',
+    '300': 'oklch(0.872 0.01 258.338)',
+    '400': 'oklch(0.707 0.022 261.325)',
+    '500': 'oklch(0.551 0.027 264.364)',
+    '600': 'oklch(0.446 0.03 256.802)',
+    '700': 'oklch(0.373 0.034 259.733)',
+    '800': 'oklch(0.278 0.033 256.848)',
+    '900': 'oklch(0.21 0.034 264.665)',
+    '950': 'oklch(0.13 0.028 261.692)',
   },
   zinc: {
-    50: '#fafafa',
-    100: '#f4f4f5',
-    200: '#e4e4e7',
-    300: '#d4d4d8',
-    400: '#a1a1aa',
-    500: '#71717a',
-    600: '#52525b',
-    700: '#3f3f46',
-    800: '#27272a',
-    900: '#18181b',
-    950: '#09090b',
+    '50': 'oklch(0.985 0 none)',
+    '100': 'oklch(0.967 0.001 286.375)',
+    '200': 'oklch(0.92 0.004 286.32)',
+    '300': 'oklch(0.871 0.006 286.286)',
+    '400': 'oklch(0.705 0.015 286.067)',
+    '500': 'oklch(0.552 0.016 285.938)',
+    '600': 'oklch(0.442 0.017 285.786)',
+    '700': 'oklch(0.37 0.013 285.805)',
+    '800': 'oklch(0.274 0.006 286.033)',
+    '900': 'oklch(0.21 0.006 285.885)',
+    '950': 'oklch(0.141 0.005 285.823)',
   },
   neutral: {
-    50: '#fafafa',
-    100: '#f5f5f5',
-    200: '#e5e5e5',
-    300: '#d4d4d4',
-    400: '#a3a3a3',
-    500: '#737373',
-    600: '#525252',
-    700: '#404040',
-    800: '#262626',
-    900: '#171717',
-    950: '#0a0a0a',
+    '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)',
   },
   stone: {
-    50: '#fafaf9',
-    100: '#f5f5f4',
-    200: '#e7e5e4',
-    300: '#d6d3d1',
-    400: '#a8a29e',
-    500: '#78716c',
-    600: '#57534e',
-    700: '#44403c',
-    800: '#292524',
-    900: '#1c1917',
-    950: '#0c0a09',
+    '50': 'oklch(0.985 0.001 106.423)',
+    '100': 'oklch(0.97 0.001 106.424)',
+    '200': 'oklch(0.923 0.003 48.717)',
+    '300': 'oklch(0.869 0.005 56.366)',
+    '400': 'oklch(0.709 0.01 56.259)',
+    '500': 'oklch(0.553 0.013 58.071)',
+    '600': 'oklch(0.444 0.011 73.639)',
+    '700': 'oklch(0.374 0.01 67.558)',
+    '800': 'oklch(0.268 0.007 34.298)',
+    '900': 'oklch(0.216 0.006 56.043)',
+    '950': 'oklch(0.147 0.004 49.25)',
   },
   red: {
-    50: '#fef2f2',
-    100: '#fee2e2',
-    200: '#fecaca',
-    300: '#fca5a5',
-    400: '#f87171',
-    500: '#ef4444',
-    600: '#dc2626',
-    700: '#b91c1c',
-    800: '#991b1b',
-    900: '#7f1d1d',
-    950: '#450a0a',
+    '50': 'oklch(0.971 0.013 17.38)',
+    '100': 'oklch(0.936 0.032 17.717)',
+    '200': 'oklch(0.885 0.062 18.334)',
+    '300': 'oklch(0.808 0.114 19.571)',
+    '400': 'oklch(0.704 0.191 22.216)',
+    '500': 'oklch(0.637 0.237 25.331)',
+    '600': 'oklch(0.577 0.245 27.325)',
+    '700': 'oklch(0.505 0.213 27.518)',
+    '800': 'oklch(0.444 0.177 26.899)',
+    '900': 'oklch(0.396 0.141 25.723)',
+    '950': 'oklch(0.258 0.092 26.042)',
   },
   orange: {
-    50: '#fff7ed',
-    100: '#ffedd5',
-    200: '#fed7aa',
-    300: '#fdba74',
-    400: '#fb923c',
-    500: '#f97316',
-    600: '#ea580c',
-    700: '#c2410c',
-    800: '#9a3412',
-    900: '#7c2d12',
-    950: '#431407',
+    '50': 'oklch(0.98 0.016 73.684)',
+    '100': 'oklch(0.954 0.038 75.164)',
+    '200': 'oklch(0.901 0.076 70.697)',
+    '300': 'oklch(0.837 0.128 66.29)',
+    '400': 'oklch(0.75 0.183 55.934)',
+    '500': 'oklch(0.705 0.213 47.604)',
+    '600': 'oklch(0.646 0.222 41.116)',
+    '700': 'oklch(0.553 0.195 38.402)',
+    '800': 'oklch(0.47 0.157 37.304)',
+    '900': 'oklch(0.408 0.123 38.172)',
+    '950': 'oklch(0.266 0.079 36.259)',
   },
   amber: {
-    50: '#fffbeb',
-    100: '#fef3c7',
-    200: '#fde68a',
-    300: '#fcd34d',
-    400: '#fbbf24',
-    500: '#f59e0b',
-    600: '#d97706',
-    700: '#b45309',
-    800: '#92400e',
-    900: '#78350f',
-    950: '#451a03',
+    '50': 'oklch(0.987 0.022 95.277)',
+    '100': 'oklch(0.962 0.059 95.617)',
+    '200': 'oklch(0.924 0.12 95.746)',
+    '300': 'oklch(0.879 0.169 91.605)',
+    '400': 'oklch(0.828 0.189 84.429)',
+    '500': 'oklch(0.769 0.188 70.08)',
+    '600': 'oklch(0.666 0.179 58.318)',
+    '700': 'oklch(0.555 0.163 48.998)',
+    '800': 'oklch(0.473 0.137 46.201)',
+    '900': 'oklch(0.414 0.112 45.904)',
+    '950': 'oklch(0.279 0.077 45.635)',
   },
   yellow: {
-    50: '#fefce8',
-    100: '#fef9c3',
-    200: '#fef08a',
-    300: '#fde047',
-    400: '#facc15',
-    500: '#eab308',
-    600: '#ca8a04',
-    700: '#a16207',
-    800: '#854d0e',
-    900: '#713f12',
-    950: '#422006',
+    '50': 'oklch(0.987 0.026 102.212)',
+    '100': 'oklch(0.973 0.071 103.193)',
+    '200': 'oklch(0.945 0.129 101.54)',
+    '300': 'oklch(0.905 0.182 98.111)',
+    '400': 'oklch(0.852 0.199 91.936)',
+    '500': 'oklch(0.795 0.184 86.047)',
+    '600': 'oklch(0.681 0.162 75.834)',
+    '700': 'oklch(0.554 0.135 66.442)',
+    '800': 'oklch(0.476 0.114 61.907)',
+    '900': 'oklch(0.421 0.095 57.708)',
+    '950': 'oklch(0.286 0.066 53.813)',
   },
   lime: {
-    50: '#f7fee7',
-    100: '#ecfccb',
-    200: '#d9f99d',
-    300: '#bef264',
-    400: '#a3e635',
-    500: '#84cc16',
-    600: '#65a30d',
-    700: '#4d7c0f',
-    800: '#3f6212',
-    900: '#365314',
-    950: '#1a2e05',
+    '50': 'oklch(0.986 0.031 120.757)',
+    '100': 'oklch(0.967 0.067 122.328)',
+    '200': 'oklch(0.938 0.127 124.321)',
+    '300': 'oklch(0.897 0.196 126.665)',
+    '400': 'oklch(0.841 0.238 128.85)',
+    '500': 'oklch(0.768 0.233 130.85)',
+    '600': 'oklch(0.648 0.2 131.684)',
+    '700': 'oklch(0.532 0.157 131.589)',
+    '800': 'oklch(0.453 0.124 130.933)',
+    '900': 'oklch(0.405 0.101 131.063)',
+    '950': 'oklch(0.274 0.072 132.109)',
   },
   green: {
-    50: '#f0fdf4',
-    100: '#dcfce7',
-    200: '#bbf7d0',
-    300: '#86efac',
-    400: '#4ade80',
-    500: '#22c55e',
-    600: '#16a34a',
-    700: '#15803d',
-    800: '#166534',
-    900: '#14532d',
-    950: '#052e16',
+    '50': 'oklch(0.982 0.018 155.826)',
+    '100': 'oklch(0.962 0.044 156.743)',
+    '200': 'oklch(0.925 0.084 155.995)',
+    '300': 'oklch(0.871 0.15 154.449)',
+    '400': 'oklch(0.792 0.209 151.711)',
+    '500': 'oklch(0.723 0.219 149.579)',
+    '600': 'oklch(0.627 0.194 149.214)',
+    '700': 'oklch(0.527 0.154 150.069)',
+    '800': 'oklch(0.448 0.119 151.328)',
+    '900': 'oklch(0.393 0.095 152.535)',
+    '950': 'oklch(0.266 0.065 152.934)',
   },
   emerald: {
-    50: '#ecfdf5',
-    100: '#d1fae5',
-    200: '#a7f3d0',
-    300: '#6ee7b7',
-    400: '#34d399',
-    500: '#10b981',
-    600: '#059669',
-    700: '#047857',
-    800: '#065f46',
-    900: '#064e3b',
-    950: '#022c22',
+    '50': 'oklch(0.979 0.021 166.113)',
+    '100': 'oklch(0.95 0.052 163.051)',
+    '200': 'oklch(0.905 0.093 164.15)',
+    '300': 'oklch(0.845 0.143 164.978)',
+    '400': 'oklch(0.765 0.177 163.223)',
+    '500': 'oklch(0.696 0.17 162.48)',
+    '600': 'oklch(0.596 0.145 163.225)',
+    '700': 'oklch(0.508 0.118 165.612)',
+    '800': 'oklch(0.432 0.095 166.913)',
+    '900': 'oklch(0.378 0.077 168.94)',
+    '950': 'oklch(0.262 0.051 172.552)',
   },
   teal: {
-    50: '#f0fdfa',
-    100: '#ccfbf1',
-    200: '#99f6e4',
-    300: '#5eead4',
-    400: '#2dd4bf',
-    500: '#14b8a6',
-    600: '#0d9488',
-    700: '#0f766e',
-    800: '#115e59',
-    900: '#134e4a',
-    950: '#042f2e',
+    '50': 'oklch(0.984 0.014 180.72)',
+    '100': 'oklch(0.953 0.051 180.801)',
+    '200': 'oklch(0.91 0.096 180.426)',
+    '300': 'oklch(0.855 0.138 181.071)',
+    '400': 'oklch(0.777 0.152 181.912)',
+    '500': 'oklch(0.704 0.14 182.503)',
+    '600': 'oklch(0.6 0.118 184.704)',
+    '700': 'oklch(0.511 0.096 186.391)',
+    '800': 'oklch(0.437 0.078 188.216)',
+    '900': 'oklch(0.386 0.063 188.416)',
+    '950': 'oklch(0.277 0.046 192.524)',
   },
   cyan: {
-    50: '#ecfeff',
-    100: '#cffafe',
-    200: '#a5f3fc',
-    300: '#67e8f9',
-    400: '#22d3ee',
-    500: '#06b6d4',
-    600: '#0891b2',
-    700: '#0e7490',
-    800: '#155e75',
-    900: '#164e63',
-    950: '#083344',
+    '50': 'oklch(0.984 0.019 200.873)',
+    '100': 'oklch(0.956 0.045 203.388)',
+    '200': 'oklch(0.917 0.08 205.041)',
+    '300': 'oklch(0.865 0.127 207.078)',
+    '400': 'oklch(0.789 0.154 211.53)',
+    '500': 'oklch(0.715 0.143 215.221)',
+    '600': 'oklch(0.609 0.126 221.723)',
+    '700': 'oklch(0.52 0.105 223.128)',
+    '800': 'oklch(0.45 0.085 224.283)',
+    '900': 'oklch(0.398 0.07 227.392)',
+    '950': 'oklch(0.302 0.056 229.695)',
   },
   sky: {
-    50: '#f0f9ff',
-    100: '#e0f2fe',
-    200: '#bae6fd',
-    300: '#7dd3fc',
-    400: '#38bdf8',
-    500: '#0ea5e9',
-    600: '#0284c7',
-    700: '#0369a1',
-    800: '#075985',
-    900: '#0c4a6e',
-    950: '#082f49',
+    '50': 'oklch(0.977 0.013 236.62)',
+    '100': 'oklch(0.951 0.026 236.824)',
+    '200': 'oklch(0.901 0.058 230.902)',
+    '300': 'oklch(0.828 0.111 230.318)',
+    '400': 'oklch(0.746 0.16 232.661)',
+    '500': 'oklch(0.685 0.169 237.323)',
+    '600': 'oklch(0.588 0.158 241.966)',
+    '700': 'oklch(0.5 0.134 242.749)',
+    '800': 'oklch(0.443 0.11 240.79)',
+    '900': 'oklch(0.391 0.09 240.876)',
+    '950': 'oklch(0.293 0.066 243.157)',
   },
   blue: {
-    50: '#eff6ff',
-    100: '#dbeafe',
-    200: '#bfdbfe',
-    300: '#93c5fd',
-    400: '#60a5fa',
-    500: '#3b82f6',
-    600: '#2563eb',
-    700: '#1d4ed8',
-    800: '#1e40af',
-    900: '#1e3a8a',
-    950: '#172554',
+    '50': 'oklch(0.97 0.014 254.604)',
+    '100': 'oklch(0.932 0.032 255.585)',
+    '200': 'oklch(0.882 0.059 254.128)',
+    '300': 'oklch(0.809 0.105 251.813)',
+    '400': 'oklch(0.707 0.165 254.624)',
+    '500': 'oklch(0.623 0.214 259.815)',
+    '600': 'oklch(0.546 0.245 262.881)',
+    '700': 'oklch(0.488 0.243 264.376)',
+    '800': 'oklch(0.424 0.199 265.638)',
+    '900': 'oklch(0.379 0.146 265.522)',
+    '950': 'oklch(0.282 0.091 267.935)',
   },
   indigo: {
-    50: '#eef2ff',
-    100: '#e0e7ff',
-    200: '#c7d2fe',
-    300: '#a5b4fc',
-    400: '#818cf8',
-    500: '#6366f1',
-    600: '#4f46e5',
-    700: '#4338ca',
-    800: '#3730a3',
-    900: '#312e81',
-    950: '#1e1b4b',
+    '50': 'oklch(0.962 0.018 272.314)',
+    '100': 'oklch(0.93 0.034 272.788)',
+    '200': 'oklch(0.87 0.065 274.039)',
+    '300': 'oklch(0.785 0.115 274.713)',
+    '400': 'oklch(0.673 0.182 276.935)',
+    '500': 'oklch(0.585 0.233 277.117)',
+    '600': 'oklch(0.511 0.262 276.966)',
+    '700': 'oklch(0.457 0.24 277.023)',
+    '800': 'oklch(0.398 0.195 277.366)',
+    '900': 'oklch(0.359 0.144 278.697)',
+    '950': 'oklch(0.257 0.09 281.288)',
   },
   violet: {
-    50: '#f5f3ff',
-    100: '#ede9fe',
-    200: '#ddd6fe',
-    300: '#c4b5fd',
-    400: '#a78bfa',
-    500: '#8b5cf6',
-    600: '#7c3aed',
-    700: '#6d28d9',
-    800: '#5b21b6',
-    900: '#4c1d95',
-    950: '#2e1065',
+    '50': 'oklch(0.969 0.016 293.756)',
+    '100': 'oklch(0.943 0.029 294.588)',
+    '200': 'oklch(0.894 0.057 293.283)',
+    '300': 'oklch(0.811 0.111 293.571)',
+    '400': 'oklch(0.702 0.183 293.541)',
+    '500': 'oklch(0.606 0.25 292.717)',
+    '600': 'oklch(0.541 0.281 293.009)',
+    '700': 'oklch(0.491 0.27 292.581)',
+    '800': 'oklch(0.432 0.232 292.759)',
+    '900': 'oklch(0.38 0.189 293.745)',
+    '950': 'oklch(0.283 0.141 291.089)',
   },
   purple: {
-    50: '#faf5ff',
-    100: '#f3e8ff',
-    200: '#e9d5ff',
-    300: '#d8b4fe',
-    400: '#c084fc',
-    500: '#a855f7',
-    600: '#9333ea',
-    700: '#7e22ce',
-    800: '#6b21a8',
-    900: '#581c87',
-    950: '#3b0764',
+    '50': 'oklch(0.977 0.014 308.299)',
+    '100': 'oklch(0.946 0.033 307.174)',
+    '200': 'oklch(0.902 0.063 306.703)',
+    '300': 'oklch(0.827 0.119 306.383)',
+    '400': 'oklch(0.714 0.203 305.504)',
+    '500': 'oklch(0.627 0.265 303.9)',
+    '600': 'oklch(0.558 0.288 302.321)',
+    '700': 'oklch(0.496 0.265 301.924)',
+    '800': 'oklch(0.438 0.218 303.724)',
+    '900': 'oklch(0.381 0.176 304.987)',
+    '950': 'oklch(0.291 0.149 302.717)',
   },
   fuchsia: {
-    50: '#fdf4ff',
-    100: '#fae8ff',
-    200: '#f5d0fe',
-    300: '#f0abfc',
-    400: '#e879f9',
-    500: '#d946ef',
-    600: '#c026d3',
-    700: '#a21caf',
-    800: '#86198f',
-    900: '#701a75',
-    950: '#4a044e',
+    '50': 'oklch(0.977 0.017 320.058)',
+    '100': 'oklch(0.952 0.037 318.852)',
+    '200': 'oklch(0.903 0.076 319.62)',
+    '300': 'oklch(0.833 0.145 321.434)',
+    '400': 'oklch(0.74 0.238 322.16)',
+    '500': 'oklch(0.667 0.295 322.15)',
+    '600': 'oklch(0.591 0.293 322.896)',
+    '700': 'oklch(0.518 0.253 323.949)',
+    '800': 'oklch(0.452 0.211 324.591)',
+    '900': 'oklch(0.401 0.17 325.612)',
+    '950': 'oklch(0.293 0.136 325.661)',
   },
   pink: {
-    50: '#fdf2f8',
-    100: '#fce7f3',
-    200: '#fbcfe8',
-    300: '#f9a8d4',
-    400: '#f472b6',
-    500: '#ec4899',
-    600: '#db2777',
-    700: '#be185d',
-    800: '#9d174d',
-    900: '#831843',
-    950: '#500724',
+    '50': 'oklch(0.971 0.014 343.198)',
+    '100': 'oklch(0.948 0.028 342.258)',
+    '200': 'oklch(0.899 0.061 343.231)',
+    '300': 'oklch(0.823 0.12 346.018)',
+    '400': 'oklch(0.718 0.202 349.761)',
+    '500': 'oklch(0.656 0.241 354.308)',
+    '600': 'oklch(0.592 0.249 0.584)',
+    '700': 'oklch(0.525 0.223 3.958)',
+    '800': 'oklch(0.459 0.187 3.815)',
+    '900': 'oklch(0.408 0.153 2.432)',
+    '950': 'oklch(0.284 0.109 3.907)',
   },
   rose: {
-    50: '#fff1f2',
-    100: '#ffe4e6',
-    200: '#fecdd3',
-    300: '#fda4af',
-    400: '#fb7185',
-    500: '#f43f5e',
-    600: '#e11d48',
-    700: '#be123c',
-    800: '#9f1239',
-    900: '#881337',
-    950: '#4c0519',
+    '50': 'oklch(0.969 0.015 12.422)',
+    '100': 'oklch(0.941 0.03 12.58)',
+    '200': 'oklch(0.892 0.058 10.001)',
+    '300': 'oklch(0.81 0.117 11.638)',
+    '400': 'oklch(0.712 0.194 13.428)',
+    '500': 'oklch(0.645 0.246 16.439)',
+    '600': 'oklch(0.586 0.253 17.585)',
+    '700': 'oklch(0.514 0.222 16.935)',
+    '800': 'oklch(0.455 0.188 13.697)',
+    '900': 'oklch(0.41 0.159 10.272)',
+    '950': 'oklch(0.271 0.105 12.094)',
   },
 }
diff --git a/packages/tailwindcss/src/compat/config/resolve-config.test.ts b/packages/tailwindcss/src/compat/config/resolve-config.test.ts
index 4bcd4feb9a25..0a1daeee6b49 100644
--- a/packages/tailwindcss/src/compat/config/resolve-config.test.ts
+++ b/packages/tailwindcss/src/compat/config/resolve-config.test.ts
@@ -231,17 +231,17 @@ test('theme keys can read from the CSS theme', () => {
       },
       caretColor: {
         primary: {
-          '50': '#f0fdf4',
-          '100': '#dcfce7',
-          '200': '#bbf7d0',
-          '300': '#86efac',
-          '400': '#4ade80',
-          '500': '#22c55e',
-          '600': '#16a34a',
-          '700': '#15803d',
-          '800': '#166534',
-          '900': '#14532d',
-          '950': '#052e16',
+          '50': 'oklch(0.982 0.018 155.826)',
+          '100': 'oklch(0.962 0.044 156.743)',
+          '200': 'oklch(0.925 0.084 155.995)',
+          '300': 'oklch(0.871 0.15 154.449)',
+          '400': 'oklch(0.792 0.209 151.711)',
+          '500': 'oklch(0.723 0.219 149.579)',
+          '600': 'oklch(0.627 0.194 149.214)',
+          '700': 'oklch(0.527 0.154 150.069)',
+          '800': 'oklch(0.448 0.119 151.328)',
+          '900': 'oklch(0.393 0.095 152.535)',
+          '950': 'oklch(0.266 0.065 152.934)',
         },
       },
       transitionColor: {
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index a2df1994ff70..0d3b11ffbf5f 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -619,7 +619,7 @@ describe('theme function', () => {
         ],
         ['width.xs', '20rem'],
         ['transition.timing.function.in.out', 'cubic-bezier(.4, 0, .2, 1)'],
-        ['backgroundColor.red.500', '#ef4444'],
+        ['backgroundColor.red.500', 'oklch(.637 .237 25.331)'],
       ])('theme(%s) → %s', async (value, result) => {
         let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8')
 
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index b7580d2f310a..e9da9f555ef2 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -29,32 +29,29 @@ test('touch action', async ({ page }) => {
 
 for (let [classes, expected] of [
   [
-    'bg-linear-to-r from-red-500',
-    'linear-gradient(to right, rgb(239, 68, 68) 0%, rgba(0, 0, 0, 0) 100%)',
+    'bg-linear-to-r from-red',
+    'linear-gradient(to right, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
   ],
   [
-    'bg-linear-to-r via-red-500',
-    'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(239, 68, 68) 50%, rgba(0, 0, 0, 0) 100%)',
+    'bg-linear-to-r via-red',
+    'linear-gradient(to right, 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, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 100%)'],
   [
-    'bg-linear-to-r to-red-500',
-    'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(239, 68, 68) 100%)',
+    'bg-linear-to-r from-red to-blue',
+    'linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
   ],
   [
-    'bg-linear-to-r from-red-500 to-blue-500',
-    'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(59, 130, 246) 100%)',
+    'bg-linear-to-r via-red to-blue',
+    'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgb(0, 0, 255) 100%)',
   ],
   [
-    'bg-linear-to-r via-red-500 to-blue-500',
-    'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(239, 68, 68) 50%, rgb(59, 130, 246) 100%)',
+    'bg-linear-to-r from-red via-green to-blue',
+    'linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
   ],
   [
-    'bg-linear-to-r from-red-500 via-green-500 to-blue-500',
-    'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(34, 197, 94) 50%, rgb(59, 130, 246) 100%)',
-  ],
-  [
-    'bg-linear-[to_right,var(--color-red-500),var(--color-green-500),var(--color-blue-500)]',
-    'linear-gradient(to right, rgb(239, 68, 68), rgb(34, 197, 94), rgb(59, 130, 246))',
+    'bg-linear-[to_right,var(--color-red),var(--color-green),var(--color-blue)]',
+    'linear-gradient(to right, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))',
   ],
 ]) {
   test(`background gradient, "${classes}"`, async ({ page }) => {
@@ -70,21 +67,17 @@ for (let [classes, expected] of [
 test('background gradient, going from 2 to 3', async ({ page }) => {
   let { getPropertyValue } = await render(
     page,
-    html`
-      <div id="x" class="bg-gradient-to-r from-red-500 hover:via-green-500 to-blue-500">
-        Hello world
-      </div>
-    `,
+    html` <div id="x" class="bg-gradient-to-r from-red hover:via-green to-blue">Hello world</div> `,
   )
 
   expect(await getPropertyValue('#x', 'background-image')).toEqual(
-    'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(59, 130, 246) 100%)',
+    'linear-gradient(to right, 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, rgb(239, 68, 68) 0%, rgb(34, 197, 94) 50%, rgb(59, 130, 246) 100%)',
+    'linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
   )
 })
 
@@ -92,36 +85,33 @@ test('background gradient, going from 3 to 2', async ({ page }) => {
   let { getPropertyValue } = await render(
     page,
     html`
-      <div id="x" class="bg-gradient-to-r from-red-500 via-green-500 hover:via-none to-blue-500">
+      <div id="x" class="bg-gradient-to-r from-red via-green hover:via-none to-blue">
         Hello world
       </div>
     `,
   )
 
   expect(await getPropertyValue('#x', 'background-image')).toEqual(
-    'linear-gradient(to right, rgb(239, 68, 68) 0%, rgb(34, 197, 94) 50%, rgb(59, 130, 246) 100%)',
+    'linear-gradient(to right, 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, rgb(239, 68, 68) 0%, rgb(59, 130, 246) 100%)',
+    'linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
   )
 })
 
 for (let [classes, expected] of [
-  ['bg-conic from-red-500', 'conic-gradient(rgb(239, 68, 68) 0%, rgba(0, 0, 0, 0) 100%)'],
+  ['bg-conic from-red', 'conic-gradient(rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
+  ['bg-conic-45 from-red', 'conic-gradient(from 45deg, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
   [
-    'bg-conic-45 from-red-500',
-    'conic-gradient(from 45deg, rgb(239, 68, 68) 0%, rgba(0, 0, 0, 0) 100%)',
+    'bg-conic-[from_45deg] from-red',
+    'conic-gradient(from 45deg, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
   ],
   [
-    'bg-conic-[from_45deg] from-red-500',
-    'conic-gradient(from 45deg, rgb(239, 68, 68) 0%, rgba(0, 0, 0, 0) 100%)',
-  ],
-  [
-    'bg-conic-[from_45deg,var(--color-red-500),transparent]',
-    'conic-gradient(from 45deg, rgb(239, 68, 68), rgba(0, 0, 0, 0))',
+    'bg-conic-[from_45deg,var(--color-red),transparent]',
+    'conic-gradient(from 45deg, rgb(255, 0, 0), rgba(0, 0, 0, 0))',
   ],
 ]) {
   test(`conic gradient, "${classes}"`, async ({ page }) => {
@@ -135,14 +125,14 @@ for (let [classes, expected] of [
 }
 
 for (let [classes, expected] of [
-  ['bg-radial from-red-500', 'radial-gradient(rgb(239, 68, 68) 0%, rgba(0, 0, 0, 0) 100%)'],
+  ['bg-radial from-red', 'radial-gradient(rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
   [
-    'bg-radial-[at_0%_0%] from-red-500',
-    'radial-gradient(at 0% 0%, rgb(239, 68, 68) 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%)',
   ],
   [
-    'bg-radial-[at_0%_0%,var(--color-red-500),transparent]',
-    'radial-gradient(at 0% 0%, rgb(239, 68, 68), rgba(0, 0, 0, 0))',
+    'bg-radial-[at_0%_0%,var(--color-red),transparent]',
+    'radial-gradient(at 0% 0%, rgb(255, 0, 0), rgba(0, 0, 0, 0))',
   ],
 ]) {
   test(`radial gradient, "${classes}"`, async ({ page }) => {
@@ -220,13 +210,11 @@ test('shadow colors', async ({ page }) => {
   let { getPropertyValue } = await render(
     page,
     html`
-      <div id="a" class="shadow shadow-red-500"></div>
-      <div id="b" class="shadow-xl shadow-red-500"></div>
-      <div id="c" class="shadow-[0px_2px_4px] shadow-red-500"></div>
-      <div id="d" class="shadow shadow-red-500 hover:shadow-xl">Hello world</div>
-      <div id="e" class="shadow shadow-red-500 hover:shadow-xl hover:shadow-initial">
-        Hello world
-      </div>
+      <div id="a" class="shadow shadow-red"></div>
+      <div id="b" class="shadow-xl shadow-red"></div>
+      <div id="c" class="shadow-[0px_2px_4px] shadow-red"></div>
+      <div id="d" class="shadow shadow-red hover:shadow-xl">Hello world</div>
+      <div id="e" class="shadow shadow-red hover:shadow-xl hover:shadow-initial">Hello world</div>
     `,
   )
 
@@ -236,7 +224,7 @@ test('shadow colors', async ({ page }) => {
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-      'rgb(239, 68, 68) 0px 1px 3px 0px, rgb(239, 68, 68) 0px 1px 2px -1px',
+      'rgb(255, 0, 0) 0px 1px 3px 0px, rgb(255, 0, 0) 0px 1px 2px -1px',
     ].join(', '),
   )
   expect(await getPropertyValue('#b', 'box-shadow')).toEqual(
@@ -245,7 +233,7 @@ test('shadow colors', async ({ page }) => {
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-      'rgb(239, 68, 68) 0px 20px 25px -5px, rgb(239, 68, 68) 0px 8px 10px -6px',
+      'rgb(255, 0, 0) 0px 20px 25px -5px, rgb(255, 0, 0) 0px 8px 10px -6px',
     ].join(', '),
   )
   expect(await getPropertyValue('#c', 'box-shadow')).toEqual(
@@ -254,7 +242,7 @@ test('shadow colors', async ({ page }) => {
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-      'rgb(239, 68, 68) 0px 2px 4px 0px',
+      'rgb(255, 0, 0) 0px 2px 4px 0px',
     ].join(', '),
   )
 
@@ -264,7 +252,7 @@ test('shadow colors', async ({ page }) => {
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-      'rgb(239, 68, 68) 0px 1px 3px 0px, rgb(239, 68, 68) 0px 1px 2px -1px',
+      'rgb(255, 0, 0) 0px 1px 3px 0px, rgb(255, 0, 0) 0px 1px 2px -1px',
     ].join(', '),
   )
 
@@ -276,7 +264,7 @@ test('shadow colors', async ({ page }) => {
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-      'rgb(239, 68, 68) 0px 20px 25px -5px, rgb(239, 68, 68) 0px 8px 10px -6px',
+      'rgb(255, 0, 0) 0px 20px 25px -5px, rgb(255, 0, 0) 0px 8px 10px -6px',
     ].join(', '),
   )
 
@@ -286,7 +274,7 @@ test('shadow colors', async ({ page }) => {
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
-      'rgb(239, 68, 68) 0px 1px 3px 0px, rgb(239, 68, 68) 0px 1px 2px -1px',
+      'rgb(255, 0, 0) 0px 1px 3px 0px, rgb(255, 0, 0) 0px 1px 2px -1px',
     ].join(', '),
   )
 
@@ -307,13 +295,13 @@ test('inset shadow colors', async ({ page }) => {
   let { getPropertyValue } = await render(
     page,
     html`
-      <div id="a" class="inset-shadow-sm inset-shadow-red-500"></div>
-      <div id="b" class="inset-shadow inset-shadow-red-500"></div>
-      <div id="c" class="inset-shadow-[0px_3px_6px] inset-shadow-red-500"></div>
-      <div id="d" class="inset-shadow-sm inset-shadow-red-500 hover:inset-shadow">Hello world</div>
+      <div id="a" class="inset-shadow-sm inset-shadow-red"></div>
+      <div id="b" class="inset-shadow inset-shadow-red"></div>
+      <div id="c" class="inset-shadow-[0px_3px_6px] inset-shadow-red"></div>
+      <div id="d" class="inset-shadow-sm inset-shadow-red hover:inset-shadow">Hello world</div>
       <div
         id="e"
-        class="inset-shadow-sm inset-shadow-red-500 hover:inset-shadow hover:inset-shadow-initial"
+        class="inset-shadow-sm inset-shadow-red hover:inset-shadow hover:inset-shadow-initial"
       >
         Hello world
       </div>
@@ -322,7 +310,7 @@ test('inset shadow colors', async ({ page }) => {
 
   expect(await getPropertyValue('#a', 'box-shadow')).toEqual(
     [
-      'rgb(239, 68, 68) 0px 1px 1px 0px inset',
+      'rgb(255, 0, 0) 0px 1px 1px 0px inset',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
@@ -331,7 +319,7 @@ test('inset shadow colors', async ({ page }) => {
   )
   expect(await getPropertyValue('#b', 'box-shadow')).toEqual(
     [
-      'rgb(239, 68, 68) 0px 2px 4px 0px inset',
+      'rgb(255, 0, 0) 0px 2px 4px 0px inset',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
@@ -340,7 +328,7 @@ test('inset shadow colors', async ({ page }) => {
   )
   expect(await getPropertyValue('#c', 'box-shadow')).toEqual(
     [
-      'rgb(239, 68, 68) 0px 3px 6px 0px inset',
+      'rgb(255, 0, 0) 0px 3px 6px 0px inset',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
@@ -350,7 +338,7 @@ test('inset shadow colors', async ({ page }) => {
 
   expect(await getPropertyValue('#d', 'box-shadow')).toEqual(
     [
-      'rgb(239, 68, 68) 0px 1px 1px 0px inset',
+      'rgb(255, 0, 0) 0px 1px 1px 0px inset',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
@@ -362,7 +350,7 @@ test('inset shadow colors', async ({ page }) => {
 
   expect(await getPropertyValue('#d', 'box-shadow')).toEqual(
     [
-      'rgb(239, 68, 68) 0px 2px 4px 0px inset',
+      'rgb(255, 0, 0) 0px 2px 4px 0px inset',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
@@ -372,7 +360,7 @@ test('inset shadow colors', async ({ page }) => {
 
   expect(await getPropertyValue('#e', 'box-shadow')).toEqual(
     [
-      'rgb(239, 68, 68) 0px 1px 1px 0px inset',
+      'rgb(255, 0, 0) 0px 1px 1px 0px inset',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
       'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
@@ -636,6 +624,12 @@ async function render(page: Page, content: string, extraCss: string = '') {
     @layer theme, base, components, utilities;
     @layer theme {
       ${defaultTheme}
+
+      @theme {
+        --color-red: rgb(255, 0, 0);
+        --color-green: rgb(0, 255, 0);
+        --color-blue: rgb(0, 0, 255);
+      }
     }
     @layer base {
       ${preflight}
diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
index a6de6e84af85..3c9bdeaf397b 100644
--- a/packages/tailwindcss/theme.css
+++ b/packages/tailwindcss/theme.css
@@ -19,248 +19,270 @@
   /* Colors */
   --color-black: #000;
   --color-white: #fff;
-  --color-slate-50: #f8fafc;
-  --color-slate-100: #f1f5f9;
-  --color-slate-200: #e2e8f0;
-  --color-slate-300: #cbd5e1;
-  --color-slate-400: #94a3b8;
-  --color-slate-500: #64748b;
-  --color-slate-600: #475569;
-  --color-slate-700: #334155;
-  --color-slate-800: #1e293b;
-  --color-slate-900: #0f172a;
-  --color-slate-950: #020617;
-  --color-gray-50: #f9fafb;
-  --color-gray-100: #f3f4f6;
-  --color-gray-200: #e5e7eb;
-  --color-gray-300: #d1d5db;
-  --color-gray-400: #9ca3af;
-  --color-gray-500: #6b7280;
-  --color-gray-600: #4b5563;
-  --color-gray-700: #374151;
-  --color-gray-800: #1f2937;
-  --color-gray-900: #111827;
-  --color-gray-950: #030712;
-  --color-zinc-50: #fafafa;
-  --color-zinc-100: #f4f4f5;
-  --color-zinc-200: #e4e4e7;
-  --color-zinc-300: #d4d4d8;
-  --color-zinc-400: #a1a1aa;
-  --color-zinc-500: #71717a;
-  --color-zinc-600: #52525b;
-  --color-zinc-700: #3f3f46;
-  --color-zinc-800: #27272a;
-  --color-zinc-900: #18181b;
-  --color-zinc-950: #09090b;
-  --color-neutral-50: #fafafa;
-  --color-neutral-100: #f5f5f5;
-  --color-neutral-200: #e5e5e5;
-  --color-neutral-300: #d4d4d4;
-  --color-neutral-400: #a3a3a3;
-  --color-neutral-500: #737373;
-  --color-neutral-600: #525252;
-  --color-neutral-700: #404040;
-  --color-neutral-800: #262626;
-  --color-neutral-900: #171717;
-  --color-neutral-950: #0a0a0a;
-  --color-stone-50: #fafaf9;
-  --color-stone-100: #f5f5f4;
-  --color-stone-200: #e7e5e4;
-  --color-stone-300: #d6d3d1;
-  --color-stone-400: #a8a29e;
-  --color-stone-500: #78716c;
-  --color-stone-600: #57534e;
-  --color-stone-700: #44403c;
-  --color-stone-800: #292524;
-  --color-stone-900: #1c1917;
-  --color-stone-950: #0c0a09;
-  --color-red-50: #fef2f2;
-  --color-red-100: #fee2e2;
-  --color-red-200: #fecaca;
-  --color-red-300: #fca5a5;
-  --color-red-400: #f87171;
-  --color-red-500: #ef4444;
-  --color-red-600: #dc2626;
-  --color-red-700: #b91c1c;
-  --color-red-800: #991b1b;
-  --color-red-900: #7f1d1d;
-  --color-red-950: #450a0a;
-  --color-orange-50: #fff7ed;
-  --color-orange-100: #ffedd5;
-  --color-orange-200: #fed7aa;
-  --color-orange-300: #fdba74;
-  --color-orange-400: #fb923c;
-  --color-orange-500: #f97316;
-  --color-orange-600: #ea580c;
-  --color-orange-700: #c2410c;
-  --color-orange-800: #9a3412;
-  --color-orange-900: #7c2d12;
-  --color-orange-950: #431407;
-  --color-amber-50: #fffbeb;
-  --color-amber-100: #fef3c7;
-  --color-amber-200: #fde68a;
-  --color-amber-300: #fcd34d;
-  --color-amber-400: #fbbf24;
-  --color-amber-500: #f59e0b;
-  --color-amber-600: #d97706;
-  --color-amber-700: #b45309;
-  --color-amber-800: #92400e;
-  --color-amber-900: #78350f;
-  --color-amber-950: #451a03;
-  --color-yellow-50: #fefce8;
-  --color-yellow-100: #fef9c3;
-  --color-yellow-200: #fef08a;
-  --color-yellow-300: #fde047;
-  --color-yellow-400: #facc15;
-  --color-yellow-500: #eab308;
-  --color-yellow-600: #ca8a04;
-  --color-yellow-700: #a16207;
-  --color-yellow-800: #854d0e;
-  --color-yellow-900: #713f12;
-  --color-yellow-950: #422006;
-  --color-lime-50: #f7fee7;
-  --color-lime-100: #ecfccb;
-  --color-lime-200: #d9f99d;
-  --color-lime-300: #bef264;
-  --color-lime-400: #a3e635;
-  --color-lime-500: #84cc16;
-  --color-lime-600: #65a30d;
-  --color-lime-700: #4d7c0f;
-  --color-lime-800: #3f6212;
-  --color-lime-900: #365314;
-  --color-lime-950: #1a2e05;
-  --color-green-50: #f0fdf4;
-  --color-green-100: #dcfce7;
-  --color-green-200: #bbf7d0;
-  --color-green-300: #86efac;
-  --color-green-400: #4ade80;
-  --color-green-500: #22c55e;
-  --color-green-600: #16a34a;
-  --color-green-700: #15803d;
-  --color-green-800: #166534;
-  --color-green-900: #14532d;
-  --color-green-950: #052e16;
-  --color-emerald-50: #ecfdf5;
-  --color-emerald-100: #d1fae5;
-  --color-emerald-200: #a7f3d0;
-  --color-emerald-300: #6ee7b7;
-  --color-emerald-400: #34d399;
-  --color-emerald-500: #10b981;
-  --color-emerald-600: #059669;
-  --color-emerald-700: #047857;
-  --color-emerald-800: #065f46;
-  --color-emerald-900: #064e3b;
-  --color-emerald-950: #022c22;
-  --color-teal-50: #f0fdfa;
-  --color-teal-100: #ccfbf1;
-  --color-teal-200: #99f6e4;
-  --color-teal-300: #5eead4;
-  --color-teal-400: #2dd4bf;
-  --color-teal-500: #14b8a6;
-  --color-teal-600: #0d9488;
-  --color-teal-700: #0f766e;
-  --color-teal-800: #115e59;
-  --color-teal-900: #134e4a;
-  --color-teal-950: #042f2e;
-  --color-cyan-50: #ecfeff;
-  --color-cyan-100: #cffafe;
-  --color-cyan-200: #a5f3fc;
-  --color-cyan-300: #67e8f9;
-  --color-cyan-400: #22d3ee;
-  --color-cyan-500: #06b6d4;
-  --color-cyan-600: #0891b2;
-  --color-cyan-700: #0e7490;
-  --color-cyan-800: #155e75;
-  --color-cyan-900: #164e63;
-  --color-cyan-950: #083344;
-  --color-sky-50: #f0f9ff;
-  --color-sky-100: #e0f2fe;
-  --color-sky-200: #bae6fd;
-  --color-sky-300: #7dd3fc;
-  --color-sky-400: #38bdf8;
-  --color-sky-500: #0ea5e9;
-  --color-sky-600: #0284c7;
-  --color-sky-700: #0369a1;
-  --color-sky-800: #075985;
-  --color-sky-900: #0c4a6e;
-  --color-sky-950: #082f49;
-  --color-blue-50: #eff6ff;
-  --color-blue-100: #dbeafe;
-  --color-blue-200: #bfdbfe;
-  --color-blue-300: #93c5fd;
-  --color-blue-400: #60a5fa;
-  --color-blue-500: #3b82f6;
-  --color-blue-600: #2563eb;
-  --color-blue-700: #1d4ed8;
-  --color-blue-800: #1e40af;
-  --color-blue-900: #1e3a8a;
-  --color-blue-950: #172554;
-  --color-indigo-50: #eef2ff;
-  --color-indigo-100: #e0e7ff;
-  --color-indigo-200: #c7d2fe;
-  --color-indigo-300: #a5b4fc;
-  --color-indigo-400: #818cf8;
-  --color-indigo-500: #6366f1;
-  --color-indigo-600: #4f46e5;
-  --color-indigo-700: #4338ca;
-  --color-indigo-800: #3730a3;
-  --color-indigo-900: #312e81;
-  --color-indigo-950: #1e1b4b;
-  --color-violet-50: #f5f3ff;
-  --color-violet-100: #ede9fe;
-  --color-violet-200: #ddd6fe;
-  --color-violet-300: #c4b5fd;
-  --color-violet-400: #a78bfa;
-  --color-violet-500: #8b5cf6;
-  --color-violet-600: #7c3aed;
-  --color-violet-700: #6d28d9;
-  --color-violet-800: #5b21b6;
-  --color-violet-900: #4c1d95;
-  --color-violet-950: #2e1065;
-  --color-purple-50: #faf5ff;
-  --color-purple-100: #f3e8ff;
-  --color-purple-200: #e9d5ff;
-  --color-purple-300: #d8b4fe;
-  --color-purple-400: #c084fc;
-  --color-purple-500: #a855f7;
-  --color-purple-600: #9333ea;
-  --color-purple-700: #7e22ce;
-  --color-purple-800: #6b21a8;
-  --color-purple-900: #581c87;
-  --color-purple-950: #3b0764;
-  --color-fuchsia-50: #fdf4ff;
-  --color-fuchsia-100: #fae8ff;
-  --color-fuchsia-200: #f5d0fe;
-  --color-fuchsia-300: #f0abfc;
-  --color-fuchsia-400: #e879f9;
-  --color-fuchsia-500: #d946ef;
-  --color-fuchsia-600: #c026d3;
-  --color-fuchsia-700: #a21caf;
-  --color-fuchsia-800: #86198f;
-  --color-fuchsia-900: #701a75;
-  --color-fuchsia-950: #4a044e;
-  --color-pink-50: #fdf2f8;
-  --color-pink-100: #fce7f3;
-  --color-pink-200: #fbcfe8;
-  --color-pink-300: #f9a8d4;
-  --color-pink-400: #f472b6;
-  --color-pink-500: #ec4899;
-  --color-pink-600: #db2777;
-  --color-pink-700: #be185d;
-  --color-pink-800: #9d174d;
-  --color-pink-900: #831843;
-  --color-pink-950: #500724;
-  --color-rose-50: #fff1f2;
-  --color-rose-100: #ffe4e6;
-  --color-rose-200: #fecdd3;
-  --color-rose-300: #fda4af;
-  --color-rose-400: #fb7185;
-  --color-rose-500: #f43f5e;
-  --color-rose-600: #e11d48;
-  --color-rose-700: #be123c;
-  --color-rose-800: #9f1239;
-  --color-rose-900: #881337;
-  --color-rose-950: #4c0519;
+
+  --color-slate-50: oklch(0.984 0.003 247.858);
+  --color-slate-100: oklch(0.968 0.007 247.896);
+  --color-slate-200: oklch(0.929 0.013 255.508);
+  --color-slate-300: oklch(0.869 0.022 252.894);
+  --color-slate-400: oklch(0.704 0.04 256.788);
+  --color-slate-500: oklch(0.554 0.046 257.417);
+  --color-slate-600: oklch(0.446 0.043 257.281);
+  --color-slate-700: oklch(0.372 0.044 257.287);
+  --color-slate-800: oklch(0.279 0.041 260.031);
+  --color-slate-900: oklch(0.208 0.042 265.755);
+  --color-slate-950: oklch(0.129 0.042 264.695);
+
+  --color-gray-50: oklch(0.985 0.002 247.839);
+  --color-gray-100: oklch(0.967 0.003 264.542);
+  --color-gray-200: oklch(0.928 0.006 264.531);
+  --color-gray-300: oklch(0.872 0.01 258.338);
+  --color-gray-400: oklch(0.707 0.022 261.325);
+  --color-gray-500: oklch(0.551 0.027 264.364);
+  --color-gray-600: oklch(0.446 0.03 256.802);
+  --color-gray-700: oklch(0.373 0.034 259.733);
+  --color-gray-800: oklch(0.278 0.033 256.848);
+  --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-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);
+  --color-zinc-400: oklch(0.705 0.015 286.067);
+  --color-zinc-500: oklch(0.552 0.016 285.938);
+  --color-zinc-600: oklch(0.442 0.017 285.786);
+  --color-zinc-700: oklch(0.37 0.013 285.805);
+  --color-zinc-800: oklch(0.274 0.006 286.033);
+  --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-stone-50: oklch(0.985 0.001 106.423);
+  --color-stone-100: oklch(0.97 0.001 106.424);
+  --color-stone-200: oklch(0.923 0.003 48.717);
+  --color-stone-300: oklch(0.869 0.005 56.366);
+  --color-stone-400: oklch(0.709 0.01 56.259);
+  --color-stone-500: oklch(0.553 0.013 58.071);
+  --color-stone-600: oklch(0.444 0.011 73.639);
+  --color-stone-700: oklch(0.374 0.01 67.558);
+  --color-stone-800: oklch(0.268 0.007 34.298);
+  --color-stone-900: oklch(0.216 0.006 56.043);
+  --color-stone-950: oklch(0.147 0.004 49.25);
+
+  --color-red-50: oklch(0.971 0.013 17.38);
+  --color-red-100: oklch(0.936 0.032 17.717);
+  --color-red-200: oklch(0.885 0.062 18.334);
+  --color-red-300: oklch(0.808 0.114 19.571);
+  --color-red-400: oklch(0.704 0.191 22.216);
+  --color-red-500: oklch(0.637 0.237 25.331);
+  --color-red-600: oklch(0.577 0.245 27.325);
+  --color-red-700: oklch(0.505 0.213 27.518);
+  --color-red-800: oklch(0.444 0.177 26.899);
+  --color-red-900: oklch(0.396 0.141 25.723);
+  --color-red-950: oklch(0.258 0.092 26.042);
+
+  --color-orange-50: oklch(0.98 0.016 73.684);
+  --color-orange-100: oklch(0.954 0.038 75.164);
+  --color-orange-200: oklch(0.901 0.076 70.697);
+  --color-orange-300: oklch(0.837 0.128 66.29);
+  --color-orange-400: oklch(0.75 0.183 55.934);
+  --color-orange-500: oklch(0.705 0.213 47.604);
+  --color-orange-600: oklch(0.646 0.222 41.116);
+  --color-orange-700: oklch(0.553 0.195 38.402);
+  --color-orange-800: oklch(0.47 0.157 37.304);
+  --color-orange-900: oklch(0.408 0.123 38.172);
+  --color-orange-950: oklch(0.266 0.079 36.259);
+
+  --color-amber-50: oklch(0.987 0.022 95.277);
+  --color-amber-100: oklch(0.962 0.059 95.617);
+  --color-amber-200: oklch(0.924 0.12 95.746);
+  --color-amber-300: oklch(0.879 0.169 91.605);
+  --color-amber-400: oklch(0.828 0.189 84.429);
+  --color-amber-500: oklch(0.769 0.188 70.08);
+  --color-amber-600: oklch(0.666 0.179 58.318);
+  --color-amber-700: oklch(0.555 0.163 48.998);
+  --color-amber-800: oklch(0.473 0.137 46.201);
+  --color-amber-900: oklch(0.414 0.112 45.904);
+  --color-amber-950: oklch(0.279 0.077 45.635);
+
+  --color-yellow-50: oklch(0.987 0.026 102.212);
+  --color-yellow-100: oklch(0.973 0.071 103.193);
+  --color-yellow-200: oklch(0.945 0.129 101.54);
+  --color-yellow-300: oklch(0.905 0.182 98.111);
+  --color-yellow-400: oklch(0.852 0.199 91.936);
+  --color-yellow-500: oklch(0.795 0.184 86.047);
+  --color-yellow-600: oklch(0.681 0.162 75.834);
+  --color-yellow-700: oklch(0.554 0.135 66.442);
+  --color-yellow-800: oklch(0.476 0.114 61.907);
+  --color-yellow-900: oklch(0.421 0.095 57.708);
+  --color-yellow-950: oklch(0.286 0.066 53.813);
+
+  --color-lime-50: oklch(0.986 0.031 120.757);
+  --color-lime-100: oklch(0.967 0.067 122.328);
+  --color-lime-200: oklch(0.938 0.127 124.321);
+  --color-lime-300: oklch(0.897 0.196 126.665);
+  --color-lime-400: oklch(0.841 0.238 128.85);
+  --color-lime-500: oklch(0.768 0.233 130.85);
+  --color-lime-600: oklch(0.648 0.2 131.684);
+  --color-lime-700: oklch(0.532 0.157 131.589);
+  --color-lime-800: oklch(0.453 0.124 130.933);
+  --color-lime-900: oklch(0.405 0.101 131.063);
+  --color-lime-950: oklch(0.274 0.072 132.109);
+
+  --color-green-50: oklch(0.982 0.018 155.826);
+  --color-green-100: oklch(0.962 0.044 156.743);
+  --color-green-200: oklch(0.925 0.084 155.995);
+  --color-green-300: oklch(0.871 0.15 154.449);
+  --color-green-400: oklch(0.792 0.209 151.711);
+  --color-green-500: oklch(0.723 0.219 149.579);
+  --color-green-600: oklch(0.627 0.194 149.214);
+  --color-green-700: oklch(0.527 0.154 150.069);
+  --color-green-800: oklch(0.448 0.119 151.328);
+  --color-green-900: oklch(0.393 0.095 152.535);
+  --color-green-950: oklch(0.266 0.065 152.934);
+
+  --color-emerald-50: oklch(0.979 0.021 166.113);
+  --color-emerald-100: oklch(0.95 0.052 163.051);
+  --color-emerald-200: oklch(0.905 0.093 164.15);
+  --color-emerald-300: oklch(0.845 0.143 164.978);
+  --color-emerald-400: oklch(0.765 0.177 163.223);
+  --color-emerald-500: oklch(0.696 0.17 162.48);
+  --color-emerald-600: oklch(0.596 0.145 163.225);
+  --color-emerald-700: oklch(0.508 0.118 165.612);
+  --color-emerald-800: oklch(0.432 0.095 166.913);
+  --color-emerald-900: oklch(0.378 0.077 168.94);
+  --color-emerald-950: oklch(0.262 0.051 172.552);
+
+  --color-teal-50: oklch(0.984 0.014 180.72);
+  --color-teal-100: oklch(0.953 0.051 180.801);
+  --color-teal-200: oklch(0.91 0.096 180.426);
+  --color-teal-300: oklch(0.855 0.138 181.071);
+  --color-teal-400: oklch(0.777 0.152 181.912);
+  --color-teal-500: oklch(0.704 0.14 182.503);
+  --color-teal-600: oklch(0.6 0.118 184.704);
+  --color-teal-700: oklch(0.511 0.096 186.391);
+  --color-teal-800: oklch(0.437 0.078 188.216);
+  --color-teal-900: oklch(0.386 0.063 188.416);
+  --color-teal-950: oklch(0.277 0.046 192.524);
+
+  --color-cyan-50: oklch(0.984 0.019 200.873);
+  --color-cyan-100: oklch(0.956 0.045 203.388);
+  --color-cyan-200: oklch(0.917 0.08 205.041);
+  --color-cyan-300: oklch(0.865 0.127 207.078);
+  --color-cyan-400: oklch(0.789 0.154 211.53);
+  --color-cyan-500: oklch(0.715 0.143 215.221);
+  --color-cyan-600: oklch(0.609 0.126 221.723);
+  --color-cyan-700: oklch(0.52 0.105 223.128);
+  --color-cyan-800: oklch(0.45 0.085 224.283);
+  --color-cyan-900: oklch(0.398 0.07 227.392);
+  --color-cyan-950: oklch(0.302 0.056 229.695);
+
+  --color-sky-50: oklch(0.977 0.013 236.62);
+  --color-sky-100: oklch(0.951 0.026 236.824);
+  --color-sky-200: oklch(0.901 0.058 230.902);
+  --color-sky-300: oklch(0.828 0.111 230.318);
+  --color-sky-400: oklch(0.746 0.16 232.661);
+  --color-sky-500: oklch(0.685 0.169 237.323);
+  --color-sky-600: oklch(0.588 0.158 241.966);
+  --color-sky-700: oklch(0.5 0.134 242.749);
+  --color-sky-800: oklch(0.443 0.11 240.79);
+  --color-sky-900: oklch(0.391 0.09 240.876);
+  --color-sky-950: oklch(0.293 0.066 243.157);
+
+  --color-blue-50: oklch(0.97 0.014 254.604);
+  --color-blue-100: oklch(0.932 0.032 255.585);
+  --color-blue-200: oklch(0.882 0.059 254.128);
+  --color-blue-300: oklch(0.809 0.105 251.813);
+  --color-blue-400: oklch(0.707 0.165 254.624);
+  --color-blue-500: oklch(0.623 0.214 259.815);
+  --color-blue-600: oklch(0.546 0.245 262.881);
+  --color-blue-700: oklch(0.488 0.243 264.376);
+  --color-blue-800: oklch(0.424 0.199 265.638);
+  --color-blue-900: oklch(0.379 0.146 265.522);
+  --color-blue-950: oklch(0.282 0.091 267.935);
+
+  --color-indigo-50: oklch(0.962 0.018 272.314);
+  --color-indigo-100: oklch(0.93 0.034 272.788);
+  --color-indigo-200: oklch(0.87 0.065 274.039);
+  --color-indigo-300: oklch(0.785 0.115 274.713);
+  --color-indigo-400: oklch(0.673 0.182 276.935);
+  --color-indigo-500: oklch(0.585 0.233 277.117);
+  --color-indigo-600: oklch(0.511 0.262 276.966);
+  --color-indigo-700: oklch(0.457 0.24 277.023);
+  --color-indigo-800: oklch(0.398 0.195 277.366);
+  --color-indigo-900: oklch(0.359 0.144 278.697);
+  --color-indigo-950: oklch(0.257 0.09 281.288);
+
+  --color-violet-50: oklch(0.969 0.016 293.756);
+  --color-violet-100: oklch(0.943 0.029 294.588);
+  --color-violet-200: oklch(0.894 0.057 293.283);
+  --color-violet-300: oklch(0.811 0.111 293.571);
+  --color-violet-400: oklch(0.702 0.183 293.541);
+  --color-violet-500: oklch(0.606 0.25 292.717);
+  --color-violet-600: oklch(0.541 0.281 293.009);
+  --color-violet-700: oklch(0.491 0.27 292.581);
+  --color-violet-800: oklch(0.432 0.232 292.759);
+  --color-violet-900: oklch(0.38 0.189 293.745);
+  --color-violet-950: oklch(0.283 0.141 291.089);
+
+  --color-purple-50: oklch(0.977 0.014 308.299);
+  --color-purple-100: oklch(0.946 0.033 307.174);
+  --color-purple-200: oklch(0.902 0.063 306.703);
+  --color-purple-300: oklch(0.827 0.119 306.383);
+  --color-purple-400: oklch(0.714 0.203 305.504);
+  --color-purple-500: oklch(0.627 0.265 303.9);
+  --color-purple-600: oklch(0.558 0.288 302.321);
+  --color-purple-700: oklch(0.496 0.265 301.924);
+  --color-purple-800: oklch(0.438 0.218 303.724);
+  --color-purple-900: oklch(0.381 0.176 304.987);
+  --color-purple-950: oklch(0.291 0.149 302.717);
+
+  --color-fuchsia-50: oklch(0.977 0.017 320.058);
+  --color-fuchsia-100: oklch(0.952 0.037 318.852);
+  --color-fuchsia-200: oklch(0.903 0.076 319.62);
+  --color-fuchsia-300: oklch(0.833 0.145 321.434);
+  --color-fuchsia-400: oklch(0.74 0.238 322.16);
+  --color-fuchsia-500: oklch(0.667 0.295 322.15);
+  --color-fuchsia-600: oklch(0.591 0.293 322.896);
+  --color-fuchsia-700: oklch(0.518 0.253 323.949);
+  --color-fuchsia-800: oklch(0.452 0.211 324.591);
+  --color-fuchsia-900: oklch(0.401 0.17 325.612);
+  --color-fuchsia-950: oklch(0.293 0.136 325.661);
+
+  --color-pink-50: oklch(0.971 0.014 343.198);
+  --color-pink-100: oklch(0.948 0.028 342.258);
+  --color-pink-200: oklch(0.899 0.061 343.231);
+  --color-pink-300: oklch(0.823 0.12 346.018);
+  --color-pink-400: oklch(0.718 0.202 349.761);
+  --color-pink-500: oklch(0.656 0.241 354.308);
+  --color-pink-600: oklch(0.592 0.249 0.584);
+  --color-pink-700: oklch(0.525 0.223 3.958);
+  --color-pink-800: oklch(0.459 0.187 3.815);
+  --color-pink-900: oklch(0.408 0.153 2.432);
+  --color-pink-950: oklch(0.284 0.109 3.907);
+
+  --color-rose-50: oklch(0.969 0.015 12.422);
+  --color-rose-100: oklch(0.941 0.03 12.58);
+  --color-rose-200: oklch(0.892 0.058 10.001);
+  --color-rose-300: oklch(0.81 0.117 11.638);
+  --color-rose-400: oklch(0.712 0.194 13.428);
+  --color-rose-500: oklch(0.645 0.246 16.439);
+  --color-rose-600: oklch(0.586 0.253 17.585);
+  --color-rose-700: oklch(0.514 0.222 16.935);
+  --color-rose-800: oklch(0.455 0.188 13.697);
+  --color-rose-900: oklch(0.41 0.159 10.272);
+  --color-rose-950: oklch(0.271 0.105 12.094);
 
   /* Animations */
   --animate-spin: spin 1s linear infinite;