What Is Website Tinting in Safari and How Do You Turn It Off

When using Safari on your iPhone, iPad or Mac, you might notice that the color of the browser’s toolbar changes to match the website you’re visiting. This feature is known as “website tinting” and aims to provide a more immersive experience by blending the browser’s interface with the site’s color scheme. However, not everyone finds this feature helpful, and some may prefer a consistent look for their browser. If you’re someone who wants to keep your Safari toolbar color static, disabling website tinting is a straightforward process. Let’s explore how you can personalize your browsing experience by turning this feature off.

what is website tinting in safari and how do you turn it off

Adjust Safari Settings on iOS

On an iPhone or iPad, Safari’s website tinting can be adjusted through the device’s settings to make the browser’s appearance more consistent.

  1. Open Settings: Locate the ‘Settings’ app on your iOS device and tap it to open.
  2. Scroll to Safari: In the Settings menu, scroll down until you find ‘Safari’ and select it.
  3. Find the Tabs Section: Inside Safari settings, look for the section titled ‘Tabs.’
  4. Toggle Off Website Tinting: Within ‘Tabs,’ find the option called ‘Allow Website Tinting’ and toggle the switch off. This will prevent the color of the website from affecting the browser’s toolbar.

Summary: Turning off website tinting on iOS devices may help reduce distractions and provide a consistent toolbar color when browsing. However, it also means forgoing the potential aesthetic integration with visited websites.

Change Appearance in macOS

For those using Safari on a Mac, the process to disable website tinting differs slightly but remains user-friendly.

  1. Open Safari: Click on the Safari icon in your dock or Applications folder to open the browser.
  2. Access Preferences: In the Safari toolbar at the top of the screen, select ‘Safari’ and then ‘Preferences’ from the dropdown menu.
  3. Select the Tabs Section: Within the Preferences window, click on the ‘Tabs’ icon.
  4. Uncheck Website Tinting: Look for a checkbox labeled ‘Show color in tab bar’ and uncheck it to disable the tinting feature.

Summary: Disabling website tinting on macOS can help maintain a static appearance for Safari, making it easier for some users to navigate. However, the seamless design with certain web pages will be lost.

Consider Using Reader Mode

Reader Mode can provide a distraction-free reading environment, without the influence of website tinting.

  1. Navigate to a Web Page: Open Safari and go to a webpage where Reader Mode is available.
  2. Activate Reader Mode: Tap on the Reader Mode icon on the left side of the browser’s address bar. It looks like a small piece of paper.
  3. Enjoy Consistent Coloring: In Reader Mode, the color of the website will not affect the toolbar, offering a consistent and focused experience.

Summary: Reader mode simplifies page layout and provides a uniform color scheme, which can enhance readability. It’s not a permanent solution for website tinting, but it’s useful for long reading sessions.

Enable Dark Mode

Dark Mode can reduce the variability of Safari’s appearance by providing a darker, uniform color palette across the operating system, including Safari.

  1. Open Settings: Go to the ‘Settings’ app on your iOS device or ‘System Preferences’ on your Mac.
  2. Select Display and Brightness (iOS) or General (macOS): Choose the corresponding section to find display options.
  3. Choose Dark Mode: Tap on ‘Dark’ to enable Dark Mode across your device, which will also affect Safari.

Summary: Dark Mode offers a consistent and eye-friendly interface that can indirectly diminish the website tinting effect, but it changes the entire system’s color scheme, which might not be preferable during the day.

Customize Website Preferences

Customizing specific websites in Safari can slightly alter how website tinting affects your browsing experience.

  1. Visit a Website: Open Safari and go to the website you want to customize.
  2. Access Website Settings: Click the ‘aA’ icon in the address bar and select ‘Website Settings.’
  3. Modify Appearance Settings: Here, you can adjust site-specific settings which may alter how website tinting is applied. However, options may be limited.

Summary: This offers a more tailored browsing experience but it’s not a comprehensive solution to disable website tinting altogether.

Reduce Transparency in iOS

Reducing transparency can limit the visual effects of website tinting by adding a solid background to some areas of the interface.

  1. Go to Settings: Start by opening the ‘Settings’ app.
  2. Accessibility Options: Scroll down and tap on ‘Accessibility.’
  3. Increase Contrast: In Accessibility, find and tap on ‘Display & Text Size,’ then toggle on ‘Reduce Transparency.’

Summary: Reducing transparency offers a more readable experience and may help in minimizing website tinting effects, but it’s a system-wide change that applies to more than just Safari.

Use a Content Blocker

Content blockers can sometimes prevent certain elements that contribute to website tinting from loading.

  1. Install a Content Blocker: Download and install a content blocker from the App Store.
  2. Configure in Settings: Go to ‘Settings,’ then ‘Safari,’ followed by ‘Content Blockers,’ and enable the blocker you installed.
  3. Browse Safari: Test to see if the content blocker has affected the website tinting on your favorite sites.

Summary: A content blocker may unintentionally reduce website tinting effects, but it can also block other content or features on a site.

Clear Website Data

Sometimes, clearing website data can reset Safari’s functionality, potentially impacting how website tinting is applied.

  1. Open Settings: Go to the ‘Settings’ app on your device.
  2. Choose Safari: Scroll and tap on ‘Safari.’
  3. Clear Data: Select ‘Clear History and Website Data’ to reset Safari’s stored website information.

Summary: Clearing data refreshes Safari’s performance; however, it’s unlikely to turn off website tinting and will log you out of most websites.

Update Your Device

Ensuring your device has the latest software updates can sometimes provide additional options for managing Safari’s behavior.

  1. Open Settings: Go to the ‘Settings’ app.
  2. Navigate to General: Tap on ‘General.’
  3. Software Update: Select ‘Software Update’ and download and install any available updates.

Summary: Updating your device can offer new features and settings to enhance your browsing experience but may not directly address website tinting.

Ask for Expert Assistance

If you’ve tried everything and still can’t turn off website tinting, seeking help from tech experts at an Apple Store, or through Apple Support online can provide a solution.

  1. Seek Assistance: Visit the official Apple Support website or book an appointment at an Apple Store.
  2. Discuss the Issue: Explain your situation regarding website tinting and the steps you’ve taken.

Summary: Professional help can guide you through troubleshooting steps you might have missed, but it requires time and possibly a visit to the store.


Whether for aesthetic consistency, better readability, or personal preference, turning off website tinting in Safari is an achievable task that can be tackled from several angles. While some steps offer direct control over the feature, others provide ways to mitigate its presence as part of a broader adjustment. Remember, tweaking such settings is not just about changing how your browser looks but also about tailoring your device’s interface to your comfort and needs.


Q: Will turning off website tinting affect the performance of Safari?
A: No, turning off website tinting is purely an aesthetic preference and does not impact the performance of Safari.

Q: Is website tinting available on all websites when using Safari?
A: Website tinting is a feature available on many websites, but not all. Some websites might not change the color of Safari’s toolbar due to their design choices or if Reader Mode is activated.

Q: Can I turn off website tinting on a per-site basis?
A: As of the current software versions, there isn’t a standard option to disable website tinting for individual sites without using content blockers or specific configurations, which may not be directly related to tinting.

You may also like

Leave a reply

Your email address will not be published. Required fields are marked *

More in How-To