diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.ts
index 02b4ac2e34..288b602033 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.ts
@@ -41,7 +41,8 @@ export class UmbPropertyEditorUIColorPickerElement extends UmbLitElement impleme
 	#ensureHashPrefix(swatch: UmbSwatchDetails): UmbSwatchDetails {
 		return {
 			label: swatch.label,
-			value: swatch.value.startsWith('#') ? swatch.value : `#${swatch.value}`,
+			// hex color regex adapted from: https://stackoverflow.com/a/9682781/12787
+			value: swatch.value.match(/^(?:[0-9a-f]{3}){1,2}$/i) ? `#${swatch.value}` : swatch.value,
 		};
 	}