diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
index 54f39076f9ee0da598c03d4a503699dcf66520ee..8a57f214d760b7217c00a72cf10329e3bdfef2ac 100644
--- a/packages/tailwindcss-language-server/src/providers/completionProvider.ts
+++ b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
@@ -83,7 +83,7 @@         } else {
           const color = getColor(state, [className])
           if (color) {
             kind = CompletionItemKind.Color
-            documentation = color.documentation
+            documentation = color
           }
         }
 
diff --git a/packages/tailwindcss-language-server/src/util/color.ts b/packages/tailwindcss-language-server/src/util/color.ts
index c1378e8bdc32ff8166dd58912cb57d2fe710b68e..bb44bba0b14ca9d8ed3c17e67d8f16186164a834 100644
--- a/packages/tailwindcss-language-server/src/util/color.ts
+++ b/packages/tailwindcss-language-server/src/util/color.ts
@@ -172,35 +172,14 @@   yellow: '#ff0',
   yellowgreen: '#9acd32',
 }
 
-export function getColor(
-  state: State,
-  keys: string[]
-): { documentation?: string } {
+export function getColor(state: State, keys: string[]): string {
   const item = dlv(state.classNames.classNames, keys)
   if (!item.__rule) return null
   const props = Object.keys(removeMeta(item))
-  const nonCustomProps = props.filter((prop) => !prop.startsWith('--'))
-  if (nonCustomProps.length !== 1) return null
-  const prop = nonCustomProps[0]
+  if (props.length === 0 || props.length > 1) return null
+  const prop = props[0]
   if (COLOR_PROPS.indexOf(prop) === -1) return null
-
-  const namedColor = COLOR_NAMES[item[prop].toLowerCase()]
-  if (namedColor) {
-    return { documentation: namedColor }
-  }
-
-  // matches: rgba(<r>, <g>, <b>, var(--bg-opacity))
-  // TODO: support other formats? e.g. hsla, css level 4
-  const match = item[prop].match(
-    /^\s*rgba\(\s*(?<r>[0-9]{1,3})\s*,\s*(?<g>[0-9]{1,3})\s*,\s*(?<b>[0-9]{1,3})\s*,\s*var/
-  )
-  if (match) {
-    return {
-      documentation: `rgb(${match.groups.r}, ${match.groups.g}, ${match.groups.b})`,
-    }
-  }
-
-  return {}
+  return COLOR_NAMES[item[prop].toLowerCase()] || item[prop]
 }
 
 export function isColor(str: any): boolean {