why does a grayscale Chrome extension help, and how do you set one up?

grayscale is one of the simplest changes you can make to a distracting site, and one of the most noticeable. the site still works. it just stops looking like something you want to keep looking at.

why grayscale works

color does a lot of quiet work on the sites that hold your attention. thumbnails are chosen and edited to be vivid. notification dots and badges are red because red is hard to ignore. a feed is, among other things, a stream of small bright images, each a tiny reward for scrolling one more time.

take the color away and that reward shrinks. the photos are still there, but a gray grid gives your eyes much less to catch on. the site becomes something you use rather than something you browse.

it’s not magic, and it doesn’t make a site impossible to use. that’s the point. it changes how much the site pulls without taking anything away you actually need.

whole screen or one site at a time?

your computer can already turn the whole screen gray:

• on a Mac: System Settings, Accessibility, Display, then turn on Color filters and choose Grayscale.
• on Windows: Settings, Accessibility, Color filters, then turn them on and choose Grayscale.

that’s fine for an evening, but on a computer you also work on, everything goes gray: documents, charts, photos, the design you’re reviewing. so a whole-screen filter tends to get switched off when you need color, and then stays off.

a browser extension can do it per site instead. Instagram and YouTube go gray; your documents, email and everything else stay in color. that’s the version that tends to last.

what to look for in a grayscale extension

not all of them work the same way. the things worth checking:

• per-site control. you should be able to choose exactly which sites go gray, and add your own.
• no flash of color. some extensions apply the filter after the page has loaded, so you see the colorful page for a moment first. that moment is the part you were trying to avoid.
• it doesn’t break the page. a careless filter can shift fixed headers, break scrolling or make menus misbehave.
• what it asks permission for. an extension that grays one site only needs access to that site. if it asks to read and change all your data on every website, it has access to much more than it needs.

how to set it up with dimmer

dimmer is a Chrome extension that does grayscale per site, along with a few other things that make distracting sites less pulling.

1. add dimmer to Chrome. it starts with Instagram and YouTube switched on, and you can pick others (TikTok, X, Reddit, Facebook) when you set it up.
2. grayscale is on from the start, on the free plan. the sites you chose turn gray from the first frame, before anything is drawn, so they never flash in color.
3. to gray another site, open it and choose “dim this site” in dimmer’s toolbar popup. Chrome asks your permission for that one site and nothing else, and the page turns gray straight away, without reloading.
4. if you only want part of a site gray, say youtube.com/shorts but not the rest of YouTube, set that in dimmer’s settings under the site’s “where”.

turning grayscale off later works, but it waits 24 hours, and you can cancel it during that time. turning things on is always instant. the delay is there so the decision gets made by the version of you that set it up, not the one who wants one more scroll.

make it stick

grayscale works best as one layer among a few. you can get used to gray, so it helps to pair it with something that interrupts the habit, like a short pause before the site opens or hiding the feed that started the scroll. if Instagram is the one you’re fighting, our guide on how to make Instagram boring puts these together. if you’re choosing between extensions more broadly, what a focus extension should do compares the main approaches.