diff --git a/addons/web_editor/static/src/js/wysiwyg_snippets/snippets.options.js b/addons/web_editor/static/src/js/wysiwyg_snippets/snippets.options.js
index 8ec600d14c5..1d140b677fd 100644
--- a/addons/web_editor/static/src/js/wysiwyg_snippets/snippets.options.js
+++ b/addons/web_editor/static/src/js/wysiwyg_snippets/snippets.options.js
@@ -703,6 +703,17 @@ registry.colorpicker = SnippetOption.extend({
         }
 
         var bgColor = ColorpickerDialog.formatColor(self.$target.css('background-color'));
+
+        // TODO refactor in master
+        // The primary and secondary are hardcoded here (but marked as hidden)
+        // so they can be removed from snippets when selecting another color.
+        // Normally, the chosable colors do not contain them, which prevents
+        // them to be removed. Indeed, normally, the 'alpha' and 'beta' colors
+        // (which are the same) are displayed instead... but not for all themes.
+        var $colorpicker = this.$el.find('.colorpicker');
+        $colorpicker.append($('<button/>', {'class': 'd-none', 'data-color': 'primary'}));
+        $colorpicker.append($('<button/>', {'class': 'd-none', 'data-color': 'secondary'}));
+
         var classes = [];
         this.$el.find('.colorpicker button').each(function () {
             var $color = $(this);