Exaggerated colors in Firefox

[LawrenceBraunstein]

I’m having problems with how Firefox is displaying colors. Recently, after uploading photos to a gallery on my website via the SmugMug plugin in Lightroom 6.4 (Publish Services), I noticed Firefox (v. 44) was displaying colors with greatly exaggerated saturation. After opening the same webpage in Safari and Chrom, the colors looked fine and were actually very close to how they look in Lightroom (and Photoshop, for that matter).  Of course, all photos were exported as JPEGs and in sRGB color space. This seems to be purely a Firefox problem. I’ve included a screenshot of how Firefox’s color management parameters are set at present. My display is a NEC SpectraView Reference PA 272W and is calibrated regularly with an i1 Display Pro using SpectraView II software. I’m running OS X (v. 10.11.3) on a 2009 Mac Pro. Any help you could give me is much appreciated.

Many thanks,

Larry

[Soli]

Strange, having the opposite problem on Windows 10. Chrome is too saturated and red. Firefox and Edge look normal (but not 100% alike).

[Simon Garrett]

You have Firefox gfx.color_management.mode set to 1, which means that it will attempt to colour-manage images even if they don't contain embedded profiles (assuming images without profiles are sRGB).  No other PC browser does that, but I don't know about a Mac, which I see you're using.  On a PC, other browsers won't colour manage images that don't contain profiles, which means they look awful (over-saturated) on a wide-gamut monitor. 

As Soli says, normally that would mean Firefox was OK, but for images without embedded profiles then other browsers would be over-saturated on a wide-gamut monitor.  I don't know if Smugmug removes embedded profiles?

Allowing for my almost total ignorance of Macs, my immediate reaction would be to check that the monitor is properly calibrated/profiled, the profile properly installed (however you check that on a Mac), and that the profile software creates "Version 2" or "v2" profiles.  Some software doesn't like v4 profiles, but the default for calibration software is often v4.  If it's currently set to create v4 profiles, might be worth recalibrating with v2 to see if it makes a difference. 

Whatever, it sound like it might be a profile problem.

Edit: Thinking about this more, it sounds as though colour-management is not working with Firefox (so sRGB colours are over-saturated on a wide-gamut monitor) but colour management is working on other browsers. 

Looking again at the settings you show, on a PC normally you would not set gfx.color_management.display_profile, as that overrides the system settings (and normally the display profile is set in the system, and Firefox - or any other colour-managed program - gets it that way).  Did you set that, or does the NEC software set that?  And is the linked file the current profile?  I don't know about Macs, but as I say gfx.color_management.display_profile normally wouldn't be set on a PC. 

You have the v4 setting enabled, but I'd still try using v2 profiles.  V4 profiles seem to create issues even for programs that in theory can handle them. 

[Soli]

Sorry for the slight hijacking: Actually I think Chrome might be right and Edge and Firefox doing it wrong:

http://regex.info/blog/2012-03-27/1964

Chrome display his face as slightly pinkish, whereas Firefox / Edge is more pale/yellowish.  Surprisingly Lightroom agrees with Chrome, so I guess that settles it.

[LawrenceBraunstein]

Problem solved!

In my desperation I first deleted then reinstalled Firefox.  The fresh install did the trick.  Colors now look as they should.  Perhaps it was an extension which was causing the problem or maybe a corrupt program file.  In any case, all is well.  Thank you to all those who responded to my plea for help!

With best regards,

Larry

[Soli]

Good that you worked it out. I found out that you have to manually enable color management in Firefox (at least on Windows), whereas in Chrome it's enabled by default. Microsoft Edge doesn't seem to do any color managment. But all three browsers used the embedded profile in the picture from the site I linked to (or else his face would be blue, like on iOS), but only Chrome went one step further.

[Simon Garrett]

Good that you worked it out. I found out that you have to manually enable color management in Firefox (at least on Windows), whereas in Chrome it's enabled by default. Microsoft Edge doesn't seem to do any color managment. But all three browsers used the embedded profile in the picture from the site I linked to (or else his face would be blue, like on iOS), but only Chrome went one step further.

That's not what I find!

Out of the box, Firefox behaves the same way as Safari and Chrome on Windows.  It colour manages without any setting altered (so long as the monitor is calibrated and profiled, obviously).

However, it has an additional feature that can be turned on by setting gfx.color_management.mode to 1 (from its default value 2). Then Firefox will colour-manage graphic elements that do not contain an embedded profile (assuming them to be sRGB).  Neither Safari or Chrome will do that.   

