What is Website Tinting & How to Turn It on in Safari

Safari’s website tinting customizes the browser’s appearance by matching its color with the website you’re visiting. Introduced with iOS 15, iPadOS 15, and macOS Monterey, this feature changes the top part of your Safari screen, including the status bar on iPhones, to align with the webpage’s theme. It only activates in certain layouts, like the Compact tab layout on iPads and Macs, aiming to enhance your browsing experience with a cohesive look.

This color synchronization is Apple’s attempt to make web surfing more visually engaging by integrating website aesthetics into the browser. Whether it’s beneficial or not largely depends on personal preference. Some may appreciate the immersive experience, while others might prefer the standard browser appearance, as constant color changes could be distracting.

You can adjust website tinting based on your preference, deciding if a colorful browsing experience suits you. On iOS devices or Macs, you can easily enable or disable this feature, and it respects your chosen browsing style. Thus, it offers a customizable touch to Safari, letting users decide the level of visual integration they prefer during their online sessions.

To adjust website tinting on your devices, follow these steps:

1. Turn on the Website Tinting Option on iOS Devices

Follow these easy steps to turn on the website tinting feature in your Safari browser on iOS 15:

1. Open the “Settings” app on your iPhone or iPad.
   

   

2. Keep scrolling until you find “Safari,” and then tap it to open.
   

   

3. Look for the “Allow Website Tinting” option and switch the toggle on to enable this feature.
   

   

That’s it! With this feature enabled, you can explore the internet to see the changes and decide if you like the new look.

Before iOS 15, Apple had a setting called “Show Color in Tab Bar” under accessibility options, which did pretty much the same thing as the current “Allow Website Tinting” toggle.

This change indicates that Apple wants more people to know about and use this feature, likely because not everyone was aware of it or used it in the past.

2. Turn off the Website Tinting Option on iOS Devices

If you decide that website tinting isn’t for you, disabling it is just as easy as enabling it. Here’s how to stop the website tinting feature:

1. Start by opening the “Settings” app on your iPhone or iPad.
   

   

2. Scroll until you find “Safari,” and then tap it to get into its settings.
   

   

3. Look for the toggle labeled “Allow Website Tinting” and deactivate it.
   

   

After you’ve done this, Safari will stop changing its colors to match the websites you visit, keeping its look consistent no matter what site you’re on. You don’t even need to restart your iPhone for the change to take effect.

3. Turn on or off the Website Tinting or Tab Bar Coloring on the Mac

Enabling website tinting or tab bar coloring on your Mac is straightforward if you have the latest Safari update and are using macOS Big Sur, Catalina, or a newer version. Apple calls this feature “color in tab bar” on Mac computers. Here’s what you need to do:

1. Open Safari on your Mac. Look for the “Safari” menu in the top-left corner of your screen and click on “Preferences” from the dropdown menu.
   

   

2. In the Preferences window, click on the “Tabs” section.
   

   

3. Find the option “Show Color in Tab Bar” and check the box next to it. If the coloring feature is already on, uncheck this box to turn it off.
   

   

As soon as you check this box, you’ll notice the color of Safari’s tabs change to match the website you’re viewing. After that, you’re all set! You can just close the Preferences window and enjoy your colorful browsing experience.