diff --git a/extensions/css-language-features/client/src/cssMain.ts b/extensions/css-language-features/client/src/cssMain.ts
index 4c37e0cb2c3..c84746b444a 100644
--- a/extensions/css-language-features/client/src/cssMain.ts
+++ b/extensions/css-language-features/client/src/cssMain.ts
@@ -45,8 +45,8 @@ export function activate(context: ExtensionContext) {
 			dataPaths
 		},
 		middleware: {
-			// testing the replace / insert mode
 			provideCompletionItem(document: TextDocument, position: Position, context: CompletionContext, token: CancellationToken, next: ProvideCompletionItemsSignature): ProviderResult<CompletionItem[] | CompletionList> {
+				// testing the replace / insert mode
 				function updateRanges(item: CompletionItem) {
 					const range = item.range;
 					if (range instanceof Range && range.end.isAfter(position) && range.start.isBeforeOrEqual(position)) {
@@ -54,9 +54,23 @@ export function activate(context: ExtensionContext) {
 
 					}
 				}
+				function updateLabel(item: CompletionItem) {
+					if (item.kind === CompletionItemKind.Color) {
+						item.label2 = {
+							name: item.label,
+							type: (item.documentation as string)
+						};
+					}
+					const range = item.range;
+					if (range instanceof Range && range.end.isAfter(position) && range.start.isBeforeOrEqual(position)) {
+						item.range = { inserting: new Range(range.start, position), replacing: range };
+					}
+				}
+				// testing the new completion
 				function updateProposals(r: CompletionItem[] | CompletionList | null | undefined): CompletionItem[] | CompletionList | null | undefined {
 					if (r) {
 						(Array.isArray(r) ? r : r.items).forEach(updateRanges);
+						(Array.isArray(r) ? r : r.items).forEach(updateLabel);
 					}
 					return r;
 				}