How to change the color of the browser tab according to the website theme color using HTML?
Tags: html
Published: 2022-12-12 05:29:04

---
  title: How to change the color of the browser tab according to the website theme color using HTML?
  published: true
  tags: HTML5
  date: Mon Dec 12 2022 10:59:04 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-color-of-browser-tab-according-website-theme-color-using-html
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_a79a6cfddc.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-color-of-browser-tab-according-website-theme-color-using-html)
  To change the color of the browser tab or the browser's interfaces according to your website's theme color, you can use the `meta` HTML tag inside the `head` HTML tag and then use the `name` attribute with the value of `theme-color` followed by the `content` attribute having a hex color code or your theme color as the value.

### TL;DR

```html
<html>
  <head>
  <!-- Setting the color of the browser's tab to the website's theme color -->
    <meta name="theme-color" content="#7fffd4" />
  </head>
  <style>
    /* Setting the background color to hex color of `#7fffd4` */
    body {
      background-color: #7fffd4;
    }
  </style>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dignissimos
      distinctio ipsa alias accusamus asperiores ullam cum eveniet repellat
      deleniti minus quia iusto error cumque aperiam in laboriosam, repellendus
      dolor sint quo, modi consequuntur ratione pariatur! Quam tempore vero eos
      nesciunt nisi accusantium. Asperiores earum et fugit incidunt, repudiandae
      sapiente quidem ipsum consectetur quos nostrum distinctio velit temporibus
      magni laborum dolore numquam vel beatae accusantium?
    </p>
  </body>
</html>
```

For example, let's say we have a webpage with some like this,

```html
<html>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dignissimos
      distinctio ipsa alias accusamus asperiores ullam cum eveniet repellat
      deleniti minus quia iusto error cumque aperiam in laboriosam, repellendus
      dolor sint quo, modi consequuntur ratione pariatur! Quam tempore vero eos
      nesciunt nisi accusantium. Asperiores earum et fugit incidunt, repudiandae
      sapiente quidem ipsum consectetur quos nostrum distinctio velit temporibus
      magni laborum dolore numquam vel beatae accusantium?
    </p>
  </body>
</html>
```

Now let's also define a theme color for this website. 

Let's use the hex color code of `#7fffd4` (aquamarine color) as the background color of the webpage like this,

```html
<html>
  <style>
    /* Setting the background color to hex color of `#7fffd4` */
    body {
      background-color: #7fffd4;
    }
  </style>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dignissimos
      distinctio ipsa alias accusamus asperiores ullam cum eveniet repellat
      deleniti minus quia iusto error cumque aperiam in laboriosam, repellendus
      dolor sint quo, modi consequuntur ratione pariatur! Quam tempore vero eos
      nesciunt nisi accusantium. Asperiores earum et fugit incidunt, repudiandae
      sapiente quidem ipsum consectetur quos nostrum distinctio velit temporibus
      magni laborum dolore numquam vel beatae accusantium?
    </p>
  </body>
</html>
```

The webpage now looks like this,

![webpage with the background color of hex color code #7fffd4](/uploads/Screenshot_2022_11_21_at_11_16_17_PM_baf6e8338e.png)

Also if you see in the above screenshot, the background color is changed but the browser's top tab color is still gray, ideally, we would want this color also to be changed according to the theme color of our website which in our case we want it to be the same color as the background color, `#7fffd4`.

To do that we can use the `meta` HTML tag inside the `head` HTML tag, and then use the `name` attribute with the value of `theme-color`, and then use the `content` attribute with the value of our background color hex color code which is `#7fffd4`.

It can be done like this,

```html
<html>
  <head>
  <!-- Setting the color of the browser's tab to the website's theme color -->
    <meta name="theme-color" content="#7fffd4" />
  </head>
  <style>
    /* Setting the background color to hex color of `#7fffd4` */
    body {
      background-color: #7fffd4;
    }
  </style>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dignissimos
      distinctio ipsa alias accusamus asperiores ullam cum eveniet repellat
      deleniti minus quia iusto error cumque aperiam in laboriosam, repellendus
      dolor sint quo, modi consequuntur ratione pariatur! Quam tempore vero eos
      nesciunt nisi accusantium. Asperiores earum et fugit incidunt, repudiandae
      sapiente quidem ipsum consectetur quos nostrum distinctio velit temporibus
      magni laborum dolore numquam vel beatae accusantium?
    </p>
  </body>
</html>
```

See the above code live in the [codesandbox](https://codesandbox.io/s/change-color-of-browser-tab-according-website-theme-color-using-html-l73k4f?file=/index.html).

That's all 😃!