diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
index 19ced6c9d8f..e69de29bb2d 100644
--- a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
@@ -1,3 +0,0 @@
-
-$black: black;
-$white: white;
diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js
index 7b02703260b..3ccba2da261 100644
--- a/addons/web_editor/static/src/js/widgets/widgets.js
+++ b/addons/web_editor/static/src/js/widgets/widgets.js
@@ -1164,7 +1164,7 @@ var MediaDialog = Dialog.extend({
                 self.$media = self.$media.parent();
                 self.media = self.$media[0];
                 tabToShow = 'video';
-            } 
+            }
             self.$('[href="#editor-media-' + tabToShow + '"]').tab('show');
         });
 
@@ -1457,6 +1457,21 @@ var LinkDialog = Dialog.extend({
             this.$('input[name="url"]').val(match ? match[1] : this.data.url);
         }
 
+        // Hide the duplicate color buttons (most of the times, primary = alpha
+        // and secondary = beta for example but this may depend on the theme)
+        this.opened().then(function () {
+            var colors = [];
+            _.each(self.$('.o_btn_preview'), function (btn) {
+                var $btn = $(btn);
+                var color = $btn.css('background-color');
+                if (_.contains(colors, color)) {
+                    $btn.remove();
+                } else {
+                    colors.push(color);
+                }
+            });
+        });
+
         this._adaptPreview();
 
         this.$('input:visible:first').focus();
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index 15309f4de7f..2a0b900b10c 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -1,3 +1,5 @@
+// Hacky way to detect if its the backend or not
+$-is-backend: variable-exists('primary');
 
 // Automatically update bootstrap colors map (unused by BS itself)
 $-palette: nth($o-color-palettes, $o-color-palette-number);
@@ -6,28 +8,75 @@ $colors: map-merge($-palette, $colors);
 
 // Automatically extend bootstrap to create theme background/text/button classes
 $-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number);
-$-main-color: map-get($-palette, 'primary');
+$-main-color: map-get($-palette, 'alpha');
 $-main-color-lightness: lightness($-main-color);