Were you thinking about the setting gfx.color_management.enablev4?  Be default this is false, so that Firefox won't work with v4 profiles.  Apparently, v4 profiles take more processor effort, so the code is turned off by default.  In any case, there is no real benefit to v4 profiles, and I think it better to use only v2 profiles. 

[Soli]

No I use v2.

But after a new comparison, Firefox is still not quite the same as Chrome/Lightroom. Maybe the rendering intent is different.
try open http://regex.info/i/cs/JF7_108453-FunkyRGB.jpg in firefox/chrome, you'll see it renders differently.

[Simon Garrett]

No I use v2.

But after a new comparison, Firefox is still not quite the same as Chrome/Lightroom. Maybe the rendering intent is different.
try open http://regex.info/i/cs/JF7_108453-FunkyRGB.jpg in firefox/chrome, you'll see it renders differently.

That's odd.  On my (Windows 10) system, Firefox, Chrome, Safari, Lightroom and Windows Photo Viewer all render that image almost identically on my two wide-gamut monitors.  IE and Edge both make a complete Horlicks of it, because they don't colour-manage properly and can never display an image correctly on any monitor with a gamut that isn't very close to sRGB. 

However, that image contains one of Jeffrey Friedl's odd-ball profiles, so I'd be cautious of using that as a test image. 

[Simon Garrett]

A further test of colour mangement in browsers: I've just created a page with the same image in sRGB, Adobe RGB and ProPhoto RGB.  Each contains 100% saturated colours, so the Adobe RGB image should show more saturated colour than the sRGB image, and likewise for the ProPhoto RGB image. 

Each image is also displayed with no embedded profile to show how the browser handles images with no profiles. 

See http://www.simongarrett.co.uk/TestColours.htm

[Doug Gray]

A further test of colour mangement in browsers: I've just created a page with the same image in sRGB, Adobe RGB and ProPhoto RGB.  Each contains 100% saturated colours, so the Adobe RGB image should show more saturated colour than the sRGB image, and likewise for the ProPhoto RGB image. 

Each image is also displayed with no embedded profile to show how the browser handles images with no profiles. 

See http://www.simongarrett.co.uk/TestColours.htm

Nice job. Illustrates the way browsers "color manage" to use the term loosely.

Even though I use IE on my main system and FF on some virtual machines, I'm not at all unhappy with it.  Unless I am working with more saturated images in Photoshop, I run my monitors set to sRGB at D50 (can't stand the way too bluish D65). When I select wide gamut the colors of all the various non-image programs I use are just too saturated and it tends to distort photo work. So, when in Photoshop, I just switch over to wide gamut, also at D50, when needed.

Perhaps someday when or rather, "if," color managed apps, including regular apps that don't become supersaturated in wide gamut monitors, becomes ubiquitous I will change this. Until then I'll stick with sRGB for day to day work like programming or Excel, text editing and such.

[digitaldog]

Nice job. Illustrates the way browsers "color manage" to use the term loosely.

There's also these resources (Thanks to Simon for providing a 3rd):


http://www.color.org/version4html.xalter


http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html

[Tim Lookingbill]

A further test of colour mangement in browsers: I've just created a page with the same image in sRGB, Adobe RGB and ProPhoto RGB.  Each contains 100% saturated colours, so the Adobe RGB image should show more saturated colour than the sRGB image, and likewise for the ProPhoto RGB image. 

Each image is also displayed with no embedded profile to show how the browser handles images with no profiles. 

See http://www.simongarrett.co.uk/TestColours.htm

