diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
index 14f787c2a6c..b35e723a7a4 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
@@ -42,6 +42,7 @@ const LinkTools = Link.extend({
         // Keep track of each selected custom color and colorpicker.
         this.customColors = {};
         this.colorpickers = {};
+        this.colorpickersPromises = {};
     },
     /**
      * @override
@@ -227,6 +228,7 @@ const LinkTools = Link.extend({
         }[cssProperty];
 
         let colorpicker = this.colorpickers[cssProperty];
+        await this.colorpickersPromises[cssProperty];
         if (!colorpicker) {
             colorpicker = new ColorPaletteWidget(this, {
                 excluded: ['transparent_grayscale'],
@@ -239,7 +241,8 @@ const LinkTools = Link.extend({
                 'background-color': '.link-custom-color-fill .dropdown-menu',
                 'border-color': '.link-custom-color-border .o_we_so_color_palette .dropdown-menu',
             }[cssProperty]);
-            await colorpicker.appendTo($(target));
+            this.colorpickersPromises[cssProperty] = colorpicker.appendTo($(target));
+            await this.colorpickersPromises[cssProperty];
             colorpicker.on('custom_color_picked color_picked color_hover color_leave', this, (ev) => {
                 // Reset color styles in link content to make sure new color is not hidden.
                 // Only done when applied to avoid losing state during preview.