diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 007741226b8..d7ee2e50fb7 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1611,11 +1611,7 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
         if (this.options.dataAttributes.selectedTab) {
             options.selectedTab = this.options.dataAttributes.selectedTab;
         }
-        const wysiwyg = this.getParent().options.wysiwyg;
-        if (wysiwyg) {
-            options.ownerDocument = wysiwyg.el.ownerDocument;
-            options.editable = wysiwyg.$editable[0];
-        }
+
         const oldColorPalette = this.colorPalette;
         this.colorPalette = new ColorPaletteWidget(this, options);
         if (oldColorPalette) {
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index cc14b027e1f..5d0634f2bb8 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -47,8 +47,7 @@ const ColorPaletteWidget = Widget.extend({
      */
     init: function (parent, options) {
         this._super.apply(this, arguments);
-        const editableDocument = options.editable ? options.editable.ownerDocument : document;
-        this.style = editableDocument.defaultView.getComputedStyle(editableDocument.documentElement);
+
         this.options = Object.assign({
             selectedColor: false,
             resetButton: true,
@@ -65,7 +64,13 @@ const ColorPaletteWidget = Widget.extend({
         this.resetButton = this.options.resetButton;
         this.withCombinations = this.options.withCombinations;
 
+        // TODO do we really need a colorpalette in the editor working relying
+        // on the fact the editable is received from the caller and other ones
+        // that rely on the fact it is asked to the snippet menu?
         this.trigger_up('request_editable', {callback: val => this.options.$editable = val});
+        const ownerDocument = this.options.$editable[0] && this.options.$editable[0].ownerDocument;
+        const editableDocument = ownerDocument ? ownerDocument : document;
+        this.style = editableDocument.defaultView.getComputedStyle(editableDocument.documentElement);
 
         this.tabs = [{
             id: 'theme-colors',
diff --git a/addons/website/static/tests/tours/website_text_edition.js b/addons/website/static/tests/tours/website_text_edition.js
new file mode 100644
index 00000000000..78e0a90b063
--- /dev/null
+++ b/addons/website/static/tests/tours/website_text_edition.js
@@ -0,0 +1,66 @@
+/** @odoo-module **/
+
+import wTourUtils from 'website.tour_utils';
+
+const WEBSITE_MAIN_COLOR = '#ABCDEF';
+
+wTourUtils.registerWebsitePreviewTour('website_text_edition', {
+    test: true,
+    url: '/',
+    edition: true,
+}, [
+    {
+        content: "Go to theme options",
+        trigger: '.o_we_customize_theme_btn',
+    },
+    {
+        content: "Open colorpicker to change website main color",
+        trigger: 'we-select[data-color="o-color-1"] .o_we_color_preview',
+    },
+    {
+        content: "Input the value for the new website main color (also make sure it is independent from the backend)",
+        trigger: '.o_hex_input',
+        run: `text_blur ${WEBSITE_MAIN_COLOR}`,
+    },
+    {
+        content: "Go to the blocks tab",
+        trigger: '.o_we_add_snippet_btn',
+    },
+    wTourUtils.dragNDrop({id: 's_text_block', name: 'Text'}),
+    {
+        content: "Click on the text block first paragraph (to auto select)",
+        trigger: 'iframe .s_text_block p',
+    },
+    {
+        content: "Open the foreground colorpicker",
+        trigger: '#oe-text-color',
+    },
+    {
+        content: "Go to the 'solid' tab",
+        trigger: '.o_we_colorpicker_switch_pane_btn[data-target="custom-colors"]',
+    },
+    {
+        content: "Input the website main color explicitly",
+        trigger: '.o_hex_input',
+        run: `text_blur ${WEBSITE_MAIN_COLOR}`,
+    },
+    {
+        content: "Check that paragraph now uses the main color *class*",
+        trigger: 'iframe .s_text_block p',
+        run: function (actions) {
+            const fontEl = this.$anchor[0].querySelector('font');
+            if (!fontEl) {
+                console.error("A background color should have been applied");
+                return;
+            }
+            if (fontEl.style.backgroundColor) {
+                console.error("The paragraph should not have an inline style background color");
+                return;
+            }
+            if (!fontEl.classList.contains('text-o-color-1')) {
+                console.error("The paragraph should have the right background color class");
+                return;
+            }
+        },
+    }
+]);
diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py
index 2ca43bd9da8..12bdab684d0 100644
--- a/addons/website/tests/test_ui.py
+++ b/addons/website/tests/test_ui.py
@@ -432,3 +432,6 @@ class TestUi(odoo.tests.HttpCase):
             'channel_member_ids': [odoo.Command.create({'partner_id': partner_id.id, 'is_minimized': True})],
         })
         self.start_tour(f'/web#id={partner_id.id}&model=res.partner&view_type=form', 'test_hide_chat_window_on_preview', login='admin')
+
+    def test_29_website_text_edition(self):
+        self.start_tour('/@/', 'website_text_edition', login='admin')