diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 6b9a4d577e5..ba70ecfce88 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -35,7 +35,11 @@
 <template id="web_editor.colorpicker" name="Color-Picker" groups="base.group_user">
     <colorpicker>
         <div class="o_colorpicker_section" data-name="theme">
-            <button t-foreach="5" t-as="i" t-attf-data-color="o-color-#{i + 1}"></button>
+            <button data-color="o-color-1"/>
+            <button data-color="o-color-3"/>
+            <button data-color="o-color-2"/>
+            <button data-color="o-color-4" class="ml-2"/>
+            <button data-color="o-color-5"/>
         </div>
         <div class="o_colorpicker_section" data-name="common">
             <button data-color="black"></button>
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 4a3b11b9f6b..b9dfacc6a19 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1237,13 +1237,13 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
             const btnEl = document.createElement('we-button');
             btnEl.classList.add('o_palette_color_preview_button');
             btnEl.dataset.customizeWebsiteVariable = `'${paletteName}'`;
-            for (let c = 1; c <= 5; c++) {
+            [1, 3, 2].forEach(c => {
                 const colorPreviewEl = document.createElement('span');
                 colorPreviewEl.classList.add('o_palette_color_preview');
                 const color = weUtils.getCSSVariableValue(`o-palette-${paletteName}-o-color-${c}`, style);
                 colorPreviewEl.style.backgroundColor = color;
                 btnEl.appendChild(colorPreviewEl);
-            }
+            });
             paletteSelectorEl.appendChild(btnEl);
         }
 
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 68d986d3e00..44cfd93c2bd 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -114,20 +114,33 @@ $i: 1;
 
 #oe_snippets > .o_we_customize_panel {
     .o_we_user_value_widget.o_palette_color_preview_button {
+        display: inline-flex;
+        margin: 1% 0;
+        padding-right: 0.3rem;
+        width: 50%;
+        background: transparent;
+
+        &.active, &:hover {
+            background: transparent;
+
+            > div {
+                box-shadow: 0 0 0 2px $o-we-bg-darkest, 0 0 0 3px $o-we-accent;
+            }
+        }
+
         > div {
             display: flex;
             flex: 1 1 auto;
             align-items: stretch;
+            justify-content: flex-end;
+            margin: 3px;
+            min-height: $o-we-sidebar-content-field-dropdown-grid-item-height * .5;
+            border-radius: $o-we-sidebar-content-field-dropdown-grid-item-height;
+            box-shadow: 0 0 0 1px $o-we-bg-darkest;
         }
+
         .o_palette_color_preview {
             flex: 1 0 0;
-            margin: 1px 0;
-            transition: flex 150ms ease 0s;
-        }
-        &:not(:hover) .o_palette_color_preview {
-            &:nth-child(4), &:nth-child(5) {
-                flex: 0 0 0;
-            }
         }
     }
 
@@ -183,7 +196,11 @@ $i: 1;
         .o_we_so_color_palette.o_we_user_value_widget {
 
             + .o_we_so_color_palette {
-                margin-left: 10px;
+                margin-left: $o-we-item-spacing * .5;
+
+                &:nth-child(4) {
+                    margin-left: $o-we-item-spacing * 3;
+                }
             }
             .o_we_color_preview {
                 width: $o-we-sidebar-content-field-colorpicker-size-large;
@@ -204,6 +221,12 @@ $i: 1;
             > div, we-toggler {
                 height: 100%;
             }
+
+            we-selection-items {
+                padding-top: $o-we-dropdown-item-height * .5;
+                padding-bottom: $o-we-dropdown-item-height * .5;
+                background: $o-we-dropdown-item-active-bg;
+            }
         }
         we-toggler {
             align-items: center;
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 5e43e150cc6..5ba530e5014 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1276,11 +1276,11 @@
             <we-colorpicker data-name="color_1_opt" title="Primary"
                             data-customize-website-color="" data-color="o-color-1"
                             data-use-css-color="true" data-selected-tab="custom-colors"/>
+            <we-colorpicker data-customize-website-color="" data-color="o-color-3"
+                            data-use-css-color="true" data-selected-tab="custom-colors"/>
             <we-colorpicker data-name="color_2_opt" title="Secondary"
                             data-customize-website-color="" data-color="o-color-2"
                             data-use-css-color="true" data-selected-tab="custom-colors"/>
-            <we-colorpicker data-customize-website-color="" data-color="o-color-3"
-                            data-use-css-color="true" data-selected-tab="custom-colors"/>
             <we-colorpicker data-customize-website-color="" data-color="o-color-4"
                             data-use-css-color="true" data-selected-tab="custom-colors"/>
             <we-colorpicker data-customize-website-color="" data-color="o-color-5"