diff --git a/data/web/telegram.org/js/telegram-web-app.js b/data/web/telegram.org/js/telegram-web-app.js
index 92a5de4c72..148938aba5 100644
--- a/data/web/telegram.org/js/telegram-web-app.js
+++ b/data/web/telegram.org/js/telegram-web-app.js
@@ -457,37 +457,61 @@
     WebView.postEvent('web_app_setup_closing_behavior', false, {need_confirmation: isClosingConfirmationEnabled});
   }
 
-  var headerColorKey = 'bg_color';
+  var headerColorKey = 'bg_color', headerColor = null;
   function getHeaderColor() {
-    return themeParams[headerColorKey] || null;
+    if (headerColorKey == 'secondary_bg_color') {
+      return themeParams.secondary_bg_color;
+    } else if (headerColorKey == 'bg_color') {
+      return themeParams.bg_color;
+    }
+    return headerColor;
   }
   function setHeaderColor(color) {
     if (!versionAtLeast('6.1')) {
       console.warn('[Telegram.WebApp] Header color is not supported in version ' + webAppVersion);
       return;
     }
-    var color_key;
-    if (color == 'bg_color' || color == 'secondary_bg_color') {
-      color_key = color;
-    } else {
-      color_key = parseColorToHex(color);
+    if (!versionAtLeast('6.10')) {
       if (themeParams.bg_color &&
-          themeParams.bg_color == color_key) {
-        color_key = 'bg_color';
+          themeParams.bg_color == color) {
+        color = 'bg_color';
       } else if (themeParams.secondary_bg_color &&
-                 themeParams.secondary_bg_color == color_key) {
-        color_key = 'secondary_bg_color';
-      } else {
-        color_key = false;
+                 themeParams.secondary_bg_color == color) {
+        color = 'secondary_bg_color';
       }
     }
-    if (color_key != 'bg_color' &&
+    var head_color = null, color_key = null;
+    if (color == 'bg_color' || color == 'secondary_bg_color') {
+      color_key = color;
+    } else if (versionAtLeast('6.10')) {
+      head_color = parseColorToHex(color);
+      if (!head_color) {
+        console.error('[Telegram.WebApp] Header color format is invalid', color);
+        throw Error('WebAppHeaderColorInvalid');
+      }
+    }
+    if (!versionAtLeast('6.10') &&
+        color_key != 'bg_color' &&
         color_key != 'secondary_bg_color') {
       console.error('[Telegram.WebApp] Header color key should be one of Telegram.WebApp.themeParams.bg_color, Telegram.WebApp.themeParams.secondary_bg_color, \'bg_color\', \'secondary_bg_color\'', color);
       throw Error('WebAppHeaderColorKeyInvalid');
     }
     headerColorKey = color_key;
-    WebView.postEvent('web_app_set_header_color', false, {color_key: color_key});
+    headerColor = head_color;
+    updateHeaderColor();
+  }
+  var appHeaderColorKey = null, appHeaderColor = null;
+  function updateHeaderColor() {
+    if (appHeaderColorKey != headerColorKey ||
+        appHeaderColor != headerColor) {
+      appHeaderColorKey = headerColorKey;
+      appHeaderColor = headerColor;
+      if (appHeaderColor) {
+        WebView.postEvent('web_app_set_header_color', false, {color: headerColor});
+      } else {
+        WebView.postEvent('web_app_set_header_color', false, {color_key: headerColorKey});
+      }
+    }
   }
 
   var backgroundColor = 'bg_color';
@@ -1525,6 +1549,7 @@
 
   window.Telegram.WebApp = WebApp;
 
+  updateHeaderColor();
   updateBackgroundColor();
   setViewportHeight();
 
diff --git a/data/web/webappcontent.telegram.org/cafe.html b/data/web/webappcontent.telegram.org/cafe.html
index 8ca0251457..87e1a8c62b 100644
--- a/data/web/webappcontent.telegram.org/cafe.html
+++ b/data/web/webappcontent.telegram.org/cafe.html
@@ -9,7 +9,7 @@
     <meta name="MobileOptimized" content="176" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="robots" content="noindex, nofollow" />
-    <script src="https://tg.dev/js/telegram-web-app.js?33"></script>
+    <script src="https://tg.dev/js/telegram-web-app.js?34"></script>
     <script>
       function setThemeClass() {
         document.documentElement.className = Telegram.WebApp.colorScheme;
diff --git a/data/web/webappcontent.telegram.org/css/webappdemo.css b/data/web/webappcontent.telegram.org/css/webappdemo.css
index 580adc4e57..bec1212130 100644
--- a/data/web/webappcontent.telegram.org/css/webappdemo.css
+++ b/data/web/webappcontent.telegram.org/css/webappdemo.css
@@ -140,10 +140,10 @@ section {
   background-color: var(--bg-color, #ffffff);
 }
 section#top_sect {
-  background-color: var(--tg-theme-bg-color, #ffffff);
+  background-color: var(--header-color, var(--tg-theme-bg-color, #ffffff));
 }
 section#top_sect.second {
-  background-color: var(--tg-theme-secondary-bg-color, #efefef);
+  background-color: var(--header-color, var(--tg-theme-secondary-bg-color, #efefef));
 }
 section .sect_row {
   margin: 10px 0;
diff --git a/data/web/webappcontent.telegram.org/demo.html b/data/web/webappcontent.telegram.org/demo.html
index 50e4440d47..ae31277241 100644
--- a/data/web/webappcontent.telegram.org/demo.html
+++ b/data/web/webappcontent.telegram.org/demo.html
@@ -8,7 +8,7 @@
     <meta name="MobileOptimized" content="176" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="robots" content="noindex,nofollow" />
-    <script src="https://tg.dev/js/telegram-web-app.js?33"></script>
+    <script src="https://tg.dev/js/telegram-web-app.js?34"></script>
     <script>
       function setThemeClass() {
         document.documentElement.className = Telegram.WebApp.colorScheme;
@@ -19,7 +19,7 @@
     </script>
     <link href="https://tg.dev/css/bootstrap.min.css?3" rel="stylesheet">
     <link href="https://tg.dev/css/bootstrap-extra.css?2" rel="stylesheet">
-    <link href="/css/webappdemo.css?7" rel="stylesheet">
+    <link href="/css/webappdemo.css?8" rel="stylesheet">
   </head>
   <body class="" style="visibility: hidden;">
       <section id="top_sect" class="second">
@@ -34,9 +34,10 @@
       <img id="peer_photo" class="chat_img" src="">
       <span id="peer_name"></span>
     </div>
-    <div class="sect_row">Header: <select id="header_color_sel">
+    <div class="sect_row">Header: <input type="color" id="header_color_input" /> <select id="header_color_sel">
         <option value="bg_color" selected>bg_color</option>
         <option value="secondary_bg_color">secondary_bg_color</option>
+        <option value="custom" id="header_color_val">custom...</option>
       </select></div>
     <div class="sect_row">Background: <input type="color" id="bg_color_input" /> <select id="bg_color_sel">
         <option value="bg_color" selected>bg_color</option>
@@ -199,12 +200,32 @@ Telegram.WebApp.onEvent('settingsButtonClicked', function() {
 var prev_bg_color_val = $('#bg_color_sel').val();
 $('#bg_color_input').val(Telegram.WebApp.backgroundColor);
 $('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
+var prev_header_color_val = $('#header_color_sel').val();
+$('#header_color_input').val(Telegram.WebApp.headerColor);
+$('body').attr('style', '--header-color:' + Telegram.WebApp.headerColor);
+
 $('#header_color_sel').val('secondary_bg_color');
+$('#header_color_input').on('change', function(e) {
+  var color = e.target.value;
+  $('#header_color_val').text(color);
+  $('#header_color_sel').val('custom');
+  prev_header_color_val = $('#header_color_sel').val();
+  Telegram.WebApp.setHeaderColor(color);
+  $('body').attr('style', '--header-color:' + Telegram.WebApp.headerColor);
+});
 $('#header_color_sel').on('change', function(e) {
   var color_key = e.target.value;
-  $('#top_sect').toggleClass('second', color_key == 'secondary_bg_color');
-  Telegram.WebApp.setHeaderColor(color_key);
-  $('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
+  if (color_key == 'custom') {
+    $('#header_color_sel').val(prev_header_color_val);
+    $('#header_color_input').focus().click();
+  } else {
+    $('#header_color_val').text('custom...');
+    Telegram.WebApp.setHeaderColor(color_key);
+    $('#top_sect').toggleClass('second', color_key == 'secondary_bg_color');
+    $('body').attr('style', '--header-color:' + Telegram.WebApp.headerColor);
+    $('#header_color_input').val(Telegram.WebApp.headerColor);
+    prev_header_color_val = $('#header_color_sel').val();
+  }
 });
 $('#bg_color_input').on('change', function(e) {
   var color = e.target.value;