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 dcce62f367a..ee83068772e 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
@@ -359,9 +359,9 @@ const ColorPaletteWidget = Widget.extend({
      */
     _markSelectedColor: function () {
         this.el.querySelectorAll('button.selected').forEach(el => el.classList.remove('selected'));
-        const selectedButton = this.el.querySelector(`button[data-color="${this.selectedColor}"], button[style*="background-color:${this.selectedColor};"]`);
-        if (selectedButton) {
-            selectedButton.classList.add('selected');
+        const buttonToSelectEls = this.el.querySelectorAll(`button[data-color="${this.selectedColor}"], button[style*="background-color:${this.selectedColor};"]`);
+        for (const buttonToSelectEl of buttonToSelectEls) {
+            buttonToSelectEl.classList.add('selected');
         }
     },
     /**