diff --git a/packages/excalidraw/components/ColorPicker/ColorInput.tsx b/packages/excalidraw/components/ColorPicker/ColorInput.tsx
index 7e77e06ff..2cb5ca0d2 100644
--- a/packages/excalidraw/components/ColorPicker/ColorInput.tsx
+++ b/packages/excalidraw/components/ColorPicker/ColorInput.tsx
@@ -70,7 +70,13 @@ export const ColorInput = ({
 
   return (
     <div className="color-picker__input-label">
-      <div className="color-picker__input-hash">#</div>
+      <input
+        type="color"
+        onChange={(event) => {
+          changeColor(event.target.value);
+        }}
+        className="color-picker__input"
+      />
       <input
         ref={activeSection === "hex" ? inputRef : undefined}
         style={{ border: 0, padding: 0 }}
diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.scss b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
index 39e1845c3..7e4ce570f 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.scss
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
@@ -368,6 +368,7 @@
     }
   }
 
+  
   .color-picker-label-swatch-container {
     border: 1px solid var(--default-border-color);
     border-radius: var(--border-radius-lg);