What Does “Website Tinting” Mean in Safari?

If you enjoy immersing yourself in the websites you visit, you can do this simply by using Safari on iPhone, iPad, and Mac. With website tinting, you’ll see the color of the website you’re visiting take over some of your screen or window.

What exactly is website tinting? How do you turn it on or off? We’ll answer these questions so that you can decide if you want to use website tinting in Safari on your Apple device.

What Is Safari Website Tinting?

With the releases of iOS 15, iPadOS 15, and macOS Monterey, Apple introduced the website tinting feature for the Safari browser. When you enable this feature and visit a site in Safari, you’ll see the web page’s color scheme at the top of your screen or window, depending on your device.

On the iPhone, you can see the status bar at the top that contains your Wi-Fi, and the battery indicator changes to match the Safari website. The screenshots below show website tinting enabled on the left and disabled on the right for the same site.

Note: If you use the Single Tab layout on iPhone, you won’t notice the change in the top bar until you scroll down the webpage, as shown below.

On iPad and Mac, the feature works similarly but is limited to the Compact tab layout. For example, in the iPad screenshots below, you’ll see website tinting turned on in the first image and off in the second.

On Mac, you can also see the website tinting in the first image below and what the same website looks like with the tinting disabled in the second image.

Website tinting aims to enhance your browsing experience when using Safari. Not only will you see matching colors and tones in the status bar on iPhone, but your Safari toolbar, navigation buttons, and address bar match the theme as well on iPad and Mac.

You may not just find this an attractive feature but a useful one. For example, it’s easy to spot which tab you’re using on iPad and Mac when you have many tabs open.

Because this type of experience may not be for everyone, Apple has made it optional. So, you can turn it on or off on your device. This lets you use it on the iPhone but not on the Mac, for example.

How to Turn Website Tinting On and Off on iPhone

To control website tinting in Safari on iPhone, follow these simple steps.

1. Open the Settings app and select Safari.
2. Move to the Tabs section.
3. Use the toggle for Allow Website Tinting to turn it on (green) or off (gray).

You’ll see the change immediately when you head back to Safari. You don’t have to close and reopen the app.

How to Turn Website Tinting On and Off on iPad

To control website tinting in Safari on iPad, follow these steps instead.

1. Open the Settings app and select Safari.
2. Move to the Accessibility section.
3. Use the toggle for Show Color in Compact Tab Bar to turn it on (green) or off (gray).

4. If you enable website tinting, select Compact Tab Bar in the Tabs section on the same screen. Remember, the feature only works with that tab layout.

When you switch back to Safari, you’ll see the change immediately.

How to Turn Website Tinting On and Off on Mac

As you have probably guessed, you can enable or disable website tinting easily in Safari on Mac too.

1. Open Safari and select Safari > Settings in the menu bar.
2. Go to the Advanced tab.
3. In the Accessibility section, check the box for Show color in compact tab bar.

4. Like the iPad, ensure you use the Compact layout to see the website tinting. Go to the Tabs tab and select Compact next to Tab Layout.

Note: When this feature first arrived on macOS Monterey, you could go to Safari > Preferences, open the Tabs tab, and check the box for Show color in tab bar. It has since been moved to the above location.

Will You Tint Your Websites in Safari?

Website tinting in Safari is one of those small features that can make a big difference. Whether you enjoy it and have it enabled on all your Apple devices or find it distracting and have turned it off, it’s simply a matter of preference. Let us know what you think about the website tinting feature.

For more, look at additional ways to customize Safari on Mac.