diff --git a/addons/web/static/src/js/widgets/colorpicker.js b/addons/web/static/src/js/widgets/colorpicker.js
index 6839993444c..7a0fc565f15 100644
--- a/addons/web/static/src/js/widgets/colorpicker.js
+++ b/addons/web/static/src/js/widgets/colorpicker.js
@@ -102,6 +102,17 @@ var ColorpickerWidget = Widget.extend({
         this._super.apply(this, arguments);
         $(document).off(`.${this.uniqueId}`);
     },
+    /**
+     * Sets the currently selected color
+     *
+     * @param {string} color rgb[a]
+     */
+    setSelectedColor: function (color) {
+        var rgba = ColorpickerWidget.convertCSSColorToRgba(color);
+        if (rgba) {
+            this._updateRgba(rgba.red, rgba.green, rgba.blue, rgba.opacity);
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index b2560676503..4933be94360 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1320,7 +1320,7 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
     async setValue(color) {
         await this._super(...arguments);
 
-        await this._renderColorPalette();
+        this.colorPalette.setSelectedColor(this._value);
 
         const classes = weUtils.computeColorClasses(this.colorPalette.getColorNames());
         this.colorPreviewEl.classList.remove(...classes);
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 fe97d3fa700..9177863e758 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
@@ -155,6 +155,14 @@ const ColorPaletteWidget = Widget.extend({
     getColorNames: function () {
         return this.colorNames;
     },
+    /**
+     * Sets the currently selected color
+     *
+     * @param {string} color rgb[a]
+     */
+    setSelectedColor: function (color) {
+        this._selectColor({color: color});
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -257,13 +265,16 @@ const ColorPaletteWidget = Widget.extend({
      * Set the selectedColor and trigger an event
      *
      * @param {Object} color
-     * @param {string} eventName
+     * @param {string} [eventName]
      */
     _selectColor: function (colorInfo, eventName) {
         this.selectedColor = colorInfo.color = this.colorToColorNames[colorInfo.color] || colorInfo.color;
-        this.trigger_up(eventName, colorInfo);
+        if (eventName) {
+            this.trigger_up(eventName, colorInfo);
+        }
         this._buildCustomColors();
         this._markSelectedColor();
+        this.colorPicker.setSelectedColor(colorInfo.color);
     },
     /**
      * Mark the selected color