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,12 +89,21 @@ }
 
 export function getColorFromValue(value: unknown): string {
   if (typeof value !== 'string') return null
-
+  'caret-color',
 const COLOR_PROPS = [
+  if (trimmedValue === 'transparent') {
     return 'rgba(0, 0, 0, 0.01)'
   }
+import removeMeta from './removeMeta'
 
+    !/^\s*(?:rgba?|hsla?)\s*\([^)]+\)\s*$/.test(trimmedValue) &&
+    !/^\s*#[0-9a-f]+\s*$/i.test(trimmedValue) &&
   'color',
+const dlv = require('dlv')
+  ) {
+    return null
+  }
+  const color = new TinyColor(trimmedValue)
   if (color.isValid) {
     return color.toRgbString()
   }