diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss
index e4355eeaa2b..fa8f1a39120 100644
--- a/addons/web_editor/static/src/scss/secondary_variables.scss
+++ b/addons/web_editor/static/src/scss/secondary_variables.scss
@@ -5,6 +5,7 @@
 
 // Colors
 $o-color-palette: nth($o-color-palettes, $o-color-palette-number) !default;
+$o-color-palette: map-merge($o-base-color-palette, o-map-omit($o-color-palette));
 @function palette-color($key) {
     @return map-get($o-color-palette, $key);
 }
@@ -25,6 +26,7 @@ $o-theme-color-palette: map-merge((
     'light': lighten(desaturate($-main-color, 80%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
     'dark': darken(desaturate($-main-color, 80%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
 ), o-map-omit($o-theme-color-palette));
+$o-theme-color-palette: map-merge($o-base-theme-color-palette, o-map-omit($o-theme-color-palette));
 @function palette-theme-color($key) {
     @return map-get($o-theme-color-palette, $key);
 }
@@ -33,7 +35,8 @@ $o-theme-color-palette: map-merge((
 // Extend grays with transparent ones (for some reason, BS4 create black-50 and
 // white-50 but does not allow overridding that with variables).
 $o-gray-color-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number) !default;
-$o-gray-color-palette: map-merge($o-transparent-grays, $o-gray-color-palette);
+$o-gray-color-palette: map-merge($o-transparent-grays, o-map-omit($o-gray-color-palette));
+$o-gray-color-palette: map-merge($o-base-gray-color-palette, o-map-omit($o-gray-color-palette));
 @function palette-gray($key) {
     @return map-get($o-gray-color-palette, $key);
 }
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 5abbc9ac284..97951f635cd 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -281,15 +281,26 @@ $o-we-toolbar-height: 32px;
 
 // Edition colors
 
-// Colors
-$o-color-palettes: (
-    (
+// Note: the "base" palettes contain all possible keys a palette should or
+// must contain, with a default value which should work in use cases where it
+// will be used. Any palette defined by an app will be merged with the base
+// palette once selected to ensure it works.
 
-    ),
+// Colors
+$o-base-color-palette: () !default;
+$o-color-palettes: (
+    (),
 ) !default;
-$o-color-palette-number: 1;
+$o-color-palette-number: 1 !default;
 
 // Theme colors
+$o-base-theme-color-palette: (
+    'alpha': white,
+    'beta': white,
+    'gamma': white,
+    'delta': white,
+    'epsilon': white,
+) !default;
 $o-theme-color-palettes: (
     (
         'alpha': $o-enterprise-primary-color,
@@ -299,9 +310,13 @@ $o-theme-color-palettes: (
         'epsilon': #E46F78,
     ),
 ) !default;
-$o-theme-color-palette-number: 1;
+$o-theme-color-palette-number: 1 !default;
 
 // Greyscale transparent colours
+$o-base-gray-color-palette: (
+    'white': #FFFFFF, // Those two will enforce the creation of bg-white
+    'black': #000000, // and bg-black classes.
+) !default;
 $o-transparent-grays: (
     'black-15': rgba(black, 0.15),
     'black-25': rgba(black, 0.25),
@@ -313,12 +328,9 @@ $o-transparent-grays: (
     'white-85': rgba(white, 0.85),
 ) !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;
+$o-gray-color-palette-number: 1 !default;
 
 // Translations
 $o-we-content-to-translate-color: rgb(255, 255, 90) !default;
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 367188a8053..e7e6bb7d081 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -4,23 +4,18 @@ $o-theme-layout: 'full';
 // Colors
 //------------------------------------------------------------------------------
 
-// Extend default color palettes with website-related colors
-$-palettes: ();
-@each $palette in $o-color-palettes {
-    $-palettes: append($-palettes, map-merge((
-        'body': $o-portal-default-body-bg,
-        'menu': #F9F9F9,
-        'footer': #F9F9F9,
-        'text': null, // Default to bootstrap
-        'h1': null, // Default to text
-        'h2': null, // Default to h1
-        'h3': null, // Default to h2
-        'h4': null, // Default to h3
-        'h5': null, // Default to h4
-        'h6': null, // Default to h5
-    ), $palette));
-}
-$o-color-palettes: $-palettes;
+$o-base-color-palette: map-merge($o-base-color-palette, (
+    'body': $o-portal-default-body-bg,
+    'menu': #F9F9F9,
+    'footer': #F9F9F9,
+    'text': null, // Default to bootstrap
+    'h1': null, // Default to text
+    'h2': null, // Default to h1
+    'h3': null, // Default to h2
+    'h4': null, // Default to h3
+    'h5': null, // Default to h4
+    'h6': null, // Default to h5
+));
 
 // By default, all user color palette values are null. Each null value is
 // automatically replaced with corresponsing color of chosen color palette.
@@ -49,16 +44,17 @@ $o-theme-figcaption-opacity: 0.6;
 // Website customizations
 //------------------------------------------------------------------------------
 
+$o-base-website-values-palette: (
+    'logo-height': null, // Default to navbar height (see portal)
+    'header-font-size': null, // Default to BS (normal font-size)
+    'font-number': 1,
+    'headings-font-number': 1,
+    'navbar-font-number': 1,
+    'buttons-font-number': 1,
+    'google-fonts': null,
+);
 $o-website-values-palettes: (
-    (
-        'logo-height': null, // Default to navbar height (see portal)
-        'header-font-size': null, // Default to BS (normal font-size)
-        'font-number': 1,
-        'headings-font-number': 1,
-        'navbar-font-number': 1,
-        'buttons-font-number': 1,
-        'google-fonts': null,
-    ),
+    (),
 ) !default;
 $o-website-values-palette-number: 1 !default;
 
diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss
index e1a8f4462cf..5f3d6704c85 100644
--- a/addons/website/static/src/scss/secondary_variables.scss
+++ b/addons/website/static/src/scss/secondary_variables.scss
@@ -6,11 +6,12 @@
 // Color palette
 // -------------
 
-// By default, all user color palette values are null. Each null value is
+// By default, most user color palette values are null. Each null value is
 // automatically replaced with corresponsing colors in chosen default color
 // palette.
 $-palette-default: nth($o-color-palettes, $o-color-palette-number);
-$o-color-palettes: append($o-color-palettes, map-merge($-palette-default, o-map-omit($o-user-color-palette)));
+$-actual-user-color-palette: map-merge($-palette-default, o-map-omit($o-user-color-palette));
+$o-color-palettes: append($o-color-palettes, $-actual-user-color-palette);
 
 // Theme color palette
 // -------------------
@@ -30,8 +31,10 @@ $-alpha: map-get($o-user-theme-color-palette, 'alpha');
 // automatically replaced with corresponsing colors in chosen default theme
 // color palette.
 $-palette-default: nth($o-theme-color-palettes, $o-theme-color-palette-number);
-$o-theme-color-palettes: append($o-theme-color-palettes, map-merge($-palette-default, o-map-omit($o-user-theme-color-palette)));
+$-actual-user-theme-color-palette: map-merge($-palette-default, o-map-omit($o-user-theme-color-palette));
+$o-theme-color-palettes: append($o-theme-color-palettes, $-actual-user-theme-color-palette);
 
+// ---
 
 // Enable last color and theme color palettes, which are now the user customized
 // color palettes.
@@ -42,10 +45,18 @@ $o-theme-color-palette-number: length($o-theme-color-palettes);
 // Website customizations
 //------------------------------------------------------------------------------
 
+// By default, most website palette values are null. Each null value is
+// automatically replaced with corresponsing values in chosen default values
+// palette.
 $-website-values-default: nth($o-website-values-palettes, $o-website-values-palette-number);
-$o-website-values: map-merge($-website-values-default, o-map-omit($o-user-website-values)) !default;
-$o-website-values-palettes: append($o-website-values-palettes, $o-website-values);
+$-actual-user-website-values-palette: map-merge($-website-values-default, o-map-omit($o-user-website-values));
+$o-website-values-palettes: append($o-website-values-palettes, $-actual-user-website-values-palette);
+
+// Enable last website values palette, which is now the user customized one
 $o-website-values-palette-number: length($o-website-values-palettes);
+
+$o-website-values: nth($o-website-values-palettes, $o-website-values-palette-number) !default;
+$o-website-values: map-merge($o-base-website-values-palette, o-map-omit($o-website-values));
 @function o-website-value($key) {
     @return map-get($o-website-values, $key);
 }