Others: ???
If you use your color eyedropper to snag the blue color of the above element in Firefox, I can tell you what color it is: #3232FF. If you’re using a different browser, I can’t. Why is that?
If you test it in a non-Firefox browser you will notice a couple of things:
- the blue channel is fully saturated in both.
- the red and green channels are equally saturated in Firefox.
That implies that the opacity curve between, say, Chrome and Firefox are different. But why? If you look at the spec for CSS opacity it will point you to the SVG spec for alpha blending which gives you a simple formula that seems to imply that Firefox is correct.
But the real reason that there are color differences is that your non-Firefox browser is respecting your device’s monitor’s color profile. All the way back in February 2009, Firefox 3.5 introduced ICC color correction. However, it has not enabled color correction for all elements.
The bug tracking the work to enable this is #455077
Enable full color_management by default. The option to have a fully color-managed environment in Firefox, right now, has also been there this whole time, likely with a few bugs that have prevented its adoption. You can enable it by setting the about:config value for the property gfx.color_management.mode to 1.
If you’re wondering why your fancy alpha-blending web page layout looks different in Firefox and Chrome, this is the underlying reason. It is also a reason you should precalculate your colors instead of relying on opacity tricks at runtime if you desire consistency.