diff --git a/src/components/features/composite/color/color.tsx b/src/components/features/composite/color/color.tsx
index 29f9888f3..25bba8c27 100644
--- a/src/components/features/composite/color/color.tsx
+++ b/src/components/features/composite/color/color.tsx
@@ -10,8 +10,11 @@ const Light: FunctionComponent<ColorProps> = (props) => {
     const { deviceState, feature, onChange, minimal } = props;
     const value = {};
     for (const innerFeature of feature.features) {
-        value[innerFeature.name] =
-            (deviceState[feature.property] as Record<string, Record<string, unknown>>)?.[innerFeature.property] ?? 0;
+        // just in case the number comes in as string
+        const propValue = Number.parseFloat(
+            (deviceState[feature.property] as Record<string, Record<string, unknown>>)?.[innerFeature.name],
+        );
+        value[innerFeature.name] = Number.isNaN(propValue) ? 0 : propValue;
     }
     return (
         <ColorEditor