diff --git a/addons/website/models/website_page.py b/addons/website/models/website_page.py
index 99af9e803ba..ae500c50280 100644
--- a/addons/website/models/website_page.py
+++ b/addons/website/models/website_page.py
@@ -36,6 +36,7 @@ class Page(models.Model):
     # Page options
     header_overlay = fields.Boolean()
     header_color = fields.Char()
+    header_text_color = fields.Char()
     header_visible = fields.Boolean(default=True)
     footer_visible = fields.Boolean(default=True)
 
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index c2f65fd4026..f60bc0ddf05 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -2560,6 +2560,8 @@ options.registry.TopMenuVisibility = VisibilityPageOptionUpdate.extend({
         if (!transparent) {
             return;
         }
+        // TODO should be able to change both options at the same time, as the
+        // `params` list suggests.
         await new Promise((resolve, reject) => {
             this.trigger_up('action_demand', {
                 actionName: 'toggle_page_option',
@@ -2568,6 +2570,13 @@ options.registry.TopMenuVisibility = VisibilityPageOptionUpdate.extend({
                 onFailure: reject,
             });
         });
+        await new Promise(resolve => {
+            this.trigger_up('action_demand', {
+                actionName: 'toggle_page_option',
+                params: [{name: 'header_text_color', value: ''}],
+                onSuccess: () => resolve(),
+            });
+        });
     },
     /**
      * @override
@@ -2605,7 +2614,7 @@ options.registry.topMenuColor = options.Class.extend({
         await new Promise((resolve, reject) => {
             this.trigger_up('action_demand', {
                 actionName: 'toggle_page_option',
-                params: [{name: 'header_color', value: widgetValue}],
+                params: [{name: params.pageOptionName, value: widgetValue}],
                 onSuccess: resolve,
                 onFailure: reject,
             });
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index b47c4f3d759..177b65a25d7 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -892,7 +892,15 @@
             data-prevent-important="true"
             data-css-property="background-color"
             data-color-prefix="bg-"
-            data-excluded="theme, common"/>
+            data-excluded="theme, common"
+            data-page-option-name="header_color"/>
+        <we-colorpicker string="Text Color"
+            class="o_we_sublevel_1"
+            id="option_header_transparent_text_color"
+            data-select-style="true"
+            data-css-property="color"
+            data-color-prefix="text-"
+            data-page-option-name="header_text_color"/>
     </div>
 
     <!-- Header > Navbar Options -->
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 0853d28050f..44a27bf7f3c 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -191,7 +191,7 @@
     <!-- Page options -->
     <xpath expr="//div[@id='wrapwrap']" position="before">
         <t groups="website.group_website_restricted_editor">
-            <t t-foreach="['header_overlay', 'header_color', 'header_visible', 'footer_visible']" t-as="optionName">
+            <t t-foreach="['header_overlay', 'header_color', 'header_text_color', 'header_visible', 'footer_visible']" t-as="optionName">
                 <!-- Firefox autocomplete is too aggressive and works on hidden inputs,
                 so we need to disable it (https://bugzilla.mozilla.org/show_bug.cgi?id=520561) -->
                 <input t-if="optionName in main_object" type="hidden" class="o_page_option_data" autocomplete="off" t-att-name="optionName" t-att-value="main_object[optionName]"/>
@@ -203,6 +203,11 @@
         <t t-set="header_bg_color_class" t-value="header_bg_color_is_class and header_bg_color or ''"/>
         <t t-set="header_bg_color_style" t-value="(not header_bg_color_is_class) and header_bg_color or ''"/>
 
+        <t t-set="header_text_color" t-value="'header_text_color' in main_object and main_object.header_text_color or ''"/>
+        <t t-set="header_text_color_is_class" t-value="'text-' in header_text_color"/>
+        <t t-set="header_text_color_class" t-value="header_text_color_is_class and header_text_color or ''"/>
+        <t t-set="header_text_color_style" t-value="(not header_text_color_is_class) and header_text_color or ''"/>
+
         <div groups="base.group_user" class="o_frontend_to_backend_nav position-fixed d-none">
             <svg class="o_frontend_to_backend_icon position-absolute" width="24px" height="24px"
                  viewBox="-7 -7 24 24" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin">
@@ -227,6 +232,8 @@
     <xpath expr="//header" position="attributes">
         <attribute name="t-attf-class" add="#{header_bg_color_class}" separator=" "/>
         <attribute name="t-attf-style" add="#{header_bg_color_style and ('background-color: %s;' % header_bg_color_style)}" separator=" "/>
+        <attribute name="t-attf-class" add="#{header_text_color_class}" separator=" "/>
+        <attribute name="t-attf-style" add="#{header_text_color_style and ('color: %s;' % header_text_color_style)}" separator=" "/>
     </xpath>
     <xpath expr="//header" position="attributes">
         <attribute name="t-attf-class" add="#{'d-none o_snippet_invisible' if 'header_visible' in main_object and not main_object.header_visible else ''}" separator=" "/>