CSS3 grayscale filter looks different on different

Question

I have 3 icons of FCB, twitter and RSS and I want them to be grayscale but on hover they should change to color version. It is working great but these 3 images looks a bit different in grayscale. Is there a way to make them looks the same? This is my code for grayscale:

img.grayscale{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'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\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray;
    -webkit-filter: grayscale(1);
}

RSS and twitter looks almost the same but FCB icon is a lot darker. I think that the only way is to play with grayscale percentage. Is there any other solution?

Answer 1

You can add a class of fb on the fb image and set

img.fb {
     opacity: 0.7;   
}

This will give the illusion of making the image more light.

Here is the jsfiddle