Modern versions of Apple Safari across macOS, iOS, and iPadOS feature an aesthetic interface design known as Website Tinting (or “Show colour in compact tab bar”). When enabled, Safari inspects the background colour or <meta name="theme-color"> tag of the active webpage and dynamically tints the browser toolbar, tab bar, and system status bar to match. While designed to provide an edge-to-edge immersive browsing aesthetic, many users find continuous colour transitions jarring, distracting, or detrimental to tab readability.
Fortunately, Apple provides straightforward toggles in both macOS and iOS to disable website tinting entirely. Turning this feature off forces Safari to maintain a consistent, neutral interface appearance regardless of which website you visit. If you enjoy tailoring your Apple browsing experience, you might also find our guides on changing tab bar layouts between compact and separate in Safari on Mac and enabling developer feature flags in Safari on iPhone helpful.
Disabling Website Tinting in Safari on Mac
On macOS, website tinting can be configured whether you use the Compact or Separate tab bar layout. To turn off toolbar colour blending in Safari for Mac, follow these steps:
- Open Safari on your Mac.
- Click on the Safari menu in the top-left menu bar and select Settings (or press Command + ,).
- In the Settings window, click on the Tabs icon.
- Look for the checkbox labelled Show colour in compact tab bar (or Show colour in tab bar depending on your macOS release).
- Uncheck this box to immediately disable dynamic tinting.
Once unchecked, Safari’s top navigation bar instantly reverts to standard macOS system grey (in Light Mode) or dark charcoal (in Dark Mode), creating a clear visual boundary between website content and browser controls.
Disabling Website Tinting in Safari on iPhone and iPad
On iOS and iPadOS, website tinting causes the top notch area, Dynamic Island surround, and bottom tab bar to absorb web page colours. To turn off this behaviour on your mobile device:
- Open the Settings app on your iPhone or iPad.
- Scroll down and tap on Apps (or tap directly on Safari on iOS 17 and earlier versions).
- Select Safari from the list of applications.
- Scroll down to the Tabs section.
- Locate the toggle switch labelled Allow Website Tinting.
- Tap the switch to turn it off (the slider transitions from green to grey).
The modification takes effect immediately. When you switch back to Safari, the URL address bar and system status bar maintain uniform styling regardless of background colours declared by websites.
Alternative Tab Layout Considerations
If you enjoy certain aspects of website tinting but dislike how it crowds tab management on macOS, consider switching tab layouts:
- Separate Tab Layout: Navigating to Safari > Settings > Tabs and choosing Separate places the Smart Search address bar above a dedicated, traditional tab strip. This significantly reduces visual conflict even when colour tinting is active.
- Single Tab on iPhone: If bottom tab bar tinting feels obtrusive while scrolling on iOS, you can select Single Tab under Settings > Safari > Tabs to anchor a traditional address bar to the top of the viewport.
Restoring Default Browser Appearance
If you ever decide to re-enable website tinting in the future, simply return to the respective Settings menus on macOS or iOS and recheck Show colour in compact tab bar or re-enable the Allow Website Tinting switch. Your preferences synchronise seamlessly with your operating system appearance modes.