Implementing Meta Theme Color modern HTML5 and CSS3 websites.

Apple Safari has started supporting theme-color Meta Tag from the Safari 15 release.

Here is how to Implement a theme-color meta tag in HTML.

You have to copy-paste the theme-color meta tag into a section of your website. It will look something like this:

<meta name="theme-color" content="#ff0000"/>

You can use the following code to implement theme color specific to system light or dark modes.

<meta name="theme-color" content="#ff0000" media="(prefers-color-scheme: light)"/>
<meta name="theme-color" content="#ff0000" media="(prefers-color-scheme: dark)"/>

Here is some code implemented with HEX value with 3 or 6 digits:

<meta name="theme-color" content="#f00"/>
<meta name="theme-color" content="#ff0000"/>

Here is the same code implemented with RGB / RGBA. RGBA has an alpha value that you can implement transparency with this code.

<meta name="theme-color" content="rgb(255, 0, 0)"/>
<meta name="theme-color" content="rgba(255, 0, 0, .9)"/>

If your browser supports hsl/hsla color value, then you can use the following code:

<meta name="theme-color" content="hsl(0, 50%, 50%)"/>
<meta name="theme-color" content="hsla(0, 50%, 50%, 1)"/>

If your browser supports HEX value with 4 or 8 digits, then you can use the following code:

<meta name="theme-color" content="#f000"/>
<meta name="theme-color" content="#ff000000"/>

I hope the above information helps you to implement a theme-color meta tag for your website.

Thanks & Regards
Mandar Apte