diff --git a/extensions/json/client/src/colorDecorators.ts b/extensions/json/client/src/colorDecorators.ts
index a01024f9c14..6ea4639e6a7 100644
--- a/extensions/json/client/src/colorDecorators.ts
+++ b/extensions/json/client/src/colorDecorators.ts
@@ -108,9 +108,7 @@ export function activateColorDecorations(decoratorProvider: (uri: string) => The
 					let decorations = [];
 					for (let i = 0; i < ranges.length && decorations.length < MAX_DECORATORS; i++) {
 						let range = ranges[i];
-						let text = document.getText(range);
-						let value = <string>JSON.parse(text);
-						let c = Color.fromHex(value);
+						let c = parseColorFromRange(document, range);
 						if (c) {
 							decorations.push(<DecorationOptions>{
 								range: range,
@@ -144,9 +142,7 @@ export class ColorProvider implements DocumentColorProvider {
 		const ranges = await this.decoratorProvider(document.uri.toString());
 		const result = [];
 		for (let range of ranges) {
-			let text = document.getText(range);
-			let value = <string>JSON.parse(text);
-			let color = Color.fromHex(value);
+			let color = parseColorFromRange(document, range);
 			if (color) {
 				let r = new Range(range.start.line, range.start.character + 1, range.end.line, range.end.character - 1);
 				result.push(new ColorRange(r, color, [ColorFormat_HEX]));
@@ -155,3 +151,16 @@ export class ColorProvider implements DocumentColorProvider {
 		return result;
 	}
 }
+
+function parseColorFromRange(document: TextDocument, range: Range) {
+	let text = document.getText(range);
+	try {
+		let value = <string>JSON.parse(text);
+		if (typeof value === 'string') {
+			return Color.fromHex(value);
+		}
+	} catch (e) {
+		// ignore JSON parse error
+	}
+	return null;
+}