diff --git a/src/components/input/ColorPicker.vue b/src/components/input/ColorPicker.vue
index 4c3f55d64..297ed76ab 100644
--- a/src/components/input/ColorPicker.vue
+++ b/src/components/input/ColorPicker.vue
@@ -64,6 +64,15 @@ const emit = defineEmits(['update:modelValue'])
 watch(
 	() => modelValue,
 	(newValue) => {
+		if (newValue === '' || newValue.startsWith('var(')) {
+			color.value = ''
+			return
+		}
+
+		if (!newValue.startsWith('#') && (newValue.length === 6 || newValue.length === 3)) {
+			newValue = `#${newValue}`
+		}
+
 		color.value = newValue
 	},
 	{immediate: true},
diff --git a/src/models/label.ts b/src/models/label.ts
index 04bc9b35a..ef7eb9934 100644
--- a/src/models/label.ts
+++ b/src/models/label.ts
@@ -24,7 +24,7 @@ export default class LabelModel extends AbstractModel<ILabel> implements ILabel
 		super()
 		this.assignData(data)
 
-		if (this.hexColor !== '' && this.hexColor.substring(0, 1) !== '#') {
+		if (this.hexColor !== '' && !this.hexColor.startsWith('#') && !this.hexColor.startsWith('var(')) {
 			this.hexColor = '#' + this.hexColor
 		}