diff --git a/src/components/input/button.vue b/src/components/input/button.vue
index 0131c287..ae34391d 100644
--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@@ -9,9 +9,16 @@
 			}
 		]"
 	>
-		<icon :icon="icon" v-if="showIconOnly"/>
+		<icon 
+			v-if="showIconOnly"
+			:icon="icon"
+			:style="{'color': iconColor !== '' ? iconColor : false}"
+		/>
 		<span class="icon is-small" v-else-if="icon !== ''">
-			<icon :icon="icon"/>
+			<icon 
+				:icon="icon"
+				:style="{'color': iconColor !== '' ? iconColor : false}"
+			/>
 		</span>
 		<slot />
 	</BaseButton>
@@ -42,6 +49,10 @@ const props = defineProps({
 		type: [String, Array],
 		default: '',
 	},
+	iconColor: {
+		type: String,
+		default: '',
+	},
 	loading: {
 		type: Boolean,
 		default: false,
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 2c5b573b..b75e7325 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -378,9 +378,8 @@
 							@click="setFieldActive('color')"
 							variant="secondary"
 							icon="fill-drip"
+							:icon-color="color"
 							v-shortcut="'c'"
-							:class="{'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color)}"
-							:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : false}"
 						>
 							{{ $t('task.detail.actions.color') }}
 						</x-button>
@@ -600,9 +599,13 @@ export default defineComponent({
 			return this.$route.name.includes('kanban')
 		},
 		color() {
-			return this.task.getHexColor
+			const color = this.task.getHexColor
 				? this.task.getHexColor()
-				: TASK_DEFAULT_COLOR
+				: false
+			
+			return color === TASK_DEFAULT_COLOR
+				? ''
+				: color
 		},
 	},
 	methods: {