From a955564c31a1fcfc319bf6b4e8e2553266bcf7c2 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Thu, 2 Oct 2025 22:32:28 +0200
Subject: [PATCH 1/2] Set intial color for hidden color input

---
 .../multiple-color-picker-item-input.element.ts            | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
index 6fed4cef677f..dc1ef6f09a14 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
@@ -167,7 +167,12 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 								value=${this._valueHex}
 								@click=${this.#onColorClick}></uui-color-swatch>
 						</uui-input>
-						<input aria-hidden="${true}" type="color" id="color" value=${this.value} @change=${this.#onColorChange} />
+						<input
+							type="color"
+							id="color"
+							value=${this._valueHex}
+							aria-hidden="${true}"
+							@change=${this.#onColorChange} />
 					</div>
 					${when(
 						this.showLabels,

From f0acc7e45fcd30579b4a7112d54f4233f9ec3441 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Thu, 2 Oct 2025 23:19:42 +0200
Subject: [PATCH 2/2] Expand 3-digits hex to 6-digits

---
 .../multiple-color-picker-item-input.element.ts   | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
index dc1ef6f09a14..43ae759be68c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
@@ -22,12 +22,12 @@ import type { UUIColorPickerElement, UUIInputElement, UUIInputEvent } from '@umb
 export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(UmbLitElement, '') {
 	@property({ type: String })
 	public override set value(value: string) {
+		this._valueHex = this.#expandHex(value);
+
 		if (value.startsWith('#')) {
-			this._valueHex = value;
 			super.value = value.substring(1);
 		} else {
 			super.value = value;
-			this._valueHex = `#${value}`;
 		}
 	}
 	public override get value() {
@@ -67,6 +67,17 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 	@property({ type: Boolean })
 	showLabels = false;
 
+	#expandHex(hex: string) {
+		hex = hex.replace(/^#/, '');
+
+		// If it's 3-digit, expand it
+		if (hex.length === 3) {
+			hex = hex.split('').map(ch => ch + ch).join('');
+		}
+
+		return `#${hex}`;
+	}
+
 	async #onDelete() {
 		await umbConfirmModal(this, {
 			headline: `${this.localize.term('actions_delete')} ${this.value || ''}`,