diff --git a/addons/web/static/src/core/colorpicker/colorpicker.js b/addons/web/static/src/core/colorpicker/colorpicker.js
index d387d3b13df..a6bb93647d2 100644
--- a/addons/web/static/src/core/colorpicker/colorpicker.js
+++ b/addons/web/static/src/core/colorpicker/colorpicker.js
@@ -502,8 +502,8 @@ export class Colorpicker extends Component {
     _onChangeInputs(ev) {
         switch ($(ev.target).data("colorMethod")) {
             case "hex":
-                this._updateHex(this.$el.find(".o_hex_input").val());
-                break;
+                // Handled by the "input" event (see "_onHexColorInput").
+                return;
             case "rgb":
                 this._updateRgba(
                     parseInt(this.$el.find(".o_red_input").val()),
@@ -525,4 +525,18 @@ export class Colorpicker extends Component {
         this._updateUI();
         this._colorSelected();
     }
+    /**
+     * Called when the hex color input's input event is triggered.
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onHexColorInput(ev) {
+        const hexColorValue = ev.target.value.replaceAll("#", "");
+        if (hexColorValue.length === 6) {
+            this._updateHex(`#${hexColorValue}`);
+            this._updateUI();
+            this._colorSelected();
+        }
+    }
 }
diff --git a/addons/web/static/src/core/colorpicker/colorpicker.xml b/addons/web/static/src/core/colorpicker/colorpicker.xml
index d69d3561c6c..6e71c7369db 100644
--- a/addons/web/static/src/core/colorpicker/colorpicker.xml
+++ b/addons/web/static/src/core/colorpicker/colorpicker.xml
@@ -19,7 +19,8 @@
             <t t-set="input_classes" t-value="'p-0 border-0 text-center font-monospace bg-transparent'" />
 
             <div class="o_hex_div px-1 d-flex align-items-baseline">
-                <input type="text" t-attf-class="o_hex_input {{input_classes}}" data-color-method="hex" size="1"/>
+                <input type="text" t-attf-class="o_hex_input {{input_classes}}" data-color-method="hex" size="1"
+                    t-on-input="_onHexColorInput"/>
                 <label class="flex-grow-0 ms-1 mb-0">hex</label>
             </div>
             <div class="o_rgba_div px-1 d-flex align-items-baseline">