diff --git a/src/lsp/providers/completionProvider.ts b/src/lsp/providers/completionProvider.ts
index 4dc374518e5e6b8e9830031c19a26afb1cbb5cb6..d7cbbef0d734dfb224fbe93edcff2f7b23a8f921 100644
--- a/src/lsp/providers/completionProvider.ts
+++ b/src/lsp/providers/completionProvider.ts
@@ -9,7 +9,7 @@   CompletionList,
 } from 'vscode-languageserver'
 const dlv = require('dlv')
 import removeMeta from '../util/removeMeta'
-import { getColor, getColorFromString } from '../util/color'
+import { getColor, getColorFromValue } from '../util/color'
 import { isHtmlContext } from '../util/html'
 import { isCssContext } from '../util/css'
 import { findLast, findJsxStrings, arrFindLast } from '../util/find'
@@ -269,7 +269,7 @@
   return {
     isIncomplete: false,
     items: Object.keys(obj).map((item, index) => {
-      let color = getColorFromString(obj[item])
+      let color = getColorFromValue(obj[item])
       const replaceDot: boolean =
         item.indexOf('.') !== -1 && separator && separator.endsWith('.')
       const insertClosingBrace: boolean =

diff --git a/src/lsp/util/color.ts b/src/lsp/util/color.ts
index 498415659e5d7b7c77b524a54715d0bfb75cfaad..95d54170555430e9334be51c46aee88876164365 100644
--- a/src/lsp/util/color.ts
+++ b/src/lsp/util/color.ts
@@ -61,11 +61,12 @@
   return { documentation: colorStrings[0] }
 }
 
-export function getColorFromString(str: string): string {
-  if (str === 'transparent') {
+export function getColorFromValue(value: unknown): string {
+  if (typeof value !== 'string') return null
+  if (value === 'transparent') {
     return 'rgba(0, 0, 0, 0.01)'
   }
-  const color = new TinyColor(str)
+  const color = new TinyColor(value)
   if (color.isValid) {
     return color.toRgbString()
   }