Highlighted

Firefox color waaaaaay off

Enthusiast ,
Mar 06, 2020

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by mauricep27921461 | Adobe Community Professional

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.

Topics

Browser, How to

Views

774

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Firefox color waaaaaay off

Enthusiast ,
Mar 06, 2020

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by mauricep27921461 | Adobe Community Professional

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.

Topics

Browser, How to

Views

775

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Mar 07, 2020

Copy link to clipboard

Copied

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.


Best Regards, Maurice

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 07, 2020

Copy link to clipboard

Copied

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.

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 08, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Enthusiast ,
Mar 13, 2020

Copy link to clipboard

Copied

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.

 

Screen Shot 2020-03-13 at 11.05.14 AM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 13, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Enthusiast ,
Mar 14, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 15, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...