Oversaturated colors in browsers - color calibration issue

[ivframes]

I think I have a problem with color management.

I calibrated both of my displays by DisplayCAL and Spyder. Colors seem to be correct. The program loads the profile(s) automatically at startup.

This my workflow:

1. Import RAW to LR. Tweak in LR.

2. Export image to PS using Prophoto RGB profile.

3. Final tweaking in PS, converting it to JPG with AdobeRGB profile.

4. Checking how the image looks in the Firefox or Chrome. It's always more saturated! Especially reds.

I can "emulate" the same browser-look in PS if I save the image to sRGB and then show MonitorRGB proof colors.

Why this happens? I'm using Windows 10, default profile is the same that DisplayCAL created. What should I do now?

Thanks.

[Theresa J]

I have the same exact problem. It happened after I calibrated my two monitors with an i1 display Pro. I did a bunch of research and then just gave up, and started using Safari. That is the only browser for me that doesn't destroy colors.

[Benjamin Root]

For web use, unless you have a specific reason/goal, always use sRGB.

[Theresa J]

Yeah but sRGB makes no difference. The entire browser is saturated.

[ivframes]

Yeah, true. I see no difference in browser.

The only difference between sRGB and AdobeRGB is when I use Proof Colors -> MonitorRGB in Photoshop. With sRGB image, I can see the same saturation as in the browser with proof turned on.

[Benjamin Root]

You guys may find this helpful How to configure Firefox color management

[Benjamin Root · Accepted solution]

Never had that problem at my end with Chrome. Of course, I don't use a wide gamut display. You guys probably do and will need a fully color managed browser.

Standard displays are very close to sRGB, while wide gamut are close to Adobe RGB. The characteristics of Adobe RGB are less saturated, shall we say. Therefore, when the monitor translates the sRGB data as Adobe RGB the resul is over saturated, off color.

[ivframes]

Thanks Benjamin, makes sense.

But is it advisable to lower the saturation so the guys with sRGB display will see it properly (despite image looking washed out on our end)? Or should we just keep all the goodies inside if someone decides to print that, never mind the saturated sRGB look?

[Benjamin Root]

Most people have standard gamut monitors, which means an sRGB image on the web will display the same as the image in Photoshop for you. Well, relatively speaking - most aren't color calibrated, but it will be close.    Only the small percentage of folks with wide gamut monitors would see the off color you are seeing, and that would be if their browser is not color managed.

Now saving your image as Adobe RGB is an entirely different story. Some web browsers treat all images as if they were sRGB. Which means the opposite effect of what you are seeing: desaturated colors. Of course, some browsers can tell the difference between a photo saved in sRGB or Adobe RGB. Which is likely why, as Theresa mentioned, you'd see no difference between an image saved as sRGB or Adobe RGB.

You see, the profile an image is saved in and the display profile are two different beasts. In a fully color managed atmosphere, a program interprets the image data according to the icc tag in the metadata. From there, the data is then converted to the display profile and sent to the display.

The problem with non color managed programs? They have no idea what a monitor profile is, so they send sRGB data (which is close to what a standard gamut monitor displays) to the monitor. But the monitor displays the sRGB data as if it were already tuned for the monitor. Great, providing your monitor is standard gamut (again, which is what most folks have). However, if you have wide gamut monitor (which is close to Adobe RGB) you have a big inconsistency = pretty much sRGB data displayed as if it were Adobe RGB data. A color managed program will know what the monitor profile is, and convert the image data before sending to the monitor.

On the other hand, if a program/browser isn't able to tell an sRGB image from an Adobe RGB image, all images will be interpreted as if they are sRGB. This is way before the monitor is involved. Pretty much = Adobe RGB (or whatever the image profile is) read as sRGB.

Long story short, all browsers know what sRGB is; some know what other profiles are. So images for the web should be sRGB.

But is it advisable to lower the saturation so the guys with sRGB display will see it properly (despite image looking washed out on our end)? Or should we just keep all the goodies inside if someone decides to print that, never mind the saturated sRGB look?

As for others' monitors, you have no control over that. All you can do is make sure you have a color managed atmosphere when editing (which you do in LR, PS and other color managed programs). If you have both that and post to the web as sRGB, you have done your job - the images will show as close to what they really are as their system allows.

Now, if you begin to see color shifts between one color managed program to another (LR to PS) that indicates a broken monitor profile. In which case, you'd need to do a new, fresh calibration to create a new profile.

*Edited to add more info, and correct typos*

[D Fosse]

All of this is what happens when you use a wide gamut monitor without full color management.

The color profile must be embedded. Remember that Save For Web and Export both strip the profile at default settings! The "include profile" box must be checked.

The whole Firefox UI will be oversaturated unless you set it to color management mode 1. This is a required setting with wide gamut displays! Enable v4 profiles while you're at it. This way Firefox will correctly handle anything you can throw at it, and always display correctly.

AFAIK Safari in later versions has adopted the Firefox mode 1 policy (they'd simply have to, with the recent DCI-P3 displays). So it should also work well. This is the Mac version - I think the Windows version still has the old behavior (haven't tested it in a while).

[postrophe]

Hi

(I'm a Mac user) - MacBookPro retina -

I just check a few sites that I manage ( old or new)  in different browsers ( Safari, Firefox, Chrome, Opera )

The images were created in divers software and Mac OS, ( PS, IPhoto, Photos, and some other core mac software. )

All images are consistent from the oririginal across my browsers. Also on my old PC laptop.

Pierre

[D Fosse]

The question is what happens with a wide gamut display, when the old sRGB paradigm breaks down and doesn't work anymore.

Then you must have full color management. You need an embedded color profile, you need a valid monitor profile, and a web browser that reads both and converts the data before going to screen.

Even if you have a color managed browser - how does it deal with untagged images and graphic page elements? That's where the color management chain normally breaks down. There's nothing to convert from, and so no way to convert to. So the original numbers are just sent straight to the display uncorrected. That doesn't work on wide gamut, it gets oversaturated.

This is the genius of Firefox mode 1, a strategy now adopted by Safari on Mac. It assigns sRGB if no profile is already there. This means the standard color management chain can operate again.

But there's an added, little known benefit. It means that everything, even untagged material, is fully color managed in all situations. That's a fully color managed internet, ladies and gentlemen, and it's already here if you just flip the switch.

[ivframes]

D fosse, I configured Firefox by your recommendation and it shows the colors as should! Thanks!

Also Benjamin, thanks a lot for your thorough explanation! I will copy paste your text for future reference.

[Benjamin Root]

Also Benjamin, thanks a lot for your thorough explanation! I will copy paste your text for future reference.

You're welcome!

D fosse, I configured Firefox by your recommendation and it shows the colors as should! Thanks!

Glad it's working fir you now. D Fosse is the real expert in color management here. In fact, a good portion of my knowledge has been learn from him

[D Fosse]

You're doing fine, Benjamin, but thanks

I do tend to stick my pointy nose in these threads, because I have an agenda. It's this: it's not as difficult as you think. A lot of myths surround color management, and the most persistent one is that it's so complicated.

Chris Cox once said it perfectly, so perfectly that I remember it word for word: Color management isn't difficult. Other applications breaking it, that gets difficult.

[Benjamin Root]

I do tend to stick my pointy nose in these threads, because I have an agenda. It's this: it's not as difficult as you think. A lot of myths surround color management, and the most persistent one is that it's so complicated.

Chris Cox once said it perfectly, so perfectly that I remember it word for word: Color management isn't difficult. Other applications breaking it, that gets difficult.

True! Now we just need to convince Trevor.Dennis of this