diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index 256ab8590ab..54aecb885d6 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -1039,4 +1039,13 @@ export class ColorPalette extends Component {
         this._updateGradient();
         this._activateGradientSlider($(this.pickers['custom_gradient'].querySelector('.o_slider_multi input')));
     }
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onColorpickerClick(ev) {
+        if (ev.target.matches(".o_colorpicker_section, .o_colorpicker_sections")) {
+            ev.stopPropagation();
+        }
+    }
 }
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index e6a08a9e1ac..d4623f8bf8c 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -60,7 +60,7 @@
     </t>
 
     <!-- options -->
-    <div t-name="web_editor.ColorPalette" class="colorpicker" t-ref="el">
+    <div t-name="web_editor.ColorPalette" class="colorpicker" t-ref="el" t-on-click="this._onColorpickerClick">
         <div class="o_we_colorpicker_switch_panel d-flex justify-content-end px-2">
             <t t-set="first_button_name"><t t-if="props.withCombinations">Theme</t><t t-else="">Solid</t></t>
             <button type="button" tabindex="1" class="o_we_colorpicker_switch_pane_btn" t-attf-data-target="#{props.withCombinations ? 'color-combinations' : 'theme-colors'}"