There is a lot of new technology coming day by day in website development. It is our duty to update the website with the latest technology because we are the web designer/developer. We need to update our knowledge and our working skills regularly. Okay, let’s come to the topic.

Already we know, in the mobile app the full screen have the look of theme color. Like mobile app, we can able to change the color of chrome browser to match with your website theme color. It is easy and simple; we need not work hard for this. Just add three Meta tags inside the <head></head> tag.

Here is the Meta tag, just copy and paste it inside the <head></head> tag. And change the hex color code as you want.

<!-- Chrome, Firefox OS, Opera and Vivaldi --> <meta name="theme-color" content="#F44114"> <!-- Windows Phone --> <meta name="msapplication-navbutton-color" content="#F44114"> <!-- iOS Safari --> <meta name="apple-mobile-web-app-status-bar-style" content="#F44114"> 1 2 3 4 5 6 7 8 < ! -- Chrome , Firefox OS , Opera and Vivaldi -- > < meta name = "theme-color" content = "#F44114" > < ! -- Windows Phone -- > < meta name = "msapplication-navbutton-color" content = "#F44114" > < ! -- iOS Safari -- > < meta name = "apple-mobile-web-app-status-bar-style" content = "#F44114" >

How to get hex color code?

In w3schools you can find the hex color code for different colors. So you can take them there.

“No! I want the hex color code of my website colors” this is also possible and there is an easy way to do this. Install Colorzilla browser extension in your browser. After that open your website and pick the color you want using this ColorZilla color picker.

To see demo in live working condition, please open webthil.com in your mobile chrome browser

Now you finished it! I believe this post will help you to update your mobile site. Please share it with you friends and leave your opinion in the below comment box.