diff --git a/extensions/css/client/src/cssMain.ts b/extensions/css/client/src/cssMain.ts
index 54c2ddecd00..9ebf5b0acec 100644
--- a/extensions/css/client/src/cssMain.ts
+++ b/extensions/css/client/src/cssMain.ts
@@ -5,6 +5,7 @@
 'use strict';
 
 import * as path from 'path';
+import * as parse from 'parse-color';
 
 import { languages, window, commands, workspace, ExtensionContext, DocumentColorProvider, Color, CancellationToken, TextDocument, ColorInfo } from 'vscode';
 import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, RequestType, Range, TextEdit } from 'vscode-languageclient';
@@ -24,14 +25,23 @@ class ColorProvider implements DocumentColorProvider {
 	async provideDocumentColors(document: TextDocument, token: CancellationToken): Promise<ColorInfo[]> {
 		const ranges = await this.client.sendRequest(ColorSymbolRequest.type, document.uri.toString());
 
-		return ranges.map(r => {
+		return ranges.reduce((result, r) => {
 			const range = this.client.protocol2CodeConverter.asRange(r);
-			const color = Color.fromHex('#000000');
+			const value = document.getText(range);
+			const parsedColor = parse(value);
+
+			if (!parsedColor || !parsedColor.rgba) {
+				return result;
+			}
+
+			const [red, green, blue, alpha] = parsedColor.rgba;
+			const color = new Color(red, green, blue, alpha);
 			const format = '#{red:X}{green:X}{blue:X}';
 			const availableFormats = [format];
 
-			return new ColorInfo(range, color, format, availableFormats);
-		});
+			result.push(new ColorInfo(range, color, format, availableFormats));
+			return result;
+		}, []);
 	}
 }
 
diff --git a/extensions/css/client/src/typings/parse-color.d.ts b/extensions/css/client/src/typings/parse-color.d.ts
new file mode 100644
index 00000000000..627b1637b0a
--- /dev/null
+++ b/extensions/css/client/src/typings/parse-color.d.ts
@@ -0,0 +1,21 @@
+declare module "parse-color" {
+
+	interface Color {
+		rgb: [number, number, number],
+		hsl: [number, number, number],
+		hsv: [number, number, number],
+		cmyk: [number, number, number, number],
+		keyword: string,
+		hex: string,
+		rgba: [number, number, number, number],
+		hsla: [number, number, number, number],
+		hsva: [number, number, number, number],
+		cmyka: [number, number, number, number, number]
+	}
+
+	function parse(value: string): Color;
+
+	module parse { }
+
+	export = parse;
+}
\ No newline at end of file
diff --git a/extensions/css/npm-shrinkwrap.json b/extensions/css/npm-shrinkwrap.json
index eece4499ec9..89c99f09cf0 100644
--- a/extensions/css/npm-shrinkwrap.json
+++ b/extensions/css/npm-shrinkwrap.json
@@ -2,6 +2,16 @@
   "name": "css",
   "version": "0.1.0",
   "dependencies": {
+    "color-convert": {
+      "version": "0.5.3",
+      "from": "color-convert@>=0.5.0 <0.6.0",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz"
+    },
+    "parse-color": {
+      "version": "1.0.0",
+      "from": "parse-color@latest",
+      "resolved": "https://registry.npmjs.org/parse-color/-/parse-color-1.0.0.tgz"
+    },
     "vscode-jsonrpc": {
       "version": "3.2.0",
       "from": "vscode-jsonrpc@>=3.2.0 <4.0.0",
diff --git a/extensions/css/package.json b/extensions/css/package.json
index f20f6cf319f..ff0bf9ac994 100644
--- a/extensions/css/package.json
+++ b/extensions/css/package.json
@@ -673,6 +673,7 @@
     }
   },
   "dependencies": {
+    "parse-color": "^1.0.0",
     "vscode-languageclient": "^3.2.0",
     "vscode-nls": "^2.0.2"
   },