Convert an image to grayscale in HTML/CSS

Question

Is there a simple way to display a color bitmap in grayscale with just HTML/CSS?

It doesn\'t need to be IE-compatible (and I imagine it won\'t be) -- if

Answer 1

Based on robertc's answer:

To get proper conversion from colored image to grayscale image instead of using matrix like this:

0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0      0      0      1 0

You should use conversion matrix like this:

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

This should work fine for all the types of images based on RGBA (red-green-blue-alpha) model.

For more information why you should use matrix I posted more likely that the robertc's one check following links:

• The luminance and colour difference signals
• Margus's answer for question: "greyscalevalue in colorvalue" @stackoverflow part: Edit 2: @Hans Passant
• Charles A. Bouman - Purdue university - Analog TV page 20 & 21
• And here you can find some C# and VB codes