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 d79056ad1f1..56e5e6149f6 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -602,12 +602,12 @@ $o-color-extras-nesting-selector: '&, .o_colored_level &';
 
 // Function which returns if a color has contrast enough in comparaison to
 // another given color.
-@function has-enough-contrast($color1, $color2) {
+@function has-enough-contrast($color1, $color2, $threshold: 500) {
     $r: (max(red($color1), red($color2))) - (min(red($color1), red($color2)));
     $g: (max(green($color1), green($color2))) - (min(green($color1), green($color2)));
     $b: (max(blue($color1), blue($color2))) - (min(blue($color1), blue($color2)));
     $sum-rgb: $r + $g + $b;
-    @return ($sum-rgb >= 500);
+    @return ($sum-rgb >= $threshold);
 }
 
 // Function which transforms a color to increase its contrast in comparison to
@@ -630,6 +630,39 @@ $o-color-extras-nesting-selector: '&, .o_colored_level &';
     @return $color1;
 }
 
+// Given a primary color (and eventually a secondary one), the function returns
+// a basic odoo palette in sass-map format. The palette will be generated using
+// the safest readability values possible.
+@function o-make-palette($-primary, $-secondary: null, $-overrides-map: null) {
+    $-o-color-2: $-secondary or increase-contrast(desaturate(mix(complement($-primary), #FFFFFF, 80%), 20%), $-primary);
+
+    $-palette: (
+        'o-color-1': $-primary,
+        'o-color-2': $-o-color-2,
+        'o-color-3': change-color(#F5F0F0, $hue: hue($-primary), $saturation: min(saturation($-primary), saturation(#F5F0F0))),
+        'o-color-4': #FFFFFF,
+        'o-color-5': change-color(#2e1414, $hue: hue($-primary), $saturation: min(saturation($-primary), saturation(#2e1414))),
+    );
+
+    // Check if primary/dark contrast is enough. If not adapt cc4 & cc5 schemes accordingly
+    @if not (has-enough-contrast(map-get($-palette, 'o-color-5'), map-get($-palette, 'o-color-1'), 300)) {
+        @each $-cc in (4, 5) {
+            $-palette: map-merge($-palette, (
+                'o-cc#{$-cc}-btn-primary': 'o-color-4',
+                'o-cc#{$-cc}-btn-secondary': 'o-color-2',
+                'o-cc#{$-cc}-text': 'o-color-3',
+                'o-cc#{$-cc}-link': 'o-color-4'
+            ));
+        }
+    }
+
+    @if $-overrides-map {
+        $-palette: map-merge($-palette, $-overrides-map);
+    }
+
+    @return $-palette;
+}
+
 // format: (module_name: (shape_filename: ('position': X, 'size': Y, 'colors': (1, [3], ...)), ...))
 $o-bg-shapes: ('web_editor': (
     'Airy/01': ('position': bottom, 'size': 100% auto, 'colors': (1)),