-$-palette: map-merge($-palette, (
-    // Compatibility: alpha and beta color exist but will now always be
-    // equal to primary and secondary colors
-    alpha: $-main-color,
-    beta: map-get($-palette, 'secondary'),
+$-palette: map-merge((
+    // alpha and beta colors are used to override primary and secondary BS4
+    // colors by default, so that theme colors affect the default Odoo layouts
+    primary: $-main-color,
+    secondary: map-get($-palette, 'beta'),
 
     // BS light and dark colors are not used for any BS component, just
     // for color utilities. By default, we set them to a very light and
-    // very dark version of a desaturate version of the primary color 
+    // very dark version of a desaturate version of the primary color
     light: lighten(desaturate($-main-color, 40%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
     dark: darken(desaturate($-main-color, 40%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
-));
+), $-palette);
+@if $-is-backend {
+    $-palette: map-remove($-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
+}
 $theme-colors: () !default;
 $theme-colors: map-merge($-palette, $theme-colors);
 
 // Extend grays with transparent ones (for some reason, BS4 create black-50 and
-// white-50 but does not allow overridding that with variables). Also add black
-// and white ones too as they were also not added by BS4...
+// white-50 but does not allow overridding that with variables), also use the
+// theme gray palette (which is supposed to at least declare white and black).
+$-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number);
+$-palette: map-merge($o-transparent-grays, $-palette);
+@if $-is-backend {
+    $-palette: map-remove($-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900');
+}
 $grays: () !default;
-$grays: map-merge(map-merge($o-transparent-grays, (
-    black: $black, // Note: those two needs to be redefined before bootstrap,
-    white: $white, // otherwise they do not exist yet
-)), $grays);
+$grays: map-merge($-palette, $grays);
+
+// Bootstrap use standard variables to define individual colors which are then
+// placed into a map which is then used to get the value of each individual
+// color. As BS4 allows to extend the map a priori to define our own colors,
+// it does not take care of making the standard variables match the values in
+// the user's map. The problem is that, at least for grays, bootstrap uses the
+// standard variables in its _variables.scss file, so if:
+//
+// User file:
+// $grays: (
+//     '100': blue,
+// );
+//
+// BS4:
+// $gray-100: gray !default;
+// $grays: () !default;
+// $grays: map-merge((
+//     '100': $gray-100,
+// ), $grays);
+//
+// -> Here gray('100') is blue but $gray-100 is still gray... so BS4 is not
+// correctly generated as BS4 uses $gray-100 in _variables.scss
+$primary: theme-color('primary') !default;
+$secondary: theme-color('secondary') !default;
+$success: theme-color('success') !default;
+$info: theme-color('info') !default;
+$warning: theme-color('warning') !default;
+$danger: theme-color('danger') !default;
+$light: theme-color('light') !default;
+$dark: theme-color('dark') !default;
+
+$white: gray('white') !default;
+$gray-100: gray('100') !default;
+$gray-200: gray('200') !default;
+$gray-300: gray('300') !default;
+$gray-400: gray('400') !default;
+$gray-500: gray('500') !default;
+$gray-600: gray('600') !default;
+$gray-700: gray('700') !default;
+$gray-800: gray('800') !default;
+$gray-900: gray('900') !default;
+$black: gray('black') !default;
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
deleted file mode 100644
index 114d49c8dd4..00000000000
--- a/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-
-// Hacky way to prevent our web_editor/website themes to affect the backend UI but
-// still allow to define extra colors for backend HTML editors
-$theme-colors: map-remove($theme-colors, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index eff996bea20..730041fbb5f 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -230,8 +230,8 @@ $o-color-palette-number: 1;
 // Theme colors
 $o-theme-color-palettes: (
     (
-        primary: $o-enterprise-primary-color,
-        secondary: $o-enterprise-color,
+        alpha: $o-enterprise-primary-color,
+        beta: $o-enterprise-color,
         gamma: #5C5B80,
         delta: #5B899E,
         epsilon: #E46F78,
@@ -248,7 +248,13 @@ $o-transparent-grays: (
     white-50: rgba(white, 0.5),
     white-75: rgba(white, 0.75),
 ) !default;
-
+$o-gray-color-palettes: (
+    (
+        'white': #FFFFFF, // Those two will enforce the creation of bg-white
+        'black': #000000, // and bg-black classes.
+    ),
+) !default;
+$o-gray-color-palette-number: 1;
 
 // Translations
 $o-we-content-to-translate-color: rgb(255, 255, 90) !default;
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index b3d1763ca71..fe51450dac9 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -278,7 +278,7 @@
                                 <input class="d-none link-style" name="link_style_color" type="radio" value=""/>
                                 <i class="fa"/>
                             </label>
-                            <t t-foreach="['primary', 'secondary', 'gamma', 'delta', 'epsilon', 'success', 'info', 'warning', 'danger']" t-as="color">
+                            <t t-foreach="['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'primary', 'secondary', 'success', 'info', 'warning', 'danger']" t-as="color">
                                 <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-#{color}" t-attf-aria-label="Color for #{color}" t-attf-title="Color for #{color}">
                                     <input type="radio" name="link_style_color" class="d-none link-style" t-att-value="color"/>
                                     <i class="fa"/>
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index c9a3ddfccd0..9cd1a34bd4d 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -69,7 +69,6 @@
 <template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
-        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden_backend.scss"/>
     </xpath>
 </template>
 
@@ -154,8 +153,8 @@
 <template id="web_editor.colorpicker" name="Color-Picker">
     <colorpicker>
         <div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask">
-            <button data-color="primary"></button>
-            <button data-color="secondary"></button>
+            <button data-color="alpha"></button>
+            <button data-color="beta"></button>
             <button data-color="gamma"></button>
             <button data-color="delta"></button>
             <button data-color="epsilon"></button>
diff --git a/addons/website/static/src/js/tours/customize.js b/addons/website/static/src/js/tours/customize.js
index 510b9f12975..c1e1f185f2c 100644
--- a/addons/website/static/src/js/tours/customize.js
+++ b/addons/website/static/src/js/tours/customize.js
@@ -11,7 +11,7 @@ tour.register('theme_customize', {
     url: '/',
     wait_for: base.ready(),
 }, [{
-    trigger: 'button.o_theme_customize_color_primary',
+    trigger: 'button.o_theme_customize_color_primary, button.o_theme_customize_color_alpha',
     content: _t("Click here to choose your main branding color.<br/>It will recompute the palette with suggested matching colors."),
     position: 'bottom',
 }]);
diff --git a/addons/website/static/src/js/widgets/theme.js b/addons/website/static/src/js/widgets/theme.js
index ce73fd35d3d..e2879fb25c6 100644
--- a/addons/website/static/src/js/widgets/theme.js
+++ b/addons/website/static/src/js/widgets/theme.js
@@ -62,6 +62,27 @@ var ThemeCustomizeDialog = Dialog.extend({
         var $tabs = this.$('[data-toggle="tab"]');
         this.opened().then(function () {
             $tabs.eq(self.defaultTab).tab('show');
+
+            var $colorPreview = self.$('.o_theme_customize_color_previews:visible');
+            var $primary = $colorPreview.find('.o_theme_customize_color[data-color="primary"]');
+            var $alpha = $colorPreview.find('.o_theme_customize_color[data-color="alpha"]');
+            var $secondary = $colorPreview.find('.o_theme_customize_color[data-color="secondary"]');
+            var $beta = $colorPreview.find('.o_theme_customize_color[data-color="beta"]');
+            var sameAlphaPrimary = $primary.find('.o_color_preview').css('background-color') === $alpha.find('.o_color_preview').css('background-color');
+            var sameBetaSecondary = $secondary.find('.o_color_preview').css('background-color') === $beta.find('.o_color_preview').css('background-color');
+            if (!sameAlphaPrimary) {
+                $alpha.find('.o_color_name').text(_t("Extra Color"));
+                $primary.removeClass('d-none').addClass('d-flex');
+            }
+            if (!sameBetaSecondary) {
+                $beta.find('.o_color_name').text(_t("Extra Color"));
+                $secondary.removeClass('d-none').addClass('d-flex');
+            }
+            if (!sameAlphaPrimary && sameBetaSecondary) {
+                $beta.insertBefore($alpha);
+            } else if (sameAlphaPrimary && !sameBetaSecondary) {
+                $secondary.insertAfter($alpha);
+            }
         });
 
         // Hide the tab navigation if only one tab
@@ -153,6 +174,9 @@ var ThemeCustomizeDialog = Dialog.extend({
                             reload: $item.data('reload'),
                         }));
 
+                        $multiChoiceLabel.find('.o_theme_customize_color[data-color="primary"]').addClass('d-none').removeClass('d-flex');
+                        $multiChoiceLabel.find('.o_theme_customize_color[data-color="secondary"]').addClass('d-none').removeClass('d-flex');
+
                         if ($container.hasClass('form-row')) {
                             var $col = $('<div/>', {class: (icon ? 'col-4' : (colorPalette ? 'col-12' : 'col-6'))});
                             $col.append($multiChoiceLabel);
@@ -214,8 +238,8 @@ var ThemeCustomizeDialog = Dialog.extend({
             params: {
                 xml_ids: this._getXMLIDs(this.$inputs),
             },
-        }).done(function (data) {      
-            self.$inputs.prop('checked', false);      
+        }).done(function (data) {
+            self.$inputs.prop('checked', false);
             _.each(self.$inputs.filter('[data-xmlid]:not([data-xmlid=""])'), function (input) {
                 var $input = $(input);
                 if (!_.difference(self._getXMLIDs($input), data[0]).length) {
@@ -454,7 +478,7 @@ var ThemeCustomizeDialog = Dialog.extend({
         var colorType = $color.data('colorType');
 
         var colorpicker = new ColorpickerDialog(this, {
-            defaultColor: $color.find('span').css('background-color'),
+            defaultColor: $color.find('.o_color_preview').css('background-color'),
         });
         colorpicker.on('colorpicker:saved', this, function (ev) {
             ev.stopPropagation();
@@ -551,4 +575,4 @@ var ThemeCustomizeMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
 websiteNavbarData.websiteNavbarRegistry.add(ThemeCustomizeMenu, '#theme_customize');
 
 return ThemeCustomizeDialog;
-});
\ No newline at end of file
+});
diff --git a/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss b/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss
index dc57b44bd5d..88c0847ae04 100644
--- a/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss
+++ b/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss
@@ -1,15 +1,20 @@
 
 $o-user-theme-color-palette: map-merge((
     // Theme colors
-    primary: null,
-    secondary: null,
+    alpha: null,
+    beta: null,
     gamma: null,
     epsilon: null,
     delta: null,
 
+    // Depending on the theme, alpha and beta may not be equal to
+    // primary and secondary
+    primary: null,
+    secondary: null,
+
     // BS state colors
     success: null,
     info: null,
     warning: null,
-    danger: null,    
+    danger: null,
 ), o-map-omit($o-user-theme-color-palette));
diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss
index 06b19ce4090..762b498b75e 100644
--- a/addons/website/static/src/scss/secondary_variables.scss
+++ b/addons/website/static/src/scss/secondary_variables.scss
@@ -8,14 +8,14 @@
 $-palette-1: nth($o-color-palettes, 1);
 $o-color-palettes: append($o-color-palettes, map-merge($-palette-1, o-map-omit($o-user-color-palette)));
 
-// Generate default theme color scheme if primary is set
-$-primary: map-get($o-user-theme-color-palette, 'primary');
-@if ($-primary) {
+// Generate default theme color scheme if alpha is set
+$-alpha: map-get($o-user-theme-color-palette, 'alpha');
+@if ($-alpha) {
     $o-user-theme-color-palette: map-merge($o-user-theme-color-palette, map-merge((
-        secondary: lighten(desaturate($-primary, 60%), 30%),
-        gamma: desaturate(adjust-hue($-primary, -45deg), 10%),
-        delta: desaturate(adjust-hue($-primary, 45deg), 10%),
-        epsilon: desaturate(adjust-hue($-primary, 180deg), 10%),
+        beta: lighten(desaturate($-alpha, 60%), 30%),
+        gamma: desaturate(adjust-hue($-alpha, -45deg), 10%),
+        delta: desaturate(adjust-hue($-alpha, 45deg), 10%),
+        epsilon: desaturate(adjust-hue($-alpha, 180deg), 10%),
     ), o-map-omit($o-user-theme-color-palette)));
 }
 
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 15baaa1f514..56cac3b3feb 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -29,7 +29,7 @@
             <div t-if="colorPalette" class="o_theme_customize_color_previews" t-att-data-depends="id">
                 <div>
                     <h6>Main colors</h6>
-                    <t t-foreach="{'primary': _t('Primary'), 'secondary': _t('Secondary'), 'gamma': _t('Extra Color 1'), 'delta': _t('Extra Color 2'), 'epsilon': _t('Extra Color 3')}" t-as="color">
+                    <t t-foreach="{'primary': _t('Primary'), 'secondary': _t('Secondary'), 'alpha': _t('Primary'), 'beta': _t('Secondary'), 'gamma': _t('Extra Color'), 'delta': _t('Extra Color'), 'epsilon': _t('Extra Color')}" t-as="color">
                         <t t-call="website.theme_customize_color_palette_button">
                             <t t-set="color_type" t-value="'theme'"/>
                         </t>
@@ -66,7 +66,7 @@
             t-attf-class="btn btn-sm btn-secondary d-flex align-items-center w-100 mt-2 justify-content-between o_theme_customize_color o_theme_customize_color_#{color}"
             t-att-data-color="color"
             t-att-data-color-type="color_type">
-            <t t-esc="color_value"/>
+            <span class="o_color_name"><t t-esc="color_value"/></span>
             <span t-attf-class="o_color_preview bg-#{color}"/>
         </button>
     </t>