diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts
index e036b91884..ab7aac9264 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-eye-dropper/input-eye-dropper.element.ts
@@ -1,7 +1,7 @@
-import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external/uui';
+import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external/uui';
 
 @customElement('umb-input-eye-dropper')
 export class UmbInputEyeDropperElement extends FormControlMixin(UmbLitElement) {
@@ -9,7 +9,7 @@ export class UmbInputEyeDropperElement extends FormControlMixin(UmbLitElement) {
 		return undefined;
 	}
 
-	private _onChange(e: UUIColorPickerChangeEvent) {
+	#onChange(e: UUIColorPickerChangeEvent) {
 		e.stopPropagation();
 		super.value = e.target.value;
 		this.dispatchEvent(new CustomEvent('change'));
@@ -18,17 +18,19 @@ export class UmbInputEyeDropperElement extends FormControlMixin(UmbLitElement) {
 	@property({ type: Boolean })
 	opacity = false;
 
-	@property()
+	@property({ type: Array })
 	swatches: string[] = [];
-	//TODO if empty swatches, the color picker still shows the area where they are supposed to  be rendered.
+
+	//TODO if empty swatches, the color picker still shows the area where they are supposed to be rendered.
 	// BTW in the old backoffice "palette" seemed to be true/false setting, but here its an array.
 
 	render() {
 		return html`<uui-color-picker
 			label="Eye dropper"
-			@change="${this._onChange}"
-			.opacity="${this.opacity}"
-			.swatches="${this.swatches}"></uui-color-picker>`;
+			.opacity=${this.opacity}
+			.swatches=${this.swatches}
+			.value=${this.value as string}
+			@change=${this.#onChange}></uui-color-picker>`;
 	}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
index cab126a0b4..e73ae03ea6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/eye-dropper/property-editor-ui-eye-dropper.element.ts
@@ -1,8 +1,9 @@
 import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
-import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external/uui';
-import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UUIColorPickerChangeEvent } from '@umbraco-cms/backoffice/external/uui';
 
 /**
  * @element umb-property-editor-ui-eye-dropper
@@ -21,23 +22,44 @@ export class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implemen
 	private _swatches: string[] = [];
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		if (config) {
-			this._opacity = config.getValueByAlias('showAlpha') ?? this.#defaultOpacity;
-			this._swatches = config.getValueByAlias('palette') ?? [];
+		this._opacity = config?.getValueByAlias('showAlpha') ?? this.#defaultOpacity;
+
+		const showPalette = config?.getValueByAlias('showPalette') ?? false;
+
+		if (showPalette) {
+			// TODO: This is a temporary solution until we have a proper way to get the palette from the config. [LK]
+			this._swatches = [
+				'#d0021b',
+				'#f5a623',
+				'#f8e71c',
+				'#8b572a',
+				'#7ed321',
+				'#417505',
+				'#bd10e0',
+				'#9013fe',
+				'#4a90e2',
+				'#50e3c2',
+				'#b8e986',
+				'#000',
+				'#444',
+				'#888',
+				'#ccc',
+				'#fff',
+			];
 		}
 	}
 
-	private _onChange(event: UUIColorPickerChangeEvent) {
+	#onChange(event: UUIColorPickerChangeEvent) {
 		this.value = event.target.value;
-		this.dispatchEvent(new CustomEvent('property-value-change'));
+		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
-	// TODO: This should use the given value:
 	render() {
 		return html`<umb-input-eye-dropper
-			@change="${this._onChange}"
+			.opacity=${this._opacity}
 			.swatches=${this._swatches}
-			.opacity="${this._opacity}"></umb-input-eye-dropper>`;
+			.value=${this.value}
+			@change=${this.#onChange}></umb-input-eye-dropper>`;
 	}
 }