diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss
index ddefb550daa..e90c3452133 100644
--- a/addons/web_editor/static/src/scss/secondary_variables.scss
+++ b/addons/web_editor/static/src/scss/secondary_variables.scss
@@ -129,3 +129,14 @@ $o-we-auto-contrast-exclusions: () !default;
     }
     @return increase-contrast($color1, $color2);
 }
+
+// Replace invalid characters used for colors in url.
+// (e.g. "rgba(0, 0, 0, .5)" or "#111111").
+@function encode-color($colors) {
+    $colors: str-replace($colors, '#', '%23');
+    $colors: str-replace($colors, '(', '%28');
+    $colors: str-replace($colors, ')', '%29');
+    $colors: str-replace($colors, ',', '%2C');
+    $colors: str-replace($colors, ' ', '%20');
+    @return $colors;
+}
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 949a217c063..403946386f2 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -966,8 +966,7 @@ section, .oe_img_bg, [data-oe-shape-data] {
     $url-params: '';
     @each $i in $colors {
         $mapped-color: map-get($color-to-cc-bg-map, $i);
-        // %23 is the url-encoded form of '#'
-        $color: str-replace("#{o-color($mapped-color)}", '#', '%23');
+        $color: encode-color(#{o-color($mapped-color)});
         $url-params: '#{$url-params}&c#{$i}=#{$color}';
     }
     @return $url-params;