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..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 || ''}`,
@@ -167,7 +178,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,