diff --git a/frontend/src/Editor/Inspector/Elements/Color.jsx b/frontend/src/Editor/Inspector/Elements/Color.jsx
index 49d130c6ae..f6f7e02ce1 100644
--- a/frontend/src/Editor/Inspector/Elements/Color.jsx
+++ b/frontend/src/Editor/Inspector/Elements/Color.jsx
@@ -16,6 +16,15 @@ export const Color = ({ param, definition, onChange, paramType, componentMeta })
   const paramMeta = componentMeta[paramType][param.name] || {};
   const displayName = paramMeta.displayName || param.name;
 
+  const decimalToHex = (alpha) => {
+    let aHex = Math.round(255 * alpha).toString(16);
+    return alpha === 0 ? '00' : aHex.length < 2 ? `0${aHex}` : aHex;
+  };
+  const handleColorChange = (color) => {
+    const hexCode = `${color.hex}${decimalToHex(color?.rgb?.a ?? 1.0)}`;
+    onChange(param, 'value', hexCode, paramType);
+  };
+
   return (
     <div className="field mb-3">
       <ToolTip label={displayName} meta={paramMeta} />
@@ -26,7 +35,7 @@ export const Color = ({ param, definition, onChange, paramType, componentMeta })
           <SketchPicker
             onFocus={() => setShowPicker(true)}
             color={definition.value}
-            onChangeComplete={(color) => onChange(param, 'value', color.hex, paramType)}
+            onChangeComplete={handleColorChange}
           />
         </div>
       )}