diff --git a/addons/web/static/src/scss/colorpicker.scss b/addons/web/static/src/scss/colorpicker.scss
index ae618504a0c..ffbebee4771 100644
--- a/addons/web/static/src/scss/colorpicker.scss
+++ b/addons/web/static/src/scss/colorpicker.scss
@@ -28,6 +28,9 @@
     }
     .o_slider_pointer, .o_opacity_pointer, .o_picker_pointer, .o_color_preview, .o_hex_div, .o_rgba_div  {
         border: 1px solid black;
+        &:focus-within {
+            border-color: $o-we-sidebar-content-field-input-border-color;
+        }
     }
     .o_color_picker_inputs {
         font-size: 10px;
@@ -36,6 +39,10 @@
             font-family: monospace !important; // FIXME: the monospace font used in the editor has not consistent ch units on Firefox
             height: 18px;
             font-size: 11px;
+            border: none;
+            &:focus {
+                outline: none;
+            }
         }
         .o_hex_div input {
             width: 7ch;
diff --git a/addons/web/static/src/xml/colorpicker.xml b/addons/web/static/src/xml/colorpicker.xml
index ada505a8db8..09d39f30f58 100644
--- a/addons/web/static/src/xml/colorpicker.xml
+++ b/addons/web/static/src/xml/colorpicker.xml
@@ -16,7 +16,7 @@
         </div>
         <div t-if="widget.options.colorPreview" class="o_color_preview mb-1 w-100 p-2"/>
         <div class="o_color_picker_inputs d-flex justify-content-between mb-2">
-            <t t-set="input_classes">p-0 border-0 text-center text-monospace bg-transparent text-white</t>
+            <t t-set="input_classes">p-0 text-center text-monospace bg-transparent text-white</t>
 
             <div class="o_hex_div bg-black-50 px-1 d-flex align-items-baseline">
                 <input type="text" t-attf-class="o_hex_input {{input_classes}}" data-color-method="hex" size="1"/>