What is website tinting & how it works in Safari and iPhone settings
Learn what website tinting means, when it shows up, how to turn it on or off, and why it changes your browser’s color.
-
Chris Granat
- Updated:
Ever notice your Safari browser change colors when you scroll? That’s website tinting. It’s a visual effect Apple added to Safari that blends the top bar with the color of the website you’re viewing. While some users find it smooth and modern, others find it distracting or confusing. In this article, we’ll explain exactly what website tinting is, how it works on iPhones and Macs, and how to turn it off if you prefer a cleaner look.
What is Website Tinting on Safari?
Website tinting is a Safari feature that changes the color of your browser’s address bar and top section to match the main color of the website you’re viewing. It subtly blends the browser interface with the page to create a seamless effect. It’s most noticeable when you scroll — the top area blends with the page based on its color palette, creating a cohesive look. This effect is meant to create a more immersive experience, but not everyone likes it. It’s used mostly in Safari on iPhones, iPads, and Macs running recent versions of iOS and macOS.
Why Does Safari Use Website Tinting?
Safari uses website tinting to make browsing feel more seamless by aligning the top bar with the website’s color scheme and improving overall cohesion. By matching the top bar with a site’s background color, it creates the illusion that the content flows to the edge of the screen. This can make some websites look more polished, especially in dark mode. However, not all sites are designed with this tinting feature in mind, which is why some users feel it clashes with readability or branding. One of the benefits of website tinting is that it enhances the visual appeal without disrupting the browsing experience.
Which Devices Support Website Tinting?
Website tinting is available on Apple devices running recent versions of Safari. When tinting is enabled, the effect becomes most visible while scrolling. You’ll see it on iPhones with iOS 15 or later, iPads with iPadOS 15 or later, and Macs using macOS Monterey or newer. It’s most noticeable in Safari’s compact tab layout on iPhones, where the top and bottom bars can change color. On Macs, the effect is more subtle, often seen when scrolling on websites with solid background colors.
How to Turn Off Website Tinting in Safari
If website tinting feels distracting, you can disable it in just a few steps. This will restore Safari’s default appearance, reverting to a neutral gray instead of matching the website. On iPhone, open the Settings app, scroll down to Safari, and look for the option labeled Allow Website Tinting. Toggle it off. On a Mac, open Safari Preferences, go to the Tabs section, and uncheck Show color in tab bar. These settings will restore the browser’s neutral gray appearance, making it easier to focus on the website content.
Why Some Users Disable Website Tinting
Not everyone likes website tinting. Some users find the color changes distracting or hard to read, especially on sites with bright or low-contrast backgrounds. Others simply prefer a clean, consistent look across all websites. There’s also a usability factor — when the top bar blends too much with the page, it can be harder to tell where the browser ends and the website begins. That’s why many users choose to turn the feature off for a simpler browsing experience. If you’re interested in how visual layout and browser interface design impact usability, check out guide on website header design. For some users, the changing color can even affect user engagement, especially if the contrast between browser and content is too strong.
Final Thoughts
Website tinting is one of those little Safari features that most people either don’t notice — or turn off right away. While it’s meant to make the browsing experience feel more seamless, it can also mess with readability, brand consistency, and user experience. As a web designer, I care a lot about how websites look and behave across devices. And honestly, tinting can interfere with that. It’s a small touch, but for some people, it’s just annoying. Luckily, you can turn it off in seconds — no digging around. If you prefer a simple, consistent look, it’s probably worth disabling.
Chris Granat
Chris is the founder and lead web designer at Flamingo Agency, a Chicago web design agency.