Website tinting changes parts of your browser interface to match the colours of the website you are viewing.

If you have ever loaded a website on your iPhone and noticed Safari’s top bar change colour, you have seen website tinting in action. Depending on the browser and layout, the effect can appear around the address bar, tabs or status area.

Browsers may use a colour suggested by the site or derive the appearance from page backgrounds. This article explains how tinting works, how to turn it on or off, and what to check when setting it up.

For a business website, treat tinting as a finishing detail. Our website design services put readable pages and usable navigation first; browser colours should support them.

What Is Website Tinting and How Does It Work?

In browsers that support it, a theme-color meta tag suggests a colour for the interface around the page. The HTML element belongs inside the <head> section of your webpage, and the browser decides whether and where to apply it.

The tag itself is simple: <meta name="theme-color" content="#4c8bf5">. The MDN theme-color reference documents CSS colour values and marks the feature as having limited availability.

Keep the code spelling: use theme-color, even in an Australian English website. A tag named theme-colour does not set the standard theme colour.

  • Chrome on Android can use the tag to colour parts of its browser interface.
  • Safari’s appearance depends on its version, tab layout and the visitor’s settings.
  • Other mobile browsers may apply colour hints differently or ignore them.
  • A desktop browser window does not necessarily behave like an installed web app.

Use a real device to check the result. Seeing the right tag in the page source confirms the suggestion exists, but does not guarantee a coloured toolbar.

Website Tinting on Safari and iOS

Safari made website tinting more visible with iOS 15. WebKit’s Safari 15 release notes describe theme-color support for the status bar and overscroll area on iOS, with tab-bar effects in compact layouts on macOS and iPadOS.

For brands with recognisable colours, a matching toolbar can help the page and browser frame look consistent. A site with a deep navy header may produce a navy-tinted appearance, but the exact result depends on Safari rather than the brand colour alone.

  • Tinting changes the browser interface rather than recolouring page text.
  • The visitor’s Safari preferences can limit the effect.
  • Page backgrounds and browser layout can influence what appears.
  • Check both a fresh page load and navigation between pages.

A Safari 26.2 issue reported to WebKit describes status-bar colours changing after back navigation and a theme-color workaround having no effect. That report concerns a particular layout and version; it is a reason to test your actual site, not to assume every Safari release behaves identically.

When a browser update changes the appearance of an existing site, ongoing website management can cover checking the affected pages and adjusting their implementation.

How to turn website tinting on or off in Safari

On an iPhone, look for Allow Website Tinting in Safari’s settings. Switching it off changes the browser appearance; it does not remove the website’s own colours or stop its forms from working.

  1. Open Settings, then Apps, then Safari on versions that group app settings there. Older versions use Settings, then Safari directly.
  2. Look in the Tabs section for Allow Website Tinting and switch it off or on.
  3. Return to Safari and reload a colourful page to compare the result.
  4. On a Mac, open Safari, choose Settings, then Tabs, and adjust Show color in tab bar where available.

Apple’s iPhone Safari settings guide confirms the Apps path, and its Mac browser customisation guide explains the tab-bar colour option. Labels and availability can vary with the operating system and Safari layout; on iPad, look for Show Color in Tab Bar as well.

If the option is missing, check the Safari settings for your device version. Do not assume you need an extension, or that a translucent toolbar is controlled by that one switch.

Leave tinting on if you like the effect and can easily read the controls. Turn it off if colour changes distract you; neither choice makes the website itself better or worse.

What Is Website Tinting in Dark Mode?

Dark mode changes how developers need to think about website tinting. A bright brand colour can feel harsh against a dark interface, so browsers that honour theme-color media queries can be given separate light and dark colours.

You can set separate tint colours for light and dark mode using the media attribute on the meta tag: <meta name="theme-color" content="#003580" media="(prefers-color-scheme: light)"> and <meta name="theme-color" content="#001f4d" media="(prefers-color-scheme: dark)">. The browser picks the correct one automatically based on the user’s system setting. This is a colour suggestion for supporting browsers, rather than a command that overrides their settings.

A deeper version of your brand colour is a useful starting point for a dark appearance. Check the actual toolbar text and icons before settling on it; you do not choose their colours yourself.

  • Define a light mode colour using the standard or light-scheme meta tag
  • Define a dark mode colour using media="(prefers-color-scheme: dark)"
  • Test both appearances on a real device, not just browser dev tools
  • Check that toolbar text and icons remain easy to recognise in each appearance

Website Tinting vs. Colour Schemes and Browser Themes

Website tinting is often confused with your page’s colour scheme, a personal browser theme or the color-scheme CSS property. They control different parts of the experience.

Feature What It Controls Who Sets It
Website tinting (theme-color) Browser toolbar/interface colour The website suggests; browser and visitor settings decide
Page colour scheme Background, text, and element colours on the page The website’s CSS stylesheet
Browser theme (user) The browser’s default interface appearance The end user via browser settings
color-scheme CSS property Signals light/dark preference to the browser for form controls and scrollbars The website’s CSS stylesheet
Web app manifest theme_color Tint colour when the site is installed as a PWA The website’s manifest.json file

Website tinting via the meta tag and the manifest theme_color are related settings. A manifest can suggest a global colour for an installed Progressive Web App (PWA), while a webpage can provide its own colour hint; the result still depends on the browser and platform.

Why Website Tinting Matters for User Experience

