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

Key Takeaways
  • Website Tinting is a feature in Safari that syncs the browser's top bar color with the website's color scheme.
  • It offers an immersive and visually attractive browsing experience on Apple devices.
  • There are simple steps if you want to turn website tinting on or off, allowing personalization of the browsing interface.

Ever wondered why the top of your Safari browser sometimes matches the color of the website you’re visiting? That’s website tinting – a well-designed feature on Apple’s Safari browser.

This post is all about website tinting. We’ll explain what it is, its benefits, and how you can toggle this feature to suit your browsing style. Whether you’re into tech, love a bit of color in your digital life, or just curious about your Apple device’s features, this guide has something for everyone.

What is Safari website tinting?

What is Safari website tinting?

Apple released a new feature called website tinting with the launch of iOS 15, iPadOS 15, and macOS Monterey for the Safari browser. This cool feature changes the color at the top of your Safari screen to match the color of the website you’re visiting.

If you’re using an iPhone, the top part where you see your Wi-Fi signal and battery life will change colors to blend with the website’s theme. You’ll notice in pictures that with website tinting turned on, the top part matches the website’s color, and without it, it stays the original color.

NOTE: On the iPhone, if you’re using the browser in Single Tab mode, you won’t see the color change at the top until you start scrolling down.

The feature is similar for iPad and Mac users but only shows up when using the Compact tab layout. The whole point of website tinting is to make your browsing experience on Safari more enjoyable. 

It does this by syncing the colors of the iPhone’s status bar and the Safari toolbar, navigation buttons, and address bar on the iPad and Mac with the website’s color scheme.

READ MORE: 6 Safari Settings you NEED to Know (Safari Tips & Tricks) ➜

↪ Is website tinting helpful?

Is website tinting helpful?

Apple added the website tinting feature to Safari for a good reason. It’s designed to make surfing the web more engaging by making the colors of the website you’re visiting extend to the browser itself. 

This can make your online time more immersive on whatever site you’re looking at. Whether you enjoy this feature or not depends on your personal taste.

If you’re not a fan of your browser changing colors to match every site you visit, you might not find website tinting very appealing. On the other hand, if you like the idea of a more colorful browsing experience, then website tinting could be something you’d want to enable and explore.

READ MORE: The Best Dark Mode Extensions For Browsers in 2024 ➜

How to turn website tinting on and off?

Turning website tinting on or off is up to you and how you like to browse the web. If you’re curious to see what it’s like, here’s how you can easily give it a try:

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.
    Open iPhone Settings
    Open iPhone Settings
  2. Keep scrolling until you find “Safari,” and then tap it to open.
    Tap on Safari
    Tap on Safari
  3. Look for the “Allow Website Tinting” option and switch the toggle on to enable this feature.
    Tap on Allow Website Tinting
    Tap on Allow Website Tinting

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.

READ MORE: How to Enable & Use Sleep Mode on Your iPhone [2024] ➜

2. Turn off the website tinting option on iOS devices

If you decide that website tinting isn’t for you, disabling 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.
    Open the Settings app
    Open the Settings app
  2. Scroll until you find “Safari,” and then tap it to get into its settings.
    Tap on Safari
    Tap on Safari
  3. Look for the toggle labeled “Allow Website Tinting” and deactivate it.
    Tap on Allow Website Tinting
    Turn off the toggle

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.

READ MORE: iPhone 9 – 4 Reasons Why Apple’s Lost iPhone Doesn’t Exist ➜

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.
     click on "Preferences
    Click on Preferences
  2. In the Preferences window, click on the “Tabs” section.
    click on the "Tabs
    Click on Tabs
  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.
    Click the box before Show Color in Tab Bar
    Click the box before Show Color in Tab Bar

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.

READ MORE: The 7 Best Web Browsers For Every Kind of User – 2024 Edition

Should you use it?

Website tinting in Safari offers a unique way to blend your browsing experience with the visual theme of the websites you visit. Whether you’re using an iPhone, iPad, or Mac, enabling this feature can make your web surfing more colorful and immersive. 

If you’re someone who enjoys a cohesive look across your apps and websites, website tinting is definitely worth trying out. You might want to skip this feature if you prefer a consistent, unchanging browser interface. Try it, and see if it enhances your browsing experience on Safari.


Is the website tinting like the show color in the tab bar feature?

Yes, “Show Color In Tab Bar” is just another name for website tinting. This feature was around for a while before it got spotlighted in Safari 15 last year. So, when we talk about showing color in the tab bar, we’re talking about website tinting.

Will enabling website tinting affect Safari’s performance?

No, enabling website tinting won’t slow down Safari or affect how fast pages load. It’s purely a visual feature that changes the look of your browser to match the website you’re visiting. You can enjoy a more personalized browsing experience without worrying about performance.

Can I control website tinting on my iPhone?

Yes, you can disable the website tinting feature in Safari if you don’t like it. And if you change your mind later, you can easily turn it back on. It’s all about what you prefer.

Is it available on any other internet browsers besides Safari?

No, this feature is unique to Safari, and Apple keeps updating it. People who use Safari also look forward to seeing it in upcoming versions. Right now, no other web browser offers something like website tinting.


Khalid Ali

Khalid is a versatile analyst honing his expertise for the past 5 years. With certifications from Google and IBM to back him up, his knowledge extends far beyond the routine coverage of the latest trends and in the industry.