diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 2799c02fe..9b56f62b6 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -190,7 +190,7 @@
     box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-canvas));
     color: var(--btn-color);
     font-weight: 700;
-    
+
   }
 
   .card__move-button {
@@ -267,7 +267,7 @@
 
     .card:has(&),
     .card-perma:has(&) {
-      --card-color: #3b3633 !important;
+      --card-color: var(--card-color-1) !important;
     }
   }
 
diff --git a/app/models/card/colored.rb b/app/models/card/colored.rb
index 5b5be64c2..1a97b5782 100644
--- a/app/models/card/colored.rb
+++ b/app/models/card/colored.rb
@@ -1,8 +1,18 @@
 module Card::Colored
   extend ActiveSupport::Concern
 
-  COLORS = %w[ #67695e #eb7a32 #bf7c2b #c09c6f #746b1e #2c6da8 #5d618f #663251 #ff63a8 ]
-  DEFAULT_COLOR = "#2c6da8"
+  COLORS = %w[
+    var(--color-card-1)
+    var(--color-card-2)
+    var(--color-card-3)
+    var(--color-card-4)
+    var(--color-card-5)
+    var(--color-card-6)
+    var(--color-card-7)
+    var(--color-card-8)
+    var(--color-card-9)
+  ]
+  DEFAULT_COLOR = COLORS[5]
 
   def color
     color_from_stage || DEFAULT_COLOR