1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

diff --git a/packages/tailwindcss-language-service/src/util/color.ts b/packages/tailwindcss-language-service/src/util/color.ts
index d6ddc2e17a8d2ef6422ba6f6a75df5b58fe79dbd..25f1df67d9da1a52856c0e85fac81bd68a935615 100644
--- a/packages/tailwindcss-language-service/src/util/color.ts
+++ b/packages/tailwindcss-language-service/src/util/color.ts
@@ -1,7 +1,7 @@
 const dlv = require('dlv')
 import { State } from './state'
 import removeMeta from './removeMeta'
-import { TinyColor } from '@ctrl/tinycolor'
+import { TinyColor, names as colorNames } from '@ctrl/tinycolor'
 import { ensureArray, dedupe, flatten } from './array'
 
 const COLOR_PROPS = [
@@ -89,10 +89,18 @@ }
 
 export function getColorFromValue(value: unknown): string {
   if (typeof value !== 'string') return null
-  if (value === 'transparent') {
+  const trimmedValue = value.trim()
+  if (trimmedValue === 'transparent') {
     return 'rgba(0, 0, 0, 0.01)'
   }
-  const color = new TinyColor(value)
+  if (
+    !/^\s*(?:rgba?|hsla?)\s*\([^)]+\)\s*$/.test(trimmedValue) &&
+    !/^\s*#[0-9a-f]+\s*$/i.test(trimmedValue) &&
+    !Object.keys(colorNames).includes(trimmedValue)
+  ) {
+    return null
+  }
+  const color = new TinyColor(trimmedValue)
   if (color.isValid) {
     return color.toRgbString()
   }