Change Color of Header and Address Bar of Android Chrome for Your Website

Now, Chrome for Android on Lollipop, you’ll now be able to use the theme-color meta tag to set the toolbar color—this means no more Seattle gray toolbars!. This design allows apps to use custom colors to toolbars and status bars. So, when your site is listed along with other apps in the overview mode/multitasking mode, you can assign a specific color to use, to make it look good.

Before :

chrome without theme-color meta

After :

chrome with theme-color meta



The syntax is pretty simple we ned to add meta tag to your page <head> section with the name=”theme-color”, and set the content to any valid CSS color. Here is a syntax to change color of header and address bar of android chrome for your website or webpages.

Syntax :

<meta name="theme-color" content="xxxxxx">
<!-- Put your color code instead of xxxxxx -->

Example :

<meta name="theme-color" content="#d00000">

Thank You !!
Please provided your valuable feedback/comments at below comment box !!

Siva Sankar

SIVA SANKAR, Working as a Software Engineer, Blogging is my hobby. I completed my Bachelors of Engineering (Computer Science Engineering) in Chennai, India. and my Master of Engineering (Embedded System Technologies) in Tamilnadu, India.

One thought on “Change Color of Header and Address Bar of Android Chrome for Your Website

Leave a Reply

Your email address will not be published. Required fields are marked *