Firefox color waaaaaay off

[r_tist]

Hi,

I applied a red hex color with some alpha (transparency). All browsers render this just fine, except for Firefox. The red is so vivid it is painful on the eyes. Why such a drastic discrepancy? I have not experienced this before with color onscreen.

Using a retina ready Apple Mac. Any ideas aside from altering the color I'd like to use?

Is this really how the default color space is going to render? Seeking more information about why Firefox is doing this.

Thank you.

[thatsmauri · Accepted solution]

This indeed sounds like a Firefox-specific issue:
- https://support.mozilla.org/en-US/questions/1236424
- https://support.mozilla.org/en-US/questions/1171999

Try this: Set the gfx.color_management.mode pref to 0 on the about:config page to disable Color Management.

[Nancy OShea]

I export web images in Photoshop and convert to sRGB color space.  This ensures more consistent color management on the web. 

CSS colors  don't vary much on my computer.  However, I do notice fluctuations on other devices. But that's to be expected because they are not all calibrated the same way.

[Per Berntsen]

With the exception of Internet Explorer and Edge, all major web browsers are fully color managed these days.

This means that they not only color manage images, but also assign the sRGB profile to CSS colors.

Firefox is a special case, since it has three different options for color management, which are managed by typing about:config in the address field, and scrolling down to gfx.color_management.mode.

• Mode 0 = no color management
• Mode 1 = full color management, including assigning sRGB to untagged images (images without an embedded profile), and assigning sRGB to CSS colors.
• Mode 2=  color management for tagged images only (CSS colors are not color managed)

If you have Firefox set to mode 2 (or 0), CSS colors may not display correctly, and if you have a wide gamut monitor, they will display over saturated.

Windows users who use Internet Explorer or Edge on a wide gamut monitor will see all colors (images and CSS colors) over saturated.

Phones and tablets are not color managed, and can not be expected to display correct colors.

[r_tist]

Here is a screen capture. Left is Firefox. See how much it hurts the eyes? And I never fiddled with any settings in Firefox. I just want to ensure it appears more closely to the color on the right for all viewers.

Any modification edits I can do? Or code I can apply to help calm that color down? Thank you.

[Per Berntsen]

Most likely, Firefox is set to color management mode 2, so try setting it to mode 1, like I described above.

Double-click the line that says gfx.color_management.mode, then change 2 to 1 in the dialog, and click OK.

Then restart Firefox.

[r_tist]

OK, I can do that, but I'd like to know what the general public will see? By default, it sounds like the general public will get the blinding color.  : ( 

Correct?

[Per Berntsen]

What the general public will see depends entirely on what kind of monitor they have, and whether they are using a fully color managed web browser or not. It's the combination of a wide gamut monitor and a browser without full color management that's causing the over saturation. 

You have no control over what monitors or web browsers other people use, so there's nothing you can do to prevent this from happening. And, this has absolutely nothing to do with css or html coding.

For Mac users, this is generally not a problem, except those who have a wide gamut monitor, and use Firefox with Color management mode set to 2. (which I believe is the default) All other major web browsers for Mac are fully color managed.

On Windows, things are different, since neither Internet Explorer nor Edge are color managed.

Users with standard gamut monitors (which is what most people have) will see more or less correct colors. Those who use wide gamut monitors with these two browsers will not only see over saturated css colors, but also over saturated images.

But those who use Chrome, Opera, or Firefox with Color management mode set to 1 will not see over saturation.