From d76e2eef070924ba3831e4950fdf339dd5407a4d Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 1 Sep 2025 11:49:21 -0400
Subject: [PATCH 1/2] Parse oklch colors with units in all positions

---
 .../tests/colors/colors.test.js                   | 15 +++++++++++++++
 .../src/util/color.ts                             |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/tailwindcss-language-server/tests/colors/colors.test.js b/packages/tailwindcss-language-server/tests/colors/colors.test.js
index 4780a4fb..5ad7c183 100644
--- a/packages/tailwindcss-language-server/tests/colors/colors.test.js
+++ b/packages/tailwindcss-language-server/tests/colors/colors.test.js
@@ -246,6 +246,21 @@ withFixture('v4/basic', (c) => {
     ],
   })
 
+  testColors('oklch colors are parsed with percentages and angles', {
+    text: '<div class="bg-[oklch(62.75%_64.75%_30deg)]">',
+    expected: [
+      {
+        range: { start: { line: 0, character: 12 }, end: { line: 0, character: 43 } },
+        color: {
+          alpha: 1,
+          red: 1,
+          green: 0,
+          blue: 0,
+        },
+      },
+    ],
+  })
+
   testColors('gradient utilities show colors', {
     text: '<div class="from-black from-black/50 via-black via-black/50 to-black to-black/50">',
     expected: [
diff --git a/packages/tailwindcss-language-service/src/util/color.ts b/packages/tailwindcss-language-service/src/util/color.ts
index 1032a1dd..19fb9a42 100644
--- a/packages/tailwindcss-language-service/src/util/color.ts
+++ b/packages/tailwindcss-language-service/src/util/color.ts
@@ -50,7 +50,7 @@ function getKeywordColor(value: unknown): KeywordColor | null {
 
 // https://github.com/khalilgharbaoui/coloregex
 const colorRegex = new RegExp(
-  `(?:^|\\s|\\(|,)(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgba?|hsla?|(?:ok)?(?:lab|lch))\\(\\s*(-?[\\d.]+(%|deg|rad|grad|turn)?(\\s*[,/]\\s*|\\s+)+){2,3}\\s*([\\d.]+%?|var\\([^)]+\\))?\\)|transparent|currentColor|${Object.keys(
+  `(?:^|\\s|\\(|,)(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgba?|hsla?|(?:ok)?(?:lab|lch))\\(\\s*(-?[\\d.]+(%|deg|rad|grad|turn)?(\\s*[,/]\\s*|\\s+)+){2,3}\\s*([\\d.]+(%|deg|rad|grad|turn)?|var\\([^)]+\\))?\\)|transparent|currentColor|${Object.keys(
     namedColors,
   ).join('|')})(?:$|\\s|\\)|,)`,
   'gi',

From b4d4cf8513d5300e87e0d94c011871399390bf15 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 1 Sep 2025 11:50:19 -0400
Subject: [PATCH 2/2] Update changelog

---
 packages/vscode-tailwindcss/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md
index f310e488..537c948f 100644
--- a/packages/vscode-tailwindcss/CHANGELOG.md
+++ b/packages/vscode-tailwindcss/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - Publish our fork of the CSS language server ([#1437](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1437))
 - Suggest default variant values when they also support arbitrary values ([#1439](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1439))
+- Show color swatches for OKLCH colors with units in all positions ([#1442](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1442))
 
 ## 0.14.26