diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index 7fa7a60c..785c7036 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -77,8 +77,8 @@
 						done: t.done,
 						'is-current-edit':
 							taskToEdit !== null && taskToEdit.id === t.id,
-						'has-light-text': !colorIsDark(t.hexColor),
-						'has-dark-text': colorIsDark(t.hexColor),
+						'has-light-text': !colorIsDark(t.getHexColor()),
+						'has-dark-text': colorIsDark(t.getHexColor()),
 					}"
 					:gridX="dayWidth"
 					:h="31"
@@ -89,8 +89,8 @@
 					:snapToGrid="true"
 					:sticks="['mr', 'ml']"
 					:style="{
-						'border-color': t.hexColor,
-						'background-color': t.hexColor,
+						'border-color': t.getHexColor(),
+						'background-color': t.getHexColor(),
 					}"
 					:w="t.durationDays * dayWidth"
 					:x="t.offsetDays * dayWidth - 6"
diff --git a/src/models/task.js b/src/models/task.js
index ffdc7744..12bb12e3 100644
--- a/src/models/task.js
+++ b/src/models/task.js
@@ -47,11 +47,7 @@ export default class TaskModel extends AbstractModel {
 			return new LabelModel(l)
 		})
 
-		// Set the default color
-		if (this.hexColor === '') {
-			this.hexColor = this.defaultColor
-		}
-		if (this.hexColor.substring(0, 1) !== '#') {
+		if (this.hexColor !== '' && this.hexColor.substring(0, 1) !== '#') {
 			this.hexColor = '#' + this.hexColor
 		}
 
@@ -124,6 +120,14 @@ export default class TaskModel extends AbstractModel {
 		return this.identifier
 	}
 
+	getHexColor() {
+		if (this.hexColor === '') {
+			return `#${this.defaultColor}`
+		}
+
+		return this.hexColor
+	}
+
 	/////////////////
 	// Helper functions
 	///////////////