Android Lollipop adoption rates are currently sluggish but it shouldn’t hurt to add a little bit of code on your website to give early adopters an extra treat. Chrome 39 added support for a new meta tag called “theme-color” so your website can better blend in with Chrome’s Omnibar.
All it takes is a single line of code in the <head> section:
<meta name="theme-color" content="#000000" />
Of course, you should change “#000000” to whatever valid CSS color you like and Chrome 39 will handle the rest.
The idea is to take one of your main theme colors and use it as the theme color and see the results. This can make your website look more like a custom app and may even encourage distraction-free reading depending on the color you pick. It is a great and simple way to add a touch of personality and uniqueness to your site.
The only issue for now is that not everyone will be able to experience this. As a part of Google’s Material Design, only users of Android Lollipop (5.0) will see this effect so that only covers most of the Nexus phone and tablet users. Plus, they must be using Chrome 39 or newer too and there is no indication if OEM browsers like the browser app for Samsung Galaxy devices will adapt this meta tag once Android Lollipop is finalized for these devices.
Because of these requirements, you may not be able to preview the results. The best you can do is take a screenshot of the Play Store app, which uses Material Design and change the color of the top bar yourself using your favorite graphics editor.
Then you just take a screenshot of your website using the same mobile device and piece both photos together to see if the colors blend in well.
It would be interesting though to see if “theme-color” will affect the look of the Chrome browser on Chrome OS and desktop operating systems when these platforms get influenced with Material Design.