diff --git a/frontend/components/Domain/ShoppingList/MultiPurposeLabel.vue b/frontend/components/Domain/ShoppingList/MultiPurposeLabel.vue
index 54ae1fd3aa11..b938c4a2c7a2 100644
--- a/frontend/components/Domain/ShoppingList/MultiPurposeLabel.vue
+++ b/frontend/components/Domain/ShoppingList/MultiPurposeLabel.vue
@@ -8,8 +8,11 @@
 
 <script lang="ts">
 import { computed, defineComponent } from "@nuxtjs/composition-api";
+// @ts-ignore missing color types
+import Color from "@sphinxxxx/color-conversion";
 import { MultiPurposeLabelSummary } from "~/lib/api/types/recipe";
 
+
 export default defineComponent({
   props: {
     label: {
@@ -34,19 +37,27 @@ export default defineComponent({
     const ACCESSIBILITY_THRESHOLD = 0.179;
 
     function pickTextColorBasedOnBgColorAdvanced(bgColor: string, lightColor: string, darkColor: string) {
-      const color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
-      const r = parseInt(color.substring(0, 2), 16); // hexToR
-      const g = parseInt(color.substring(2, 4), 16); // hexToG
-      const b = parseInt(color.substring(4, 6), 16); // hexToB
-      const uicolors = [r / 255, g / 255, b / 255];
-      const c = uicolors.map((col) => {
-        if (col <= 0.03928) {
-          return col / 12.92;
+      try {
+        const color = new Color(bgColor);
+
+        // if opacity is less than 0.3 always return dark color
+        if (color._rgba[3] < 0.3) {
+          return darkColor;
         }
-        return Math.pow((col + 0.055) / 1.055, 2.4);
-      });
-      const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-      return L > ACCESSIBILITY_THRESHOLD ? darkColor : lightColor;
+
+        const uicolors = [color._rgba[0] / 255, color._rgba[1] / 255, color._rgba[2] / 255];
+        const c = uicolors.map((col) => {
+          if (col <= 0.03928) {
+            return col / 12.92;
+          }
+          return Math.pow((col + 0.055) / 1.055, 2.4);
+        });
+        const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+        return L > ACCESSIBILITY_THRESHOLD ? darkColor : lightColor;
+      } catch (error) {
+        console.warn(error);
+        return "black";
+      }
     }
 
     return {