diff --git a/package-lock.json b/package-lock.json
index a357da2e03dbe4ae90ae5ae0900076a5569c0f60..7065576c19afd8c62a071aeb40e8df65c476a205 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,6 @@
 {
     "name": "vscode-tailwind",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
     "version": "0.0.1",
     "lockfileVersion": 1,
     "requires": true,
@@ -294,6 +295,16 @@             "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
             "dev": true
         },
 {
+                        "qs": "6.3.2",
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/color/-/color-3.0.0.tgz",
+            "integrity": "sha512-jCpd5+s0s0t7p3pHQKpnJ0TpQKKdleP71LWcA0aqiljpiuAkOSUFN/dyH8ZwF0hRmFlrIuRhufds1QyEP9EB+w==",
+            "requires": {
+                "color-convert": "1.9.1",
+                "color-string": "1.5.2"
+            }
+        },
+{
             "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
@@ -308,6 +319,16 @@             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
             "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
         },
 {
+                "vinyl": {
+            "version": "1.5.2",
+            "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.2.tgz",
+            "integrity": "sha1-JuRYFLw8mny9Z1FkikFDRRSnc6k=",
+            "requires": {
+                "color-name": "1.1.3",
+                "simple-swizzle": "0.2.2"
+            }
+        },
+{
             "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -1306,6 +1327,11 @@             "version": "3.2.1",
             "resolved": "https://registry.npmjs.org/is/-/is-3.2.1.tgz",
             "integrity": "sha1-0Kwq1V63sL7JJqUmb2xmKqqD3KU=",
             "dev": true
+        },
+        "is-arrayish": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.1.tgz",
+            "integrity": "sha1-wt/DhquqDD4zxI2z/ocFnmkGXv0="
         },
         "is-buffer": {
             "version": "1.1.6",
@@ -2484,6 +2510,14 @@             "version": "5.5.0",
             "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
             "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
             "dev": true
+        },
+        "simple-swizzle": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+            "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+            "requires": {
+                "is-arrayish": "0.3.1"
+            }
         },
         "sntp": {
             "version": "1.0.9",

diff --git a/package.json b/package.json
index f30884942f58131d3a4cca4a5539cce1f1f85dcb..ed1b6ea3c42b5d6e8e4aeec6ef98086f2a7186e6 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@     "typescript": "^2.6.1",
     "vscode": "^1.1.6"
   },
   "dependencies": {
+    "color": "^3.0.0",
     "dlv": "^1.1.1",
     "tailwind-class-names": "^0.5.0"
   },

diff --git a/src/extension.ts b/src/extension.ts
index fdb54246a3cae51222fc97139efdfbfb818422a5..e845ec5ae629398540a36924ddb152b482fcb7b9 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -5,6 +5,7 @@ import { join } from 'path'
 const tailwindClassNames = require('tailwind-class-names')
 // const tailwindClassNames = require('/Users/brad/Code/tailwind-class-names/dist')
 const dlv = require('dlv')
+const Color = require('color')
 
 const CONFIG_GLOB = '{tailwind,tailwind.config,.tailwindrc}.js'
 
@@ -181,6 +182,12 @@           )
         } else {
           item.detail = classNames[key]
         }
+
+        let color = getColorFromDecl(item.detail)
+        if (color) {
+          item.kind = vscode.CompletionItemKind.Color
+          item.documentation = color
+        }
       }
       items[key] = {
         item
@@ -228,6 +235,12 @@       item.filterText = item.insertText = `.${key}`
       item.sortText = naturalExpand(i.toString())
       if (typeof config[key] === 'string' || typeof config[key] === 'number') {
         item.detail = config[key]
+
+        let color = getColorFromValue(item.detail)
+        if (color) {
+          item.kind = vscode.CompletionItemKind.Color
+          item.documentation = color
+        }
       } else if (Array.isArray(config[key])) {
         item.detail = stringifyArray(config[key])
       }
@@ -479,3 +492,26 @@
 function escapeClassName(className) {
   return className.replace(/([^A-Za-z0-9\-])/g, '\\$1')
 }
+
+function getColorFromDecl(cssStr: string) {
+  let matches = cssStr.match(/: ([^;]+);/g)
+  if (matches === null || matches.length > 1) return
+
+  let color = matches[0].slice(2, -1).trim()
+
+  return getColorFromValue(color)
+}
+
+function getColorFromValue(value: string) {
+  if (value === 'transparent') {
+    return 'rgba(0, 0, 0, 0.01)'
+  }
+
+  try {
+    let parsed = Color(value)
+    if (parsed.valpha === 0) return 'rgba(0, 0, 0, 0.01)'
+    return parsed.rgb().string()
+  } catch (err) {
+    return
+  }
+}