On mobile devices, the browser interface wraps tightly around your content. Without tinting, a white or grey toolbar creates a visual disconnect between your page design and the browser frame. With tinting, the brand colour flows into that frame, making the experience feel more cohesive.

Tinting can also make a regular website feel more like an app, even when it is not a PWA. It is an optional visual effect: visitors who prefer a neutral browser interface should still have a readable, usable site.

With Website Tinting

  • Browser toolbar matches brand colour
  • Feels immersive and app-like
  • Consistent brand presentation on mobile
  • Can make page and toolbar colours feel connected

Without Website Tinting

  • Generic grey or white browser toolbar
  • Visual break between page and interface
  • Brand colours stay within the page
  • Stable browser colours for visitors who prefer them

How to Set Up Website Tinting on Your Site

Setting a theme-color hint is a small technical task in web development. The important parts are using the right identifier, placing it in the page head and checking the browser’s response.

  1. Decide on your primary brand colour in hex format (e.g., #1a56db)
  2. Add <meta name="theme-color" content="#1a56db"> to the <head> of your HTML
  3. Optionally add a second tag with media="(prefers-color-scheme: dark)" for dark mode
  4. If your site uses a web app manifest, add "theme_color": "#1a56db" to that file as well
  5. Test on a real mobile device using both light and dark mode settings

In WordPress, the available control depends on your theme or plugin. Ask your developer to add the tag through the site’s head output or an appropriate theme setting; pasting it into an article body does not put it in the right place.

This belongs in the testing stage of the website design process, alongside checking navigation and forms on phones.

A grey browser bar does not prove the tag is missing. The browser may ignore the hint, use another background, or have tinting disabled; understanding what web design involves helps distinguish the page’s styling from the browser’s own controls.

Why is website tinting not working?

A colour mismatch can come from the website or the browser. Work through these checks before changing a site’s design.

  1. Confirm tinting is enabled in the visitor’s Safari settings, if that option exists.
  2. Inspect the page head for name="theme-color" and a valid colour value. Avoid duplicate tags with conflicting colours for the same appearance.
  3. Check light and dark mode separately. The correct media query is prefers-color-scheme.
  4. Reload after clearing the relevant site cache so you are testing the updated HTML.
  5. Compare the page in Safari and Chrome on actual devices. Scroll, follow an internal link and use the back button, since the appearance may change during navigation.

For a structured check beyond the toolbar, the 30-minute business website audit process provides a way to review the rest of the page. Record the device and browser version with each tinting problem so the developer can reproduce it.

Website Tinting and SEO: What You Need to Know

Website tinting is a presentation setting, and should not be sold as an SEO improvement. Google’s supported meta-tag documentation covers search metadata and says unsupported tags are ignored; it does not identify theme-color as a search control.

  • Keep tinting decisions focused on appearance and readable controls.
  • Do not infer better rankings or longer visits from a coloured toolbar.
  • An installed app’s colour settings do not create extra Google Search features by themselves.
  • A neutral toolbar can be a deliberate visitor preference, rather than a technical fault.

Understanding what a website domain is and how website hosting works helps separate those essentials from visual details such as tinting. Get the essentials right, then check how the finished site looks on the devices your customers use.

Frequently asked questions about website tinting

Website tinting involves a browser preference and colour hints from the page.

What does Allow Website Tinting mean?

It lets Safari adapt parts of its surrounding interface to the website you are viewing. The site supplies colour information, while Safari and your preferences determine the visible effect.

How do I turn website tinting off or back on?

Open Settings, then Apps, then Safari, and look under Tabs for Allow Website Tinting. Older iOS versions place Safari directly in Settings; switch the option off or on, then reload the page.

Why can’t I find Allow Website Tinting?

Labels depend on the operating system and Safari layout. On Mac, and some iPad layouts, look for Show Color in Tab Bar.

Should I leave website tinting on or off?

Keep it on if you like matching browser colours and can read the controls clearly. Switch it off if colour changes are distracting; it is a personal appearance preference.

Does turning off tinting change the website?

Turning it off changes the browser interface rather than the page styling. A blue website header remains blue, and the setting does not disable links, booking forms or other page functions.

Is website tinting the same as dark mode?

No. Dark mode changes the light or dark appearance of the system and participating pages; tinting changes the colours around a page. A supporting browser can use different theme-color hints for each appearance.

Why does my theme-color tag not change Safari?

A theme-color tag is a suggestion, and Safari’s version, layout, page backgrounds and preferences can affect the result. Check its spelling and head placement, then test a fresh load, scrolling and back navigation rather than assuming the tag forces a colour.

Does website tinting work in Chrome on Android?

Chrome on Android can use a theme-color hint for parts of its interface. It does not offer an identical experience to Safari, so check the actual device rather than relying on a desktop preview.

Can a website override a visitor’s tinting preference?

The website can suggest a colour and set its own page backgrounds, but it cannot require the browser to display a particular toolbar colour. Keep the page usable when the browser ignores that suggestion.

The Bigger Picture: Design Is in the Details

Website tinting is a small feature, but it is worth checking as part of a professional build. Fonts, page backgrounds and toolbar colours can work together without making navigation harder to use.

Understanding what a website domain is, how hosting works, and why details like tinting matter all contribute to making better decisions about your online presence. The best websites are built with intention at every level.

If you would like a website that handles these details properly, get in touch with our team. You can also learn about the KC Web Design team before discussing your project.