Chrome Android address bar color: a step by step guide
Ever wanted to make the experience for your mobile users more personal and branded? Have you ever noticed how the Chrome Android address bar color sometimes changes to match a site's palette? Do you want that for your site? It's easy to do. To let your users experience the color of your brand, blog or e-commerce site in a much more personal way on Android, all you need is a simple HTML change. Add a meta tag in the head of your page:
<head>
...
<meta name="theme-color" content="#2ac5ee">
...
</head>
Naturally, #2ac5ee is Blu Frame's color, and you need to change that with any HEX color you want to paint the address bar with. And the final result? Here is our home page on a Samsung Galaxy Note 4 before we colored the address bar:
As you can see, everything about the address bar looks standard and dull: white background with a grey border. Almost every site will appear like that, and it's safe to say it doesn't stand out. And here is our new Inspire by Blu Frame home page, colored to match our brand:
The address bar now matches our brand colors, and we feel that the experience for our Android users on Chrome is more personal and ties in with all the navigation elements of the site. If you're not on one already, open this page again on any Android smartphone or tablet and see what it actually looks like. And remember: all you need is that a simple meta tag and you'll see you'll be able to match the Chrome address bar to your site's colors straight away!
