15 Replies Latest reply on Mar 29, 2017 9:14 AM by Benjamin Root

    Oversaturated colors in browsers - color calibration issue

    ivframes Level 1

      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.

        • 1. Re: Oversaturated colors in browsers - color calibration issue
          Theresa J Adobe Community Professional

          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.

          • 2. Re: Oversaturated colors in browsers - color calibration issue
            Benjamin Root MVP & Adobe Community Professional

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

            • 3. Re: Oversaturated colors in browsers - color calibration issue
              Theresa J Adobe Community Professional

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

              • 4. Re: Oversaturated colors in browsers - color calibration issue
                ivframes Level 1

                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.

                • 5. Re: Oversaturated colors in browsers - color calibration issue
                  Benjamin Root MVP & Adobe Community Professional

                  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.

                  • 7. Re: Oversaturated colors in browsers - color calibration issue
                    ivframes Level 1

                    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?

                    • 8. Re: Oversaturated colors in browsers - color calibration issue
                      Benjamin Root MVP & Adobe Community Professional

                      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*

                      4 people found this helpful
                      • 9. Re: Oversaturated colors in browsers - color calibration issue
                        D Fosse Adobe Community Professional & MVP

                        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).

                        2 people found this helpful
                        • 10. Re: Oversaturated colors in browsers - color calibration issue
                          postrophe Level 4

                          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

                          • 11. Re: Oversaturated colors in browsers - color calibration issue
                            D Fosse Adobe Community Professional & MVP

                            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.

                            1 person found this helpful
                            • 12. Re: Oversaturated colors in browsers - color calibration issue
                              ivframes Level 1

                              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.

                              • 13. Re: Oversaturated colors in browsers - color calibration issue
                                Benjamin Root MVP & Adobe Community Professional

                                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

                                • 14. Re: Oversaturated colors in browsers - color calibration issue
                                  D Fosse Adobe Community Professional & MVP

                                  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.

                                  2 people found this helpful
                                  • 15. Re: Oversaturated colors in browsers - color calibration issue
                                    Benjamin Root MVP & Adobe Community Professional

                                     

                                    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 of this