diff --git a/src/components/map/MapFog.js b/src/components/map/MapFog.js
index 963f677..f1206ac 100644
--- a/src/components/map/MapFog.js
+++ b/src/components/map/MapFog.js
@@ -496,7 +496,9 @@ function MapFog({
         : editOpacity
       : 1;
     // Control opacity only on fill as using opacity with stroke leads to performance issues
-    const fill = new Color(colors[shape.color] || shape.color).alpha(opacity);
+    const fill = new Color(colors[shape.color] || shape.color)
+      .alpha(opacity)
+      .string();
     const stroke =
       editable && active
         ? colors.lightGray