diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/legend/extract_color_from_style_property.ts b/x-pack/plugins/maps/public/classes/styles/vector/components/legend/extract_color_from_style_property.ts
index 8a2bf109922df8..dadb3f201fa337 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/legend/extract_color_from_style_property.ts
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/legend/extract_color_from_style_property.ts
@@ -43,7 +43,7 @@ export function extractColorFromStyleProperty(
     }
 
     const palette = getColorPalette(dynamicOptions.colorCategory);
-    return palette ? palette[0] : null;
+    return palette ? palette[0] : defaultColor;
   } else {
     // return middle of gradient for dynamic style property
     if (dynamicOptions.useCustomColorRamp) {
@@ -58,6 +58,7 @@ export function extractColorFromStyleProperty(
     if (!dynamicOptions.color) {
       return defaultColor;
     }
-    return getColorRampCenterColor(dynamicOptions.color);
+    const centerColor = getColorRampCenterColor(dynamicOptions.color);
+    return centerColor ? centerColor : defaultColor;
   }
 }