In Firefox 44.0 on Mac OS 10.6.8 all images look identical (both left and right/all color spaces which I'm assuming the data is in) on my calibrated/profiled "sRGB-ish" display. If Firefox was assuming sRGB for non-tagged data then I'ld see ProPhotoRGB/Argb data version look very desaturated and it's not. What's going on here?

[Doug Gray]

In Firefox 44.0 on Mac OS 10.6.8 all images look identical (both left and right/all color spaces which I'm assuming the data is in) on my calibrated/profiled "sRGB-ish" display. If Firefox was assuming sRGB for non-tagged data then I'ld see ProPhotoRGB/Argb data version look very desaturated and it's not. What's going on here?

Simon explains it thus:

On a normal-gamut monitor (not wide-gamut) then all six images should look the same or similar.  This is because normal-gamut monitors have a colour space that does not extend beyond sRGB (or not much beyond).  If all six images do not look very similar, colour management isn’t working (or you are using a monitor with a gamut wider than sRGB). 

[Simon Garrett]

In Firefox 44.0 on Mac OS 10.6.8 all images look identical (both left and right/all color spaces which I'm assuming the data is in) on my calibrated/profiled "sRGB-ish" display. If Firefox was assuming sRGB for non-tagged data then I'ld see ProPhotoRGB/Argb data version look very desaturated and it's not. What's going on here?

If your monitor is close to sRGB then obviously it can't show colours beyond sRGB.  On the ProPhoto RGB and Adobe RGB images, the colours are all outside sRGB.  If colour management is working, then they should be mapped to the closest equivalent that is within sRGB.  From memory (when I created the colour blob images some time ago) the hue is the same on each blob in each colour space.  The result is that when (for example) the ProPhoto RGB red is mapped to the nearest colour in sRGB, it will be the same as the red in the sRGB version.  The same applies to each colour, and also to the Adobe RGB image.  Thus, on a correctly calibrated and profiled monitor with close to sRGB gamut, all three images should look the same. 

[I see Doug has just explained the same thing, only in different words!]

[Doug Gray]

[I see Doug has just explained the same thing, only in different words!]

Simon, Not my words! I just quoted your words from your link. 

[Tim Lookingbill]

 

(left image with embedded profile, right image with no embedded profile):

That's from Simon's linked page. Data that is maxed out in saturation outside of sRGB created in a wide gamut space but not tagged should look off in some form if not with less saturation. Are you saying that I should see them all the same on an sRGB-ish gamut display?

It's confusing what you're attempting to demonstrate so all I can understand is that you meant to show color management in browsers viewed on wide gamut displays by showing how screwed up untagged fully saturated ProPhotoRGB color data should look.

[Soli]

That's odd.  On my (Windows 10) system, Firefox, Chrome, Safari, Lightroom and Windows Photo Viewer all render that image almost identically on my two wide-gamut monitors.  IE and Edge both make a complete Horlicks of it, because they don't colour-manage properly and can never display an image correctly on any monitor with a gamut that isn't very close to sRGB. 

However, that image contains one of Jeffrey Friedl's odd-ball profiles, so I'd be cautious of using that as a test image.

Firefox does well, but Chrome does have some more saturated magenta, and renders pretty much exactly like Lightroom. It's obvious in this picture, but it's consistent throughout the web. I'll add that my laptop display is a little desaturated before calibration, but that shouldn't matter.

[Simon Garrett]

That's from Simon's linked page. Data that is maxed out in saturation outside of sRGB created in a wide gamut space but not tagged should look off in some form if not with less saturation. Are you saying that I should see them all the same on an sRGB-ish gamut display?

It's confusing what you're attempting to demonstrate so all I can understand is that you meant to show color management in browsers viewed on wide gamut displays by showing how screwed up untagged fully saturated ProPhotoRGB color data should look.

With untagged images (no embedded profiles) I guess in general all bets are off, as different viewers and browsers will make different choices about how to render the image.  There are two likely choices:

• Assume the image is sRGB, and colour-manage accordingly.  From my tests on a PC, no browser does that by default, but Firefox will if you set gfx.color_management.mode to 1.  In that case, colours that are outside sRGB gamut will be mapped to the nearest in-gamut equivalent.  With the colour blob images I linked, the in-gamut equivalent of the colours on the Adobe RGB and ProPhoto RGB blobs are likely to be very close to the equivalent colours in the sRGB images, so they will look the same.
• Don't colour manage.  That seems to be the default behaviour of all browsers.  That means that, for example, the Adobe RGB image data is sent to the screen unaltered.  As a result, for example, the red colour will appear as whatever is the native red of the monitor.  For a narrow-gamut monitor with a colour space close to sRGB, it will look the same as the tagged sRGB image.  For a wide-gamut monitor it will look more like the Adobe RGB or ProPhoto RGB image.

[Soli]

I haven't had time to generate new profiles and test further, but using a lut+matrix profile might be part of the problem:

Here a screenshot of edge, firefox and chrome from http://www.color.org/browsertest.xalter
Since Chrome agrees with Lightroom, does that mean that Lightroom is buggy too? Or maybe Firefox defaults to Matrix in a LUT+Matrix profile. I'll try with a LUT only profile.