diff --git a/components/kanban/Card.vue b/components/kanban/Card.vue
index 67e26791..36a026f1 100644
--- a/components/kanban/Card.vue
+++ b/components/kanban/Card.vue
@@ -5,7 +5,8 @@
 <template>
   <div
     ref="cardRef"
-    :class="[cardTextClassZoom, cardBackgroundColor, cardTextColor]"
+    :class="[cardTextClassZoom, (cardBackgroundColor.startsWith('#') ? '' : cardBackgroundColor), cardTextColor]"
+    :style="[cardBackgroundColor.startsWith('#') ? {'background-color': cardBackgroundColor} : {}]"
     class="kanban-card border-elevation-3 flex cursor-pointer flex-col items-start gap-1 border"
     @click.self="$emit('openKanbanModal', index, card)"
   >
@@ -179,6 +180,10 @@ const cardTextColor = computed(() => {
         }
     }
 
+    if (cardBackgroundColor.value.startsWith("#")) {
+        return getContrast(cardBackgroundColor.value);
+    }
+
     return "text-gray-50";
 });
 
diff --git a/components/modal/Kanban.vue b/components/modal/Kanban.vue
index 7988d787..d72b5e5e 100644
--- a/components/modal/Kanban.vue
+++ b/components/modal/Kanban.vue
@@ -257,6 +257,37 @@
                 class="h-4 w-4"
               />
             </button>
+            <button
+              :class="`h-7 w-7 rounded-full py-1 pl-1.5 pr-1`"
+              :style="{'background-color': customColor}"
+              @click="setCardColor(columnID, cardID, customColor)"
+            >
+              <CheckIcon
+                v-if="isCustomColor"
+                :class="['h-4', 'w-4', getContrast(customColor)]"
+              />
+              <PencilIcon
+                v-else
+                :class="['h-4', 'w-4', getContrast(customColor)]"
+              />
+            </button>
+            <div
+              v-if="isCustomColor"
+              class="bg-elevation-2 flex flex-col gap-2 rounded-md p-2"
+            >
+              <input
+                v-model="customColor"
+                class="bg-elevation-1 w-20 rounded-md px-2"
+                readonly="true"
+                type="text"
+              >
+              <input
+                ref="colorInput"
+                v-model="customColor"
+                class="bg-elevation-2 w-20 rounded-md px-2"
+                type="color"
+              >
+            </div>
           </div>
         </div>
       </div>
@@ -269,7 +300,7 @@ import type { Ref } from "vue";
 
 import emitter from "@/utils/emitter"
 import { generateUniqueID } from "@/utils/idGenerator";
-import { CheckIcon, PlusIcon, XMarkIcon } from "@heroicons/vue/24/solid";
+import { CheckIcon, PencilIcon, PlusIcon, XMarkIcon } from "@heroicons/vue/24/solid";
 import { PhCheck, PhPencilSimple } from "@phosphor-icons/vue";
 //@ts-ignore
 import { Container, Draggable } from 'vue3-smooth-dnd';
@@ -289,6 +320,9 @@ const description = ref("");
 const tasks: Ref<Array<{finished: boolean; id?: string, name: string }>> = ref([]);
 const selectedColor = ref("");
 
+const isCustomColor = computed(() => selectedColor.value.startsWith('#'));
+const customColor = ref("#ffffff");
+
 const titleEditing = ref(false);
 const titleInput: Ref<HTMLInputElement | null> = ref(null);
 
@@ -338,6 +372,9 @@ const initModal = (
     updateCardTasks();
 
     selectedColor.value = selectedColorParam || "bg-elevation-2";
+    if (selectedColorParam?.startsWith('#')) {
+        customColor.value = selectedColorParam;
+    }
 }
 
 const enableTaskAddMode = () => {
@@ -408,5 +445,11 @@ const setCardColor = (columnID: string, cardID: number, color: string) => {
     emit('setCardColor', columnID, cardID, color);
 }
 
+watch(customColor, (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+        setCardColor(columnID.value, cardID.value, newVal);
+    }
+});
+
 defineExpose({ initModal });
 </script>