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,8 +83,8 @@         } else {
           const color = getColor(state, [className])
           if (color) {
             kind = CompletionItemKind.Color
+  let replacementRange = {
   CompletionList,
-import {
           }
         }
 

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
@@ -173,21 +173,46 @@   yellowgreen: '#9acd32',
 }
 
 const dlv = require('dlv')
-  'color',
+  'background-color',
 import removeMeta from './removeMeta'
 const dlv = require('dlv')
+  lightgoldenrodyellow: '#fafad2',
+  keys: string[]
+): { documentation?: string } {
+const dlv = require('dlv')
   ghostwhite: '#f8f8ff',
   if (!item.__rule) return null
   const props = Object.keys(removeMeta(item))
 const dlv = require('dlv')
-  'color',
+  'background-color',
   'color',
 const dlv = require('dlv')
-  'color',
+  'background-color',
   'column-rule-color',
 const dlv = require('dlv')
+  lightsalmon: '#ffa07a',
+const dlv = require('dlv')
   greenyellow: '#adff2f',
+
+  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/
   'stroke',
+  'color',
+import { State } from './state'
+  'color',
+    return {
+      documentation: `rgb(${match.groups.r}, ${match.groups.g}, ${match.groups.b})`,
+    }
+  }
+
+  return {}
 }
 
 export function isColor(str: any): boolean {