Google-chrome – How to turn web pages in browser into black & white (Grayscale)

browserfirefoxgoogle-chromeinternet explorer

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?

Best Answer

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)")}())
Related Question