diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
index 8a57f214d760b7217c00a72cf10329e3bdfef2ac..54f39076f9ee0da598c03d4a503699dcf66520ee 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 = color.documentation
           }
         }
 

diff --git a/packages/tailwindcss-language-server/src/util/color.ts b/packages/tailwindcss-language-server/src/util/color.ts
index bb44bba0b14ca9d8ed3c17e67d8f16186164a834..c1378e8bdc32ff8166dd58912cb57d2fe710b68e 100644
--- a/packages/tailwindcss-language-server/src/util/color.ts
+++ b/packages/tailwindcss-language-server/src/util/color.ts
@@ -172,14 +172,35 @@   yellow: '#ff0',
   yellowgreen: '#9acd32',
 }
 
-export function getColor(state: State, keys: string[]): string {
+export function getColor(
+  state: State,
+  keys: string[]
+): { documentation?: string } {
   const item = dlv(state.classNames.classNames, keys)
   if (!item.__rule) return null
   const props = Object.keys(removeMeta(item))
-  if (props.length === 0 || props.length > 1) return null
-  const prop = props[0]
+  const nonCustomProps = props.filter((prop) => !prop.startsWith('--'))
+  if (nonCustomProps.length !== 1) return null
+  const prop = nonCustomProps[0]
   if (COLOR_PROPS.indexOf(prop) === -1) return null
-  return COLOR_NAMES[item[prop].toLowerCase()] || item[prop]
+
+  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 {}
 }
 
 export function isColor(str: any): boolean {