diff --git a/src/vs/editor/contrib/colorPicker/colorContributions.ts b/src/vs/editor/contrib/colorPicker/colorContributions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..31f1fb9ea9b0a137e7ef76628de826d3ab582e9d
--- /dev/null
+++ b/src/vs/editor/contrib/colorPicker/colorContributions.ts
@@ -0,0 +1,59 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+// import color detector contribution
+import 'vs/editor/contrib/colorPicker/colorDetector';
+
+import { Disposable } from 'vs/base/common/lifecycle';
+import { ICodeEditor, IEditorMouseEvent, MouseTargetType } from 'vs/editor/browser/editorBrowser';
+import { registerEditorContribution } from 'vs/editor/browser/editorExtensions';
+import { IEditorContribution } from 'vs/editor/common/editorCommon';
+import { ModesHoverController } from 'vs/editor/contrib/hover/hover';
+import { Range } from 'vs/editor/common/core/range';
+import { HoverStartMode } from 'vs/editor/contrib/hover/hoverOperation';
+
+export class ColorContribution extends Disposable implements IEditorContribution {
+
+	public static readonly ID: string = 'editor.contrib.colorContribution';
+
+	static readonly RECOMPUTE_TIME = 1000; // ms
+
+	constructor(private readonly _editor: ICodeEditor,
+	) {
+		super();
+		this._register(_editor.onMouseDown((e) => this.onMouseDown(e)));
+	}
+
+	dispose(): void {
+		super.dispose();
+	}
+
+	private onMouseDown(mouseEvent: IEditorMouseEvent) {
+		const targetType = mouseEvent.target.type;
+
+		if (targetType !== MouseTargetType.CONTENT_TEXT) {
+			return;
+		}
+
+		console.log(mouseEvent.target);
+
+		const hoverOnColorDecorator = [...mouseEvent.target.element?.classList.values() || []].find(className => className.startsWith('ced-colorBox'));
+		if (!hoverOnColorDecorator) {
+			return;
+		}
+
+		if (!mouseEvent.target.range) {
+			return;
+		}
+
+		const hoverController = this._editor.getContribution<ModesHoverController>(ModesHoverController.ID);
+		if (!hoverController.contentWidget.isColorPickerVisible()) {
+			const range = new Range(mouseEvent.target.range.startLineNumber, mouseEvent.target.range.startColumn + 1, mouseEvent.target.range.endLineNumber, mouseEvent.target.range.endColumn + 1);
+			hoverController.showContentHover(range, HoverStartMode.Delayed, false);
+		}
+	}
+}
+
+registerEditorContribution(ColorContribution.ID, ColorContribution);
diff --git a/src/vs/editor/contrib/colorPicker/colorDetector.ts b/src/vs/editor/contrib/colorPicker/colorDetector.ts
index 4b678d0edda7b6beeda155f65056f9f2258254db..ccd09304a0e3ffe5d6b7de1fe842fd5d906092e6 100644
--- a/src/vs/editor/contrib/colorPicker/colorDetector.ts
+++ b/src/vs/editor/contrib/colorPicker/colorDetector.ts
@@ -46,13 +46,13 @@ export class ColorDetector extends Disposable implements IEditorContribution {
 		@IConfigurationService private readonly _configurationService: IConfigurationService
 	) {
 		super();
-		this._register(_editor.onDidChangeModel((e) => {
+		this._register(_editor.onDidChangeModel(() => {
 			this._isEnabled = this.isEnabled();
 			this.onModelChanged();
 		}));
-		this._register(_editor.onDidChangeModelLanguage((e) => this.onModelChanged()));
-		this._register(ColorProviderRegistry.onDidChange((e) => this.onModelChanged()));
-		this._register(_editor.onDidChangeConfiguration((e) => {
+		this._register(_editor.onDidChangeModelLanguage(() => this.onModelChanged()));
+		this._register(ColorProviderRegistry.onDidChange(() => this.onModelChanged()));
+		this._register(_editor.onDidChangeConfiguration(() => {
 			let prevIsEnabled = this._isEnabled;
 			this._isEnabled = this.isEnabled();
 			if (prevIsEnabled !== this._isEnabled) {
@@ -110,7 +110,7 @@ export class ColorDetector extends Disposable implements IEditorContribution {
 			return;
 		}
 
-		this._localToDispose.add(this._editor.onDidChangeModelContent((e) => {
+		this._localToDispose.add(this._editor.onDidChangeModelContent(() => {
 			if (!this._timeoutTimer) {
 				this._timeoutTimer = new TimeoutTimer();
 				this._timeoutTimer.cancelAndSet(() => {
diff --git a/src/vs/editor/editor.all.ts b/src/vs/editor/editor.all.ts
index a591facd8b7fa4a34a52d270929224198b356b6a..28d1c9b6af0131375aae76b032f6016a623469c5 100644
--- a/src/vs/editor/editor.all.ts
+++ b/src/vs/editor/editor.all.ts
@@ -14,7 +14,7 @@ import 'vs/editor/contrib/caretOperations/transpose';
 import 'vs/editor/contrib/clipboard/clipboard';
 import 'vs/editor/contrib/codeAction/codeActionContributions';
 import 'vs/editor/contrib/codelens/codelensController';
-import 'vs/editor/contrib/colorPicker/colorDetector';
+import 'vs/editor/contrib/colorPicker/colorContributions';
 import 'vs/editor/contrib/comment/comment';
 import 'vs/editor/contrib/contextmenu/contextmenu';
 import 'vs/editor/contrib/cursorUndo/cursorUndo';