diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss
index 40d89b2f878..22cf5427d06 100644
--- a/addons/web_editor/static/src/scss/web_editor.frontend.scss
+++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss
@@ -47,8 +47,9 @@
         @each $shape, $style in $shapes {
             $url-params: '';
             $colors: map-get($style, 'colors');
+            $color-to-cc-bg-map: map-merge($default-color-to-cc-bg-map, map-get($style, 'color-to-cc-bg-map') or ());
             @each $i in $colors {
-                $cc: map-get($default-color-to-cc-bg-map, $i);
+                $cc: map-get($color-to-cc-bg-map, $i);
                 // %23 is the url-encoded form of '#'
                 $color: str-replace("#{o-color('o-cc#{$cc}-bg')}", '#', '%23');
                 $url-params: '#{$url-params}&c#{$i}=#{$color}';
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 abae495638a..ae7329c00c6 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -750,3 +750,13 @@ $o-bg-shapes: ('web_editor': (
     'Zigs/04': ('position': bottom, 'size': 100% auto, 'colors': (1), 'repeat-y': false),
     'Zigs/05': ('position': bottom, 'size': 100% auto, 'colors': (3), 'repeat-y': false),
 ));
+
+@function change-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) {
+    $-module-shapes: map-get($shapes, $module);
+    $-modified-module-shapes: map-merge($-module-shapes, (
+        $shape-name: map-merge(map-get($-module-shapes, $shape-name), ('color-to-cc-bg-map': $mapping)),
+    ));
+    @return map-merge($shapes, (
+        $module: $-modified-module-shapes,
+    ));
+}