diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss
index 52030130514..142cf2438d9 100644
--- a/addons/web_editor/static/src/scss/secondary_variables.scss
+++ b/addons/web_editor/static/src/scss/secondary_variables.scss
@@ -3,8 +3,23 @@
 // Colors
 //------------------------------------------------------------------------------
 
+// Color combinations
+$o-color-combinations: nth($o-color-combinations-presets, $o-color-combinations-preset-number) !default;
+$-combination-additions: ();
+@for $index from 1 through length($o-color-combinations) {
+    $combination: map-merge($o-base-color-combination, nth($o-color-combinations, $index));
+
+    @each $element, $color in $combination {
+        $-combination-additions: map-merge($-combination-additions, (
+            'o-cc#{$index}-#{$element}': $color,
+        ));
+    }
+}
+
 // Colors
 $o-color-palette: nth($o-color-palettes, $o-color-palette-number) !default;
+// Original color palette can contain override of the default combinations (so keep 'null' values for this merge)
+$o-color-palette: map-merge($-combination-additions, $o-color-palette);
 $o-color-palette: map-merge($o-base-color-palette, o-map-omit($o-color-palette));
 
 // Theme colors
@@ -32,9 +47,6 @@ $o-gray-color-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number)
 $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));
 
-// Color combinations
-$o-color-combinations: nth($o-color-combinations-presets, $o-color-combinations-preset-number) !default;
-
 $o-color-system-initialized: false;
 
 // Returns:
@@ -50,9 +62,23 @@ $o-color-system-initialized: false;
     }
     @return false;
 }
+@function use-cc-bg($name) {
+    @if type-of($name) == 'number' {
+        // Preset number, let's return the background color of the related
+        // preset.
+        @return 'o-cc#{$name}-bg';
+    }
+    @return $name;
+}
 // Looks up for the color related to the given name in the related odoo palettes
 // following redirection a maximum number of time (by default none).
-@function o-related-color($name, $max-recursions: 0, $original-name: $name) {
+@function o-related-color($name, $max-recursions: 0, $original-name: $name, $use-cc-bg: false) {
+    @if $use-cc-bg {
+        $name: use-cc-bg($name);
+    } @else if type-of($name) == 'number' {
+        @return $name;
+    }
+
     @if $max-recursions < 0 or check-color-identifier-type($name) {
         @return $name;
     }
@@ -71,6 +97,8 @@ $o-color-system-initialized: false;
 // either in $theme-colors, $grays or $colors maps. If those maps are not
 // initialized yet, it will look up the color in the related odoo palettes.
 @function o-color($name) {
+    $name: use-cc-bg($name);
+
     @if check-color-identifier-type($name) {
         @return $name;
     }
@@ -91,5 +119,5 @@ $o-color-system-initialized: false;
     }
 
     // If not initialized, search the css color value in selected color palettes
-    @return o-related-color($name, $max-recursions: 10);
+    @return o-related-color($name, $max-recursions: 10, $use-cc-bg: true);
 }
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index fbaa1557fa0..89fde8cba22 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -542,20 +542,19 @@ blockquote {
     }
 }
 @for $index from 1 through length($o-color-combinations) {
-    $config: nth($o-color-combinations, $index);
-    $-bg: map-get($config, 'bg');
-    $-text: map-get($config, 'text');
-    $-headings: map-get($config, 'headings');
-    $-h2: map-get($config, 'h2');
-    $-h3: map-get($config, 'h3');
-    $-h4: map-get($config, 'h4');
-    $-h5: map-get($config, 'h5');
-    $-h6: map-get($config, 'h6');
-    $-link: map-get($config, 'link');
-    $-btn-primary: map-get($config, 'btn-primary');
-    $-btn-primary-border: map-get($config, 'btn-primary-border');
-    $-btn-secondary: map-get($config, 'btn-secondary');
-    $-btn-secondary-border: map-get($config, 'btn-secondary-border');
+    $-bg: color('o-cc#{$index}-bg');
+    $-text: color('o-cc#{$index}-text');
+    $-headings: color('o-cc#{$index}-headings');
+    $-h2: color('o-cc#{$index}-h2');
+    $-h3: color('o-cc#{$index}-h3');
+    $-h4: color('o-cc#{$index}-h4');
+    $-h5: color('o-cc#{$index}-h5');
+    $-h6: color('o-cc#{$index}-h6');
+    $-link: color('o-cc#{$index}-link');
+    $-btn-primary: color('o-cc#{$index}-btn-primary');
+    $-btn-primary-border: color('o-cc#{$index}-btn-primary-border');
+    $-btn-secondary: color('o-cc#{$index}-btn-secondary');
+    $-btn-secondary-border: color('o-cc#{$index}-btn-secondary-border');
 
     // Those color classes color multiple elements when applied on a snippet.
     // Those rules are not important so that they can be overridden through
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 ecfda70dd87..3be0284d254 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -371,46 +371,43 @@ $o-gray-color-palettes: (
 $o-gray-color-palette-number: 1 !default;
 
 // Color combinations
+$o-base-color-combination: (
+    'bg': 'white',
+    'text': null, // Default to better contrast with the 'bg'
+    'headings': null, // Default to 'text'
+    'h2': null, // Default to 'h(x-1)'
+    'h3': null,
+    'h4': null,
+    'h5': null,
+    'h6': null,
+    'link': null, // Default to BS 'primary' (= first odoo color)
+    'btn-primary': null, // Default to BS 'primary' (= first odoo color)
+    'btn-primary-border': null, // Default to 'btn-primary'
+    'btn-secondary': null, // Default to BS 'secondary' (= second odoo color)
+    'btn-secondary-border': null, // Default to 'btn-secondary'
+);
 $o-color-combinations-presets: (
     (
         (
-            'bg': #FFFFFF,
-            'text': null,
-            'headings': null,
-            'link': null,
-            'btn-primary': null,
-            'btn-secondary': null,
+            // See $o-base-color-combination
         ),
         (
             'bg': 'gamma',
-            'text': null,
             'headings': 'alpha',
-            'link': null,
-            'btn-primary': null,
-            'btn-secondary': null,
         ),
         (
             'bg': 'beta',
-            'text': null,
-            'headings': null,
-            'link': null,
-            'btn-primary': null,
             'btn-secondary': 'gamma',
         ),
         (
             'bg': 'alpha',
-            'text': null,
-            'headings': null,
             'link': 'epsilon',
             'btn-primary': 'epsilon',
             'btn-secondary': 'gamma',
         ),
         (
             'bg': 'epsilon',
-            'text': null,
             'headings': 'delta',
-            'link': null,
-            'btn-primary': null,
             'btn-secondary': 'gamma',
         ),
     ),