diff --git a/client/src/components/production-board-kanban-card/production-board-kanban-card-color-legend.component.jsx b/client/src/components/production-board-kanban-card/production-board-kanban-card-color-legend.component.jsx
index e9cc0f4e0..15b33ccc4 100644
--- a/client/src/components/production-board-kanban-card/production-board-kanban-card-color-legend.component.jsx
+++ b/client/src/components/production-board-kanban-card/production-board-kanban-card-color-legend.component.jsx
@@ -2,12 +2,21 @@ import { Col, List, Space, Typography } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
-const CardColorLegend = ({ bodyshop, cardSettings }) => {
+const CardColorLegend = ({ bodyshop }) => {
   const { t } = useTranslation();
-  const data = bodyshop.ssbuckets.map((size) => ({
-    label: size.label,
-    color: size.color?.hex ?? "white",
-  }));
+  const data = bodyshop.ssbuckets.map((bucket) => {
+    let color = { r: 255, g: 255, b: 255 };
+
+    if (bucket.color.rgb) {
+      color = bucket.color.rgb;
+    }
+    color = bucket.color; // default to white
+
+    return {
+      label: bucket.label,
+      color,
+    };
+  });
 
   return (
     <Col>
@@ -24,7 +33,7 @@ const CardColorLegend = ({ bodyshop, cardSettings }) => {
                 style={{
                   width: "1.5rem",
                   aspectRatio: "1/1",
-                  backgroundColor: item.color,
+                  backgroundColor: `rgba(${item.color.r},${item.color.g},${item.color.b},${item.color.a})`,
                 }}
               ></div>
               <div>{item.label}</div>
diff --git a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
index 17f590171..7f59eadc4 100644
--- a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
+++ b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx
@@ -28,7 +28,7 @@ const cardColor = (ssbuckets, totalHrs) => {
     return bucket.color.rgb;
   }
 
-  return bucket.color;
+  return bucket.color ?? { r: 255, g: 255, b: 255 }; // default to white
 };
 
 function getContrastYIQ(bgColor) {