How can I turn all colours of web pages into simple black and white, on my web browser?

Which browsers support this (Chrome, Internet Explorer, or Firefox)?

Is this even possible?

Fast-forward a couple years, and this can be done nicely in CSS.

body {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

  /* Chrome, Safari */
  -webkit-filter: grayscale(1);

  /* Firefox */
  filter: grayscale(1);
}

If you need a reusable shortcut that works on any website, the easiest thing is probably a bookmarklet, which can be used for a bookmarklet as if it were a URL. The code:

(function () {
  var body = document.body;
  body.style['filter'] = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
  if (!body.style['filter']) {
    body.style['-webkit-filter'] = 'grayscale(1)';
    body.style['filter'] = 'grayscale(1)';
  }
}());

And the bookmarklet snippet:

javascript:(function(){var e=document.body;e.style.filter="progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",e.style.filter||(e.style["-webkit-filter"]="grayscale(1)",e.style.filter="grayscale(1)")}())

I found this nice blog entry which explains how to do it in both IE and other browsers:

"“Grayscaling” in non-IE browsers" (James Padolsey)

The basics for IE specifically:

elem {
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  /* Element must "hasLayout"! */
  zoom: 1;
}

You'll want to make a custom CSS file and use that in the browser to apply to all pages (look into IE's Accessibility options).

For other browsers, it requires more work, including adding javascript to loop through elements and convert to grayscale. So it's not going to be "point'n'click B&W", but might get you headed in the right direction.

The blog has a demo page for it, and you can download the JS script from there.

I was looking for the same, and have found several options:

  • Grayscale Tool does what you want

    The downside is that you need to activate it on every page, and the shortcut is Shift+g, which does not work if you're in a text field. And any time you click something, you get colors again.

  • Page Filter Effect does this and more, and has a button you can click. Needs to be activated per-page.

  • Sheen offers a slider which allows to continuously shift between color and grayscale. Needs to be activated per page.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.