diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index b417b31d7..6e535a767 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -209,6 +209,14 @@
   /* Colors: Cards */
   --color-card-default: oklch(var(--lch-blue-dark));
   --color-card-complete: var(--color-ink-darker);
+  --color-card-1: oklch(var(--lch-ink-medium));
+  --color-card-2: oklch(var(--lch-uncolor-medium));
+  --color-card-3: oklch(var(--lch-yellow-medium));
+  --color-card-4: oklch(var(--lch-lime-medium));
+  --color-card-5: oklch(var(--lch-aqua-medium));
+  --color-card-6: oklch(var(--lch-violet-medium));
+  --color-card-7: oklch(var(--lch-purple-medium));
+  --color-card-8: oklch(var(--lch-pink-medium));
 
   /* Colors: Syntax highlighting */
   --color-code-token__att: oklch(var(--lch-blue-dark));
diff --git a/app/models/color.rb b/app/models/color.rb
index 59c14774e..1817d4f70 100644
--- a/app/models/color.rb
+++ b/app/models/color.rb
@@ -13,13 +13,13 @@ class Color
 
   COLORS = {
     "Blue" => "var(--color-card-default)",
-    "Gray" => "oklch(var(--lch-ink-dark))",
-    "Tan" => "oklch(var(--lch-uncolor-medium))",
-    "Yellow" => "oklch(var(--lch-yellow-medium))",
-    "Lime" => "oklch(var(--lch-lime-medium))",
-    "Aqua" => "oklch(var(--lch-aqua-medium))",
-    "Violet" => "oklch(var(--lch-violet-medium))",
-    "Purple" => "oklch(var(--lch-purple-medium))",
-    "Pink" => "oklch(var(--lch-pink-medium))"
+    "Gray" => "var(--color-card-1)",
+    "Tan" => "var(--color-card-2)",
+    "Yellow" => "var(--color-card-3)",
+    "Lime" => "var(--color-card-4)",
+    "Aqua" => "var(--color-card-5)",
+    "Violet" => "var(--color-card-6)",
+    "Purple" => "var(--color-card-7)",
+    "Pink" => "var(--color-card-8)"
   }.collect { |name, value| new(name, value) }.freeze
 end
diff --git a/test/fixtures/columns.yml b/test/fixtures/columns.yml
index 6e7d372d2..f10ad1138 100644
--- a/test/fixtures/columns.yml
+++ b/test/fixtures/columns.yml
@@ -1,24 +1,24 @@
 # Columns for writebook board (which has qa workflow)
 writebook_triage:
   name: Triage
-  color: "#000000"
+  color: "var(--color-card-4)"
   board: writebook
   position: 0
 
 writebook_in_progress:
   name: In progress
-  color: "#3b3633"
+  color: "var(--color-card-2)"
   board: writebook
   position: 1
 
 writebook_on_hold:
   name: On Hold
-  color: "#67695e"
+  color: "var(--color-card-4)"
   board: writebook
   position: 2
 
 writebook_review:
   name: Review
-  color: "#eb7a32"
+  color: "var(--color-card-3)"
   board: writebook
   position: 3
diff --git a/test/models/column/colored_test.rb b/test/models/column/colored_test.rb
index d74a850b0..9d2d469e4 100644
--- a/test/models/column/colored_test.rb
+++ b/test/models/column/colored_test.rb
@@ -8,9 +8,9 @@ class Column::ColoredTest < ActiveSupport::TestCase
   end
 
   test "update the column color" do
-    columns(:writebook_triage).update!(color: "oklch(var(--lch-yellow-medium))")
+    columns(:writebook_triage).update!(color: "var(--color-card-3)")
 
     assert_not_nil columns(:writebook_triage).color
-    assert_equal Color.for_value("oklch(var(--lch-yellow-medium))"), columns(:writebook_triage).color
+    assert_equal Color.for_value("var(--color-card-3)"), columns(:writebook_triage).color
   end
 end