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 bab5b9851..17f590171 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
@@ -24,18 +24,15 @@ const cardColor = (ssbuckets, totalHrs) => {
       bucket.gte <= totalHrs && (!!bucket.lt ? bucket.lt > totalHrs : true)
   )[0];
 
-  if (bucket.color) {
-    return bucket.color.hex;
+  if (bucket.color.rgb) {
+    return bucket.color.rgb;
   }
 
-  return "";
+  return bucket.color;
 };
 
-function getContrastYIQ(hexColor) {
-  const r = parseInt(hexColor.substr(1, 2), 16);
-  const g = parseInt(hexColor.substr(3, 2), 16);
-  const b = parseInt(hexColor.substr(5, 2), 16);
-  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+function getContrastYIQ(bgColor) {
+  const yiq = (bgColor.r * 299 + bgColor.g * 587 + bgColor.b * 114) / 1000;
 
   return yiq >= 128 ? "black" : "white";
 }
@@ -85,7 +82,10 @@ export default function ProductionBoardCard(
       className="react-kanban-card imex-kanban-card"
       size="small"
       style={{
-        backgroundColor: cardSettings && cardSettings.cardcolor && bgColor,
+        backgroundColor:
+          cardSettings &&
+          cardSettings.cardcolor &&
+          `rgba(${bgColor.r},${bgColor.g},${bgColor.b},${bgColor.a})`,
         color:
           cardSettings && cardSettings.cardcolor && getContrastYIQ(bgColor),
       }}
diff --git a/client/src/components/shop-info/shop-info.rostatus.component.jsx b/client/src/components/shop-info/shop-info.rostatus.component.jsx
index 10dd0c926..29ad53ecd 100644
--- a/client/src/components/shop-info/shop-info.rostatus.component.jsx
+++ b/client/src/components/shop-info/shop-info.rostatus.component.jsx
@@ -396,7 +396,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
   );
 }
 
-const ColorPicker = ({ value, onChange, style, ...restProps }) => {
+export const ColorPicker = ({ value, onChange, style, ...restProps }) => {
   const handleChange = (color) => {
     if (onChange) onChange(color.rgb);
   };
diff --git a/client/src/components/shop-info/shop-info.scheduling.component.jsx b/client/src/components/shop-info/shop-info.scheduling.component.jsx
index 49145aed9..60bf3cbfd 100644
--- a/client/src/components/shop-info/shop-info.scheduling.component.jsx
+++ b/client/src/components/shop-info/shop-info.scheduling.component.jsx
@@ -15,6 +15,7 @@ import { useTranslation } from "react-i18next";
 import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-form-item.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import { ColorPicker } from "./shop-info.rostatus.component";
 
 export default function ShopInfoSchedulingComponent({ form }) {
   const { t } = useTranslation();
@@ -283,7 +284,7 @@ export default function ShopInfoSchedulingComponent({ form }) {
                         key={`${index}color`}
                         name={[field.name, "color"]}
                       >
-                        <ColorpickerFormItemComponent />
+                        <ColorPicker />
                       </Form.Item>
 
                       <Space wrap>