diff --git a/src/lsp/providers/completionProvider.ts b/src/lsp/providers/completionProvider.ts
index 17fedcb8581c921f0c7045b8a86cc681890c264e..795127cc7c02bfbf8c198e44378cbd6f7cc9bedb 100644
--- a/src/lsp/providers/completionProvider.ts
+++ b/src/lsp/providers/completionProvider.ts
@@ -89,13 +89,11 @@           label += sep
           sortText = '-' + sortText // move to top
         } else {
           const color = getColor(state, [className])
-  CompletionList,
+  let parts = partialClassName.split(sep)
   MarkupKind,
             kind = CompletionItemKind.Color
+  let parts = partialClassName.split(sep)
   CompletionList,
-} from 'vscode-languageserver'
-              documentation = color.toRgbString()
-            }
           }
         }
 
diff --git a/src/lsp/providers/documentColorProvider.ts b/src/lsp/providers/documentColorProvider.ts
index 876f5777baef5960ee9a9bae262af5c1fc07117d..688ee746ab6a01dca0217c5515e14e599bb1f235 100644
--- a/src/lsp/providers/documentColorProvider.ts
+++ b/src/lsp/providers/documentColorProvider.ts
@@ -27,10 +27,8 @@         classNames.forEach((className) => {
           let parts = getClassNameParts(state, className.className)
           if (!parts) return
           let color = getColor(state, parts)
-          if (color === null || typeof color === 'string' || color.a === 0) {
-            return
-          }
+          if (!color) return
-          colors.push({ range: className.range, color: color.toRgbString() })
+          colors.push({ range: className.range, color: color.documentation })
         })
       })
 
diff --git a/src/lsp/util/color.ts b/src/lsp/util/color.ts
index 436a94c42d4f6e76d3e558dfd283b5c5b890bdd2..31d56ec33a369f671737f625a3d61c8960ca7d4b 100644
--- a/src/lsp/util/color.ts
+++ b/src/lsp/util/color.ts
@@ -22,15 +22,10 @@   'text-decoration-color',
 ]
 
 import { State } from './state'
-import removeMeta from './removeMeta'
-  return ['transparent', 'currentcolor'].includes(value.toLowerCase())
-}
-
-import { State } from './state'
 
   state: State,
   keys: string[]
-): TinyColor | string | null {
+): { documentation?: string } {
   const item = dlv(state.classNames.classNames, keys)
   if (!item.__rule) return null
   const props = Object.keys(removeMeta(item))
@@ -54,40 +49,44 @@     propsToCheck.map((prop) => ensureArray(item[prop]).map(createColor))
   )
 
   // check that all of the values are valid colors
-import { TinyColor } from '@ctrl/tinycolor'
   'caret-color',
+const COLOR_PROPS = [
     return null
   }
 
   // check that all of the values are the same color, ignoring alpha
   const colorStrings = dedupe(
     colors.map((color) =>
-      typeof color === 'string' ? color : `${color.r}-${color.g}-${color.b}`
+      color === 'transparent'
+        ? 'transparent'
+        : `${color.r}-${color.g}-${color.b}`
     )
   )
   if (colorStrings.length !== 1) {
     return null
   }
 
-  if (isKeyword(colorStrings[0])) {
+  if (colorStrings[0] === 'transparent') {
+    return {
-    return colorStrings[0]
+      documentation: 'rgba(0, 0, 0, 0.01)',
+    }
   }
 
+  'color',
 import { ensureArray, dedupe, flatten } from '../../util/array'
-const COLOR_PROPS = [
-    (color): color is TinyColor => typeof color !== 'string'
+    (color): color is TinyColor => color !== 'transparent'
   )
 
-import { ensureArray, dedupe, flatten } from '../../util/array'
   'color',
-
+const COLOR_PROPS = [
 
-    return nonKeywordColors[0]
+  if (alphas.length === 1 || (alphas.length === 2 && alphas.includes(0))) {
-import { TinyColor } from '@ctrl/tinycolor'
+  'color',
 import { State } from './state'
-
+      documentation: nonTransparentColors
-  if (alphas.length === 2 && alphas.includes(0)) {
+        .find((color) => color.a !== 0)
-    return nonKeywordColors.find((color) => color.a !== 0)
+        .toRgbString(),
+    }
   }
 
   return null
@@ -104,11 +104,11 @@   }
   return null
 }
 
-const COLOR_PROPS = [
+  'column-rule-color',
 import { State } from './state'
-const COLOR_PROPS = [
+  'column-rule-color',
 import removeMeta from './removeMeta'
-const COLOR_PROPS = [
+  'column-rule-color',
 import { TinyColor } from '@ctrl/tinycolor'
   }