diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts
index 9f6a1e82dd53..574e3ade4259 100644
--- a/packages/main/src/ColorPalette.ts
+++ b/packages/main/src/ColorPalette.ts
@@ -21,7 +21,6 @@ import {
 import ColorPaletteTemplate from "./ColorPaletteTemplate.js";
 import type ColorPaletteItem from "./ColorPaletteItem.js";
 import type Button from "./Button.js";
-import type Dialog from "./Dialog.js";
 import type ColorPicker from "./ColorPicker.js";
 
 import {
@@ -156,6 +155,18 @@ class ColorPalette extends UI5Element {
 	@property({ type: Object })
 	showMoreColorsTemplateModule?: JsxTemplateModule;
 
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	dialogOpen = false;
+
+	/**
+	 * @private
+	 */
+	@property()
+	colorPickerValue = "rgba(255,255,255,1)";
+
 	/**
 	 * Defines the `ui5-color-palette-item` elements.
 	 * @public
@@ -471,9 +482,12 @@ class ColorPalette extends UI5Element {
 		return this.colorPaletteNavigationElements[0];
 	}
 
+	onColorPickerChange(e: Event) {
+		this.colorPickerValue = (e.target as ColorPicker).value;
+	}
+
 	_chooseCustomColor() {
-		const colorPicker = this.getColorPicker();
-		this._setColor(colorPicker.value);
+		this._setColor(this.colorPickerValue);
 		this._closeDialog();
 		this._shouldFocusRecentColors = true;
 	}
@@ -488,19 +502,16 @@ class ColorPalette extends UI5Element {
 	}
 
 	_closeDialog() {
-		const dialog = this._getDialog();
-		dialog.open = false;
+		this.dialogOpen = false;
 	}
 
 	_openMoreColorsDialog() {
-		const dialog = this._getDialog();
-		const colorPicker = this.getColorPicker();
 		const value = this._currentlySelected ? this._currentlySelected.value : undefined;
 
 		if (value) {
-			colorPicker.value = value;
+			this.colorPickerValue = value;
 		}
-		dialog.open = true;
+		this.dialogOpen = true;
 	}
 
 	_onDefaultColorClick() {
@@ -625,15 +636,6 @@ class ColorPalette extends UI5Element {
 			},
 		};
 	}
-
-	_getDialog() {
-		return this.shadowRoot!.querySelector<Dialog>("[ui5-dialog]")!;
-	}
-
-	getColorPicker() {
-		const dialog = this._getDialog();
-		return dialog.content[0].querySelector<ColorPicker>("[ui5-color-picker]")!;
-	}
 }
 
 ColorPalette.define();
diff --git a/packages/main/src/features/ColorPaletteMoreColorsTemplate.tsx b/packages/main/src/features/ColorPaletteMoreColorsTemplate.tsx
index 8a9526a801f3..ac98b09c5fea 100644
--- a/packages/main/src/features/ColorPaletteMoreColorsTemplate.tsx
+++ b/packages/main/src/features/ColorPaletteMoreColorsTemplate.tsx
@@ -5,9 +5,9 @@ import ColorPicker from "../ColorPicker.js";
 
 export default function ColorPaletteMoreColorsTemplate(this: ColorPalette) {
 	return (
-		<Dialog headerText={this.colorPaletteDialogTitle}>
+		<Dialog open={this.dialogOpen} headerText={this.colorPaletteDialogTitle}>
 			<div class="ui5-cp-dialog-content">
-				<ColorPicker />
+				<ColorPicker value={this.colorPickerValue} onChange={this.onColorPickerChange} />
 			</div>
 
 			<div slot="footer" class="ui5-cp-dialog-footer">