diff --git a/src/pods/properties/components/color-picker/color-picker.component.tsx b/src/pods/properties/components/color-picker/color-picker.component.tsx
index e1176082..92af5d54 100644
--- a/src/pods/properties/components/color-picker/color-picker.component.tsx
+++ b/src/pods/properties/components/color-picker/color-picker.component.tsx
@@ -26,23 +26,23 @@ export const ColorPicker: React.FC<Props> = props => {
     setHsva(hexToHsva(color));
   };
 
+  const handleChange = (color: ColorProps) => {
+    setHsva(color.hsva);
+    onChange(color.hexa);
+  };
+
   const handlePresetColors = (newColor: string) => {
     const hsvaColor = hexToHsva(newColor);
     setHsva(hsvaColor);
     onChange(newColor);
   };
 
-  const handleChange = (color: ColorProps) => {
-    setHsva(color.hsva);
-    onChange(color.hexa);
-  };
-
   return (
     <>
       <div className={classes.container}>
         <p>{label}</p>
         <button
-          data-color={hsva.a === 0 ? 'noColor' : ''}
+          data-color={hexToHsva(color).a === 0 ? 'noColor' : ''}
           className={classes.button}
           style={{ backgroundColor: color }}
           onClick={togglePicker}