You’re browsing on your iPhone or Mac, and you notice the area around the browser — the toolbar, the status bar — subtly shifts color to match the website you’re on. That’s website tinting. It’s a small visual detail, but once you notice it, you see it everywhere.
It’s not a bug. It’s a deliberate design feature — and it works differently depending on your browser and device.
Where Does Website Tinting Actually Come From?
Website tinting is primarily a Safari feature on Apple devices. Apple introduced it as part of their push toward more immersive, cohesive UI design — the idea being that the browser chrome should blend into the webpage rather than feel like a separate layer slapped on top.
Here’s how it works under the hood:
- Safari samples the dominant color from the top of the webpage or the site’s declared theme color
- That color is then applied to the browser toolbar and iOS status bar
- On Mac, it can also affect the tab bar area at the top of the window
- The effect updates dynamically as you scroll or navigate between pages
Websites can also explicitly set this using the theme-color meta tag in their HTML:
<meta name="theme-color" content="#your-color-here">When a site sets this tag, Safari (and Chrome on Android) picks it up and applies it to the browser UI automatically.
Why Do Some Sites Tint and Others Don’t?
Not every website triggers tinting — and there are a few reasons for that.
- No theme-color tag — if the site hasn’t declared one, the browser tries to sample the page color automatically, which doesn’t always work cleanly
- White or neutral backgrounds — sites with plain white headers often produce little to no visible tinting effect
- Dark mode vs light mode — tinting behaves differently depending on which mode your device is in; some sites declare separate theme colors for each
- Browser differences — Chrome on Android supports theme-color too, but Firefox and others handle it differently or ignore it entirely
For developers, setting a theme-color is a small but impactful touch. It makes the browsing experience feel more branded and intentional, especially on mobile where the status bar is always visible.
How to Turn Off Website Tinting on iPhone or Mac
Not everyone loves it. If the color shifts feel distracting or clash with your accessibility needs, you can turn it off.
On iPhone (Safari):
- Go to Settings → Safari
- Scroll down and look for “Allow Website Tinting” — toggle it off
That’s it. Safari will stop adapting the toolbar color to match websites.
On Mac (Safari):
- Open Safari → Settings (or Preferences on older macOS)
- Go to the General tab
- Uncheck “Show color in tab bar”
Once disabled, the toolbar stays its default color regardless of what site you’re on.
For developers who want to remove it from their site:
You can set a neutral or transparent theme color in your HTML to prevent browsers from applying unexpected tinting:
<meta name="theme-color" content="#ffffff">This gives you full control over how your site appears in the browser UI across different devices.
Website tinting is one of those features that works best when it’s subtle. Done well, it makes a site feel polished and immersive. Done poorly — or on a site with clashing colors — it just looks messy. Either way, now you know exactly what’s causing it and how to control it.
