diff --git a/src/design-system/styles/hslObjectForColor.ts b/src/design-system/styles/hslObjectForColor.ts
index 0099cf6e46..997b56d41a 100644
--- a/src/design-system/styles/hslObjectForColor.ts
+++ b/src/design-system/styles/hslObjectForColor.ts
@@ -4,7 +4,7 @@ export function hslObjectForColor(color: string) {
   const [hue, saturation, lightness] = chroma(color).hsl();
 
   return {
-    hue: String(hue),
+    hue: isNaN(hue) ? '0' : String(hue),
     saturation: `${saturation * 100}%`,
     lightness: `${lightness * 100}%`,
   };