diff --git a/frontend/src/Editor/Inspector/Elements/Color.jsx b/frontend/src/Editor/Inspector/Elements/Color.jsx
index 139ef508a9..396fe7d952 100644
--- a/frontend/src/Editor/Inspector/Elements/Color.jsx
+++ b/frontend/src/Editor/Inspector/Elements/Color.jsx
@@ -34,7 +34,15 @@ export const Color = ({ param, definition, onChange, paramType, componentMeta })
       <div className="row mx-0 form-control color-picker-input" onClick={() => setShowPicker(true)}>
         <div
           className="col-auto"
-          style={{ float: 'right', width: '20px', height: '20px', backgroundColor: definition.value }}
+          style={
+            {
+              float: 'right',
+              width: '20px',
+              height: '20px',
+              backgroundColor: definition.value,
+              border: `0.25px solid ${['#ffffff', '#fff', '#1f2936'].includes(definition.value) && '#c5c8c9'}`
+            }
+          }
         ></div>
         <div className="col">{definition.value}</div>
       </div>