Why is Firefox changing the color calibration of this image?

Question

The symptom of my problem is that the same hex color in a PNG image does not match the CSS-defined color defined by the same hex code.

This problem only happens in Firefox when gfx.color_management.mode is set to 2 (tagged images only) rather than 0 (off). (Firefox ICC color correction described here).

The image is http://dzfk93w6juz0e.cloudfront.net/images/background-top-light.png which at the bottom has the color #c8e8bd. However, the shade of green is different to that color when Firefox color calibration is enabled.

Is this image inadvertently "tagged" for color correction?

Answer 1

It seems your image is tagged with a print profile, which is probably why you're seeing a different color. As stated on this article from Hacks Mozilla:

You can remove all of the color correction chunks resulting in an untagged image using pngcrush:

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png

Alternatively, you can use TweakPNG and delete the gAMA, cHRM, iCCP and sRGB chunks by hand.