diff --git a/src/cards/top-languages.js b/src/cards/top-languages.js
index 64c11448408c9..4de1a30ce6411 100644
--- a/src/cards/top-languages.js
+++ b/src/cards/top-languages.js
@@ -1,7 +1,7 @@
 // @ts-check
 
 import { Card } from "../common/Card.js";
-import { getCardColors } from "../common/color.js";
+import { fallbackColor, getCardColors } from "../common/color.js";
 import { formatBytes } from "../common/fmt.js";
 import { I18n } from "../common/I18n.js";
 import { chunkArray, clampValue, lowercaseTrim } from "../common/ops.js";
@@ -252,9 +252,7 @@ const createProgressTextNode = ({
         color,
         width: progressWidth,
         progress,
-        progressBarBackgroundColor: progBarBgColor
-          ? `#${progBarBgColor}`
-          : "#ddd",
+        progressBarBackgroundColor: progBarBgColor,
         delay: staggerDelay + 300,
       })}
     </g>
@@ -885,7 +883,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
       langs,
       width,
       totalLanguageSize,
-      prog_bar_bg_color,
+      fallbackColor(prog_bar_bg_color, "#ddd"),
       stats_format,
     );
   }
diff --git a/src/common/color.js b/src/common/color.js
index 4b26dc806b4de..566f86301ac0b 100644
--- a/src/common/color.js
+++ b/src/common/color.js
@@ -142,4 +142,4 @@ const getCardColors = ({
   return { titleColor, iconColor, textColor, bgColor, borderColor, ringColor };
 };
 
-export { isValidHexColor, isValidGradient, getCardColors };
+export { isValidHexColor, isValidGradient, getCardColors, fallbackColor };