You have probably noticed that on some popular website when visited on mobile, the menu bar in Chrome magically changes its colour to match the primary colour of the page.

Medium’s website with a nice contrast between the menu bar and the page

Medium’s website with a nice contrast between the menu bar and the page

The Guardian’s Website

The Guardian’s Website

There is no magic in that. This can easily be achieved by using only one line of code inserted directly into the <head> tag of your page. This will suggest to the browser to use this colour rather than the default one.

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

Other popular websites using this:

This one line can go a long way in helping your clients notice you and your website. It simply looks more professional and you appear to have spent more time on your design. Support for this feature has been introduced in version 39 of Chrome for Android on Lollipop.

Tags: html ux css

Let's stay in touch

Sign up for my newsletter and I will let you know about more content and new projects.