diff --git a/src/vs/editor/common/config/editorOptions.ts b/src/vs/editor/common/config/editorOptions.ts
index 6c5556f7dd0..b296c6deeef 100644
--- a/src/vs/editor/common/config/editorOptions.ts
+++ b/src/vs/editor/common/config/editorOptions.ts
@@ -352,7 +352,7 @@ export interface IEditorOptions {
 	/**
 	 * Controls what is the condition to spawn a color picker from a color dectorator
 	 */
-	colorDecoratorsActivatedOn?: 'click' | 'hover';
+	colorDecoratorsActivatedOn?: 'click and hover' | 'click' | 'hover';
 	/**
 	 * Controls the max number of color decorators that can be rendered in an editor at once.
 	 */
@@ -5216,8 +5216,9 @@ export const EditorOptions = {
 		EditorOption.colorDecorators, 'colorDecorators', true,
 		{ description: nls.localize('colorDecorators', "Controls whether the editor should render the inline color decorators and color picker.") }
 	)),
-	colorDecoratorActivatedOn: register(new EditorStringEnumOption(EditorOption.colorDecoratorsActivatedOn, 'colorDecoratorsActivatedOn', 'hover' as 'hover' | 'click', ['hover', 'click'] as const, {
+	colorDecoratorActivatedOn: register(new EditorStringEnumOption(EditorOption.colorDecoratorsActivatedOn, 'colorDecoratorsActivatedOn', 'click and hover' as 'click and hover' | 'hover' | 'click', ['click and hover', 'hover', 'click'] as const, {
 		enumDescriptions: [
+			nls.localize('editor.colorDecoratorActivatedOn.clickAndHover', "Make the color picker appear both on click and hover of the color decorator"),
 			nls.localize('editor.colorDecoratorActivatedOn.hover', "Make the color picker appear on hover of the color decorator"),
 			nls.localize('editor.colorDecoratorActivatedOn.click', "Make the color picker appear on click of the color decorator")
 		],
diff --git a/src/vs/editor/contrib/colorPicker/browser/colorContributions.ts b/src/vs/editor/contrib/colorPicker/browser/colorContributions.ts
index ac64164888d..189aa0cead1 100644
--- a/src/vs/editor/contrib/colorPicker/browser/colorContributions.ts
+++ b/src/vs/editor/contrib/colorPicker/browser/colorContributions.ts
@@ -34,7 +34,7 @@ export class ColorContribution extends Disposable implements IEditorContribution
 	private onMouseDown(mouseEvent: IEditorMouseEvent) {
 
 		const colorDecoratorsActivatedOn = this._editor.getOption(EditorOption.colorDecoratorsActivatedOn);
-		if (colorDecoratorsActivatedOn !== 'click') {
+		if (colorDecoratorsActivatedOn !== 'click' && colorDecoratorsActivatedOn !== 'click and hover') {
 			return;
 		}
 
diff --git a/src/vs/editor/contrib/hover/browser/hover.ts b/src/vs/editor/contrib/hover/browser/hover.ts
index 50785ea5ae9..90c541b86cf 100644
--- a/src/vs/editor/contrib/hover/browser/hover.ts
+++ b/src/vs/editor/contrib/hover/browser/hover.ts
@@ -179,6 +179,11 @@ export class ModesHoverController implements IEditorContribution {
 		const onDecorator = target.element?.classList.contains('colorpicker-color-decoration');
 		const decoratorActivatedOn = this._editor.getOption(EditorOption.colorDecoratorsActivatedOn);
 
+		console.log('onDecorator : ', onDecorator);
+		console.log('decoratorActivatedOn : ', decoratorActivatedOn);
+
+		// TODO: finish the following code whith the option 'click and hover''
+		// TODO: find out why the color hover seems to disappear when clicking on th box
 		if (onDecorator) {
 			if (decoratorActivatedOn === 'click') {
 				if (!this._activatedByColorDecoratorClick) {
diff --git a/src/vs/monaco.d.ts b/src/vs/monaco.d.ts
index 59da84b16f6..a2258a1852e 100644
--- a/src/vs/monaco.d.ts
+++ b/src/vs/monaco.d.ts
@@ -3437,7 +3437,7 @@ declare namespace monaco.editor {
 		/**
 		 * Controls what is the condition to spawn a color picker from a color dectorator
 		 */
-		colorDecoratorsActivatedOn?: 'click' | 'hover';
+		colorDecoratorsActivatedOn?: 'click and hover' | 'click' | 'hover';
 		/**
 		 * Controls the max number of color decorators that can be rendered in an editor at once.
 		 */
@@ -4934,7 +4934,7 @@ declare namespace monaco.editor {
 		codeLensFontFamily: IEditorOption<EditorOption.codeLensFontFamily, string>;
 		codeLensFontSize: IEditorOption<EditorOption.codeLensFontSize, number>;
 		colorDecorators: IEditorOption<EditorOption.colorDecorators, boolean>;
-		colorDecoratorActivatedOn: IEditorOption<EditorOption.colorDecoratorsActivatedOn, 'click' | 'hover'>;
+		colorDecoratorActivatedOn: IEditorOption<EditorOption.colorDecoratorsActivatedOn, 'click and hover' | 'click' | 'hover'>;
 		colorDecoratorsLimit: IEditorOption<EditorOption.colorDecoratorsLimit, number>;
 		columnSelection: IEditorOption<EditorOption.columnSelection, boolean>;
 		comments: IEditorOption<EditorOption.comments, Readonly<Required<IEditorCommentsOptions>>>;