1 2 Previous Next 55 Replies Latest reply: Mar 8, 2012 6:11 PM by Noel Carboni RSS

    “Save For Web” Problems After Calibrating Display

    macchiato.

      hi,

       

      before i further elaborate on my problem, let me try to sum it up for easier understanding:

       

      • monitor using sRGB profile, photoshop everything on sRGB -> all good
      • monitor using sRGB profile, photoshop everything on sRGB, after file is saved switch to calibrated profile on monitor -> all good
      • monitor using calibrated profile, photoshop everything on sRGB -> color shifts in image, hex color codes do not match

       

       

      i recently got rid of my external monitor (moving around a lot) which i had set to sRGB. colors were very close to what it would have been calibrated, which is why i never bothered to change color profiles. now that i am using only a notebook (mbp), however, it quickly became apparent that the sRGB color profile made look everything quite blue-ish. after calibrating the display, all was well, however...

       

      ... until i started working in photoshop. there are color shifts apparent and the hex color codes do not match up; i have never had this problem before.

       

      is there any setting in photoshop i might have overseen? as described above, it's not a problem as long as everything is set to sRGB and i use the calibrated profile afterwards; it only occurs when working with it.

       

      thanks in advanc

        • 1. Re: “Save For Web” Problems After Calibrating Display
          Noel Carboni Community Member

          What do you mean, specifically, by "hex color codes do not match"? 

           

          With your monitor profile in place, are you capturing your screen, then pasting into Photoshop with the assignment of a profile than your monitor profile, then expecting the color codes to match?

           

          If so, I believe you may have a fundamental misconception about how color-management actually works.

           

          They will not match, and this is to be expected.

           

          There are also concerns with some browsers (e.g., Internet Explorer) not being fully color-managed.

           

          -Noel

          • 2. Re: “Save For Web” Problems After Calibrating Display
            macchiato. Community Member

            i sometimes use hex color codes to "extend" an image via css. in order for that to happen, the color i picked in photoshop (of the image) has to obviously match said color. the problem is, though, that it does not do that (when viewed in a browser).

             

            i never had a problem with this when using "sRGB" as my color profile on my monitor. everything displays correctly when i work with the sRGB monitor profile and then switch to the calibrated profile as well. there is only a color shift/mismatch when i create the images with my calibrated profile set as active from the beginning...

            • 3. Re: “Save For Web” Problems After Calibrating Display
              D Fosse Community Member

              macchiato. wrote:

               

              it's not a problem as long as everything is set to sRGB and i use the calibrated profile afterwards; it only occurs when working with it.

              ...and this doesn't make any sense at all. Either the monitor is calibrated/profiled, or it isn't. You're not using the monitor profile on the document, are you?

               

              Edit: posted this just before macchiato's previous reply, but it doesn't clarify much.

              • 4. Re: “Save For Web” Problems After Calibrating Display
                macchiato. Community Member

                i am not using the monitor profile on the document, no.

                 

                my monitor profile used to be srgb, and all options in photshop were set to srgb as well. no problems whatsoever.

                 

                now my monitor profile is "blablablabla-calibrated"; all options in photoshop are still set to srgb. when using this configuration, colors picked in photoshop and used via CSS do not match the colors of the actual picture (in browsers).

                 

                 

                i am just having a hard time understanding why all is good when my monitor is set to srgb (or i set it to the calibrated profile after creating the graphics with the srgb profile), but it all falls apart when using the calibrated profile (the one created by spyder3) while creating the image.

                • 5. Re: “Save For Web” Problems After Calibrating Display
                  Noel Carboni Community Member

                  There are likely several reasons for what you're seeing:

                   

                  1.  Internet Explorer is not fully color-managed.  IE9 and newer will transform the color in images from whatever color space they're tagged with to sRGB (ignoring your monitor profile).  FireFox and Safari take into account your monitor profile.

                   

                  2.  Of all the browsers, only Firefox (with a special setting) will color-manage the HTML element colors (e.g., as specified by your CSS), assuming they are expressed in sRGB and transforming them to your monitor color space.  And the special setting is not the default, so almost no one is using it.

                   

                  3.  If you screen-grab an image then paste it into Photoshop, you have to know what color space the image is in and ASSIGN that profile in Photoshop, then CONVERT to whatever device independent profile you want to use.  This is because color-managed applications transform the RGB numbers to be in your monitor's color space.

                   

                   

                  Using sRGB for your monitor profile circumvented MANY of these issues, which gave you some advantages, but it also may have had some problems of its own:

                   

                  1.  If the monitor isn't accurately rendering colors in the sRGB color space then the color you're seeing is inaccurate.  How inaccurate is a function of how far from sRGB output characteristics your monitor is.

                   

                  2.  Internet Explorer is doing the right thing with its half-baked color-management logic because it assumes the monitor is sRGB.

                   

                  3.  Screen grabs can be directly pasted back into sRGB documents, because even in color-managed applications they are are in sRGB color space, which is the monitor's color space.

                   

                   

                  It's a common misconception that using a calibrator/profiler and producing a custom monitor profile makes things more consistent.  The color will actually look more accurate in fully color-managed applications like Photoshop, but will be less consistent across all applications.

                   

                   

                  -Noel

                  • 6. Re: “Save For Web” Problems After Calibrating Display
                    macchiato. Community Member

                    so, to put it bluntly, i am **** out of luck?

                     

                    that is, i can choose between a properly calibrated monitor and none-matching colors, or have my colors match up but use a standard uncalibrated profile?

                    • 7. Re: “Save For Web” Problems After Calibrating Display
                      Noel Carboni Community Member

                      I'll just add this in general:  It's probably a bad idea to try to match image colors to HTML/CSS colors, given that the world is only partially color-managed at this point.  ONLY with Firefox and ONLY with the special color setting that's not the default can you be sure that they'll match on all systems, because everything is color-managed.

                       

                      Otherwise it's kind of hit or miss.

                       

                      You could publish the image with no profile, and some browsers will just pass it through unmanaged, while others may assume it's sRGB.

                       

                      -Noel

                      • 8. Re: “Save For Web” Problems After Calibrating Display
                        Noel Carboni Community Member

                        macchiato. wrote:

                         

                        so, to put it bluntly, i am **** out of luck?

                         

                          Pretty much, but there actually IS *one* "best-of-both-worlds" alternative (and it's the one I have taken), but it requires some work "outside the box"...

                         

                        You can get the proper hardware and manually calibrate your system by hand (using video driver and on-monitor controls) so that your monitors actually DO put out a close match to actual sRGB color, then use the sRGB profile to describe them - which is then accurate.

                         

                        -Noel

                        • 9. Re: “Save For Web” Problems After Calibrating Display
                          macchiato. Community Member

                          thanks for the elaborate answers by the way...

                           

                          the part i don't get is that when everything was set to srgb, it always looked consistent (color picker -> css), even on other systems. and it still does. when i work with the monitor set to srgb, do all the color picking, create my css file, ... and after all is done switch back to my calibrated profile, the colors match. they might not look exactly like when i had my monitor on srgb, but they do match.

                           

                          however, when having activated my calibrated profile from the get-go, and i do all the "save for web, create css, and whatnot", nothing matches...

                           

                           

                           

                          //EDIT:

                          the macbook pro does not have any hardware buttons for the screen. afaik i have to create a new profile to change anything around, which is how i got into this mess to begin with

                          • 10. Re: “Save For Web” Problems After Calibrating Display
                            Noel Carboni Community Member

                            Not every application you're using to view your images is color-managed.

                             

                            To start to get a feel for why things are the way they are you have to first understand that every application that IS color-managed does the color-management itself, by transforming RGB color values from the document space into the monitor space.  The applications have to do it, because they are the only ones that know how to interpret the document color space.

                             

                            To FULLY understand just why things work the way they do, you have to be aware of all the specifics as well - i.e., which applications do NO color-management, which ones do PARTIAL color-management, and which ones do FULL color-management - and even which ones color-manage WHAT PARTS of their windows.

                             

                            Add to all that the possibility that your system may have bugs - e.g., in specific versions of applications or in the display driver's implementation of OpenGL - and you start to get a headache.

                             

                            If you have a specific observation of a color mismatch with specific operations, I (or others here) can try to give you the specific reasons for what you're seeing.

                             

                            -Noel

                            • 11. Re: “Save For Web” Problems After Calibrating Display
                              macchiato. Community Member

                              looks like i will have to buy an external monitor to solve my problem then (the solution you described is pretty much what i did before getting rid of my external monitor)...

                               

                              as for the specific observations:

                               

                              • say i create a yellow square in photoshop (working mode is srgb)
                              • i export this image via "save for web", uncheck embed color profile and check convert to srgb
                              • i use the color picker in photoshop to get the hex color code of said yellow square
                              • i create an html and css file, position the yellow square graphic and set the background to the color i got from the color picker in photoshop
                              • when opening the html file in a browser (this happens in every browser i have installed [chrome, safari, opera, firefox, IE], although some are more extreme than others), i can clearly see where the square ends and where it begins
                              • i cry a little inside

                               

                              again, this does not happen when my monitor profile is set to srgb while working on the file, only when it is anything but that. this problem also does not occur when i change my monitor profile right after creating the file.

                              • 12. Re: “Save For Web” Problems After Calibrating Display
                                gator soup Community Member

                                i didn't read this entire thread, but i understand what's going on and will try to help you with Photoshop and the theory that tripping you up

                                 

                                first, get a custom profile set as your OS default monitor so Photoshop can display your colors 'accurately'

                                 

                                the biggest problem with using a sRGB hardware preset on the monitor, setting sRGB as the default monitor (not profiling it), setting Photoshop's Working RGB to sRGB is: it sets Photoshop up to behave like Microsoft Internet Explorer on an uncalibrated system -- ugh

                                 

                                while that may solve your problem, it most certainly skews photoshop's ability to serve you as a trustworthy reference monitor

                                 

                                if you want to "match" Photoshop hex color to your page color — Convert to sRGB before setting the Photoshop hex color, Save for Web without a profile, and don't try to color manage your page color (i say this because setting a profile under css probably isn't working yet, if it is please show me a link where it is working)

                                 

                                the page (with no profile information) won't display like Photoshop, but the Photoshop and page hex colors should "match" on all web browsers

                                 

                                the problem is, specifically -- if your Photoshop hex color doesn't match your page hex -- one elemet or the other is being managed and the other isn't — the trick is to have the browser default the same profile to both elements

                                 

                                see "ANOTHER PROBLEM with Embedding ICC Profiles" (logo rollovers) near the bottom of the page here for more info

                                gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html

                                • 13. Re: “Save For Web” Problems After Calibrating Display
                                  macchiato. Community Member

                                  wait, so i should set my working rgb to my monitor profile? otherwise your "convert image to srgb" makes no sense... i thought that's a big no no?

                                  • 14. Re: “Save For Web” Problems After Calibrating Display
                                    ssprengel CommunityMVP

                                    You “convert to sRGB” because that is the least-common-denominator for people viewing images on computers you don’t have knowledge of and control over.  If you know everyone viewing your images will be doing so with a calibrated monitor and a color-managed viewer, then no need to convert, but otherwise, yes.

                                    • 15. Re: “Save For Web” Problems After Calibrating Display
                                      macchiato. Community Member

                                      i am aware of that, but if my working rgb mode is set to srgb, converting it to srgb doesn't really make a difference, does it?

                                      • 16. Re: “Save For Web” Problems After Calibrating Display
                                        gator soup Community Member

                                        >> i should set my working rgb to my monitor profile?

                                         

                                        i hope you didn't get that from me (it is the second worst Photoshop advice i've heard, but at least it doesn't break Photoshop's ability to display 'accurately')

                                         

                                        your working rgb doesn't matter so much as long as you convert to sRGB (for the web) before setting a critical hex color that you need to match

                                         

                                        >> "convert image to srgb" makes no sense...

                                         

                                        it make sense...test it on a ProPhotoRGB document, set your hex, then Convert to sRGB (chances are your hex color is no longer correct)...

                                         

                                        +++++

                                         

                                        PS

                                         

                                        >> if my working rgb mode is set to srgb, converting it to srgb doesn't really make a difference, does it?

                                         

                                        correct, if your source document is already sRGB you don't need to convert sRGB, but be sure of your space before pulling hairs...

                                        • 17. Re: “Save For Web” Problems After Calibrating Display
                                          macchiato. Community Member

                                          i was just a little confused because you said to "convert to srgb before picking hex colors", which does not really make sense when my working space is already srgb...

                                          • 18. Re: “Save For Web” Problems After Calibrating Display
                                            Noel Carboni Community Member

                                            The differences you're seeing in the web browsers are likely because of diffierences in the color-management of images vs. HTML elements, mitigated by differences in whether the browser interprets an untagged image as sRGB and transforms it to your monitor color space or just passes the color values to the display untransformed.

                                             

                                            There is no one standard method for these things, and the choices the browser software writers are making are changing as color-management across the world matures, hence my comment before about not trying to match colors in HTML to those. In images.

                                             

                                            Unfortunately, having seen IE10 I can say the end isn't in sight.

                                             

                                            -Noel

                                            • 19. Re: “Save For Web” Problems After Calibrating Display
                                              Rik Ramsay Community Member

                                              I have been trying to replicate your problem this morning without much success. However, you haven't mentioned what filetype you are saving these images as. The reason I bring this is up is because PNG used to constantly have problems with color matching on websites when no profile was embedded in the file - the gamma on the PNG changed with each OS. Mac and Safari were the worst but I thought the problem would be gone by now.

                                               

                                              With that aside, assuming you have them saved as jpeg, I refer to an earlier post of yours...

                                              • i export this image via "save for web", uncheck embed color profile and check convert to srgb
                                              • i use the color picker in photoshop to get the hex color code of said yellow square

                                               

                                              You haven't mentioned whether you are taking the hex code from the first file, or the saved file. You must always take the hex code from the 'saved for web' file.

                                               

                                              Monitor profiles make little difference with what you are experiencing as the hex codes don't change, just your visual perception of those colors (this is assuming your final images on the website are in fact sRGB). However, the document profile makes a big difference. Although you say you are working in sRGB, when you create a new document is the working space selected on the document? See screenshot:

                                              PS_newRGB.jpg

                                               

                                              There were only 2 ways I managed to get even close to your issue (with a jpeg file):

                                              • The document was set up to a non-sRGB profile, hex taken from that, file then saved for web with converting colors to sRGB but still using the hex code from original file.
                                              • The original file was in CMYK and when saved for web was converted.

                                               

                                              With the first, my hex codes were different in both files. CSS takes the hex values from sRGB so assuming your workflow from start to finish is in that mode, there should be no problem.

                                               

                                              Hope this helps.

                                              Rik

                                              • 20. Re: “Save For Web” Problems After Calibrating Display
                                                Noel Carboni Community Member

                                                Macchiato, you say you test with FireFox sometimes...  Something to try:

                                                 

                                                Type this into the Address bar:  about:config then press Enter

                                                Type this into the Filter: field:  color_management  then press Enter

                                                Double-click:  gfx.color_management.mode  and change the value to:  1

                                                 

                                                This will cause Firefox to manage all colored elements, even those it its own UI, using your monitor profile.  See if this doesn't cause your image to match your HTML/CSS hex coded colors better.

                                                 

                                                This page can help you discern how your browser matches HTML/CSS colors with image colors:

                                                 

                                                http://noel.prodigitalsoftware.com/ForumPosts/BrowserColorTest/BrowserColorMgtTestPage.htm l

                                                 

                                                Keep in mind all of Firefox has to be restarted after color-management changes - it does not follow changes to your monitor profile in real time.

                                                 

                                                -Noel

                                                • 21. Re: “Save For Web” Problems After Calibrating Display
                                                  gator soup Community Member

                                                  >> trying to replicate your problem

                                                   

                                                  create an sRGB Photoshop document

                                                  fill it with cc6633 (for example)

                                                  Save As .jpg (with the embedded sRGB profile)

                                                   

                                                  create an HTML page

                                                  fill it with cc6633

                                                  place the .jpg on the page and preview it in a couple web browsers:

                                                   

                                                  • color managed web browsers will mismatch the page and .jpg elements (showing the .jpg the same as Photoshop)
                                                  • non-managed web browsers will "match" the page and .jpg elements (but they won't display the hex color 'accurately' like Photoshop does)

                                                   

                                                  WHEN WEB BROWSER COLORMANAGEMENT WORKS — like it does ONLY in Firefox "Full Color Management" Value 1 (as Noel pointed out) — both page and .jpg elements will "match" Photoshop

                                                   

                                                  Safari (and every other web browser i've tested) still gets it wrong

                                                  • 22. Re: “Save For Web” Problems After Calibrating Display
                                                    Rik Ramsay Community Member

                                                    I go back to a previous statement I made...

                                                    There were only 2 ways I managed to get even close to your issue (with a jpeg file):

                                                    • The document was set up to a non-sRGB profile, hex taken from that, file then saved for web with converting colors to sRGB but still using the hex code from original file.
                                                    • The original file was in CMYK and when saved for web was converted.

                                                     

                                                    What you have mentioned above is not accurate - and to me in all browsers looked identical. The web, and everything about the web defaults to sRGB. If there is no profile, it displays as sRGB which will cause problems if the file was not intended to be. If the profile in the images is sRGB, it shows sRGB. The only time browser color management comes into play is if the image is saved in anything other than sRGB - as Noel has pointed out with his example above.

                                                     

                                                    In short, assuming your workflow from start to finish is in sRGB and you take the hex codes from the final web version of the file, it will look correct on EVERY browser. The only thing that could possibly change is the perception of those colors, but even then both the image and css/html elements will match.

                                                    • 23. Re: “Save For Web” Problems After Calibrating Display
                                                      gator soup Community Member

                                                      Noel, I still don't understand your test.

                                                       

                                                      I dragged your tagged sRGB and ProPhotoRGB images off your page and opened them in Photoshop 8 using the embedded profile.

                                                       

                                                      The images look the same, but hex color is way mismatched.

                                                      Yet when I sample them from the source image spaces they both read 6A2D18 as you note.

                                                       

                                                      NoelTest.jpg

                                                       

                                                      Do you have any idea what I am missing?

                                                      Shouldn't the hex color display the same in the two source spaces in Photoshop?

                                                      • 24. Re: “Save For Web” Problems After Calibrating Display
                                                        gator soup Community Member

                                                        >> What you have mentioned above is not accurate - and to me in all browsers looked identical.

                                                         

                                                        i am interested in getting it right -- what statement of mine are you talking about?

                                                        • 25. Re: “Save For Web” Problems After Calibrating Display
                                                          D Fosse Community Member

                                                          6a2d18 corresponds to 106 - 45 - 24. So it's like assigning numbers in different spaces:

                                                           

                                                          hex.png

                                                          • 26. Re: “Save For Web” Problems After Calibrating Display
                                                            gator soup Community Member

                                                            >> The web, and everything about the web defaults to sRGB.

                                                             

                                                            this was recently discussed here...i agree the Default space for the Web is sRGB because it is the Windows "Default" according to Microsoft's website (and OSX 10.7 now defaults to sRGB)

                                                             

                                                            >> If there is no profile, it displays as sRGB

                                                             

                                                            i am not sure what you by "it" (untagged Photoshop .jpg or HTML elements)?

                                                             

                                                            i think a more clear was to state that would be, in web browsers:

                                                             

                                                            • the untagged Photoshop RGB is based on the source profile and its 'numbers' pass through to the monitor space unaltered
                                                            • HTML elements are based on sRGB and its 'numbers' are passed through to the monitor unaltered

                                                             

                                                            i agree that causes problems depending on the degree of difference between your Monitor Profile and sRGB

                                                             

                                                            >> The only time browser color management comes into play is if the image is saved in anything other than sRGB

                                                             

                                                            assuming you mean untagged Photoshop .jpg and unspecified HTML elements — they are sent straight to the monitor in both managed and unmanaged web browsers — so i agree keeping Photoshop .jpg in sRGB (tagged or untagged) is the best choice for web developers

                                                             

                                                            >> In short, assuming your workflow from start to finish is in sRGB and you take the hex codes from the final web version of the file, it will look correct on EVERY browser.

                                                             

                                                            i'm still trying to figure that part of my theory right because Noel's example is a learning experience here (not what i expected)...but "correct" is a matter of interpretation, in my example (do you want color accuracy or color consistency?) — Firefox can deliver both

                                                            • 27. Re: “Save For Web” Problems After Calibrating Display
                                                              D Fosse Community Member

                                                              RikRamsay14 wrote:

                                                               

                                                              The web, and everything about the web defaults to sRGB. If there is no profile, it displays as sRGB

                                                              This is simply not correct and misunderstood. It defaults to your monitor color space.

                                                               

                                                              The only time browser color management comes into play is if the image is saved in anything other than sRGB

                                                              Again, incorrect. Browser color management comes into play insofar as the monitor color space differs from the color space the file was created in. If we all had wide gamut monitors and everybody posted Adobe RGB things would be just fine (or at least as they are today).

                                                              • 28. Re: “Save For Web” Problems After Calibrating Display
                                                                gator soup Community Member

                                                                >> If we all had wide gamut monitors and everybody posted Adobe RGB things would be just fine (or at least as they are today).

                                                                 

                                                                still would not Windows Explorer, Apple's 10.7 Finder, and HTML elements display the saturation problem on w-g monitors because they are being based on their "default" sRGB profile?

                                                                • 29. Re: “Save For Web” Problems After Calibrating Display
                                                                  macchiato. Community Member

                                                                  wow. i go afk for a little while and BAM, i am missing out on all the fun

                                                                   

                                                                   

                                                                  @RikRamsay14

                                                                  i did actually pick the color from the original file, not the saved file. i have done this successfully for years though... that said, i'll keep that in mind, thanks. oh and the file was/is a jpg file; my new file dialogue looks like yours as well.

                                                                   

                                                                  @Noel

                                                                  i appreciate the effort, but i won't even bother trying it out in firefox. even if it does work (which on paper it should), not everybody is using that particular browser and so the whole thing is pointless, really (correct me if i am wrong).

                                                                   

                                                                   

                                                                   

                                                                  it looks like the best way is to set the monitor profile to srgb and push some buttons on the monitor itself (in terms of calibration). for the sake of sanity, anyway...

                                                                  • 30. Re: “Save For Web” Problems After Calibrating Display
                                                                    Noel Carboni Community Member

                                                                    Gator soup, I'm not sure what you're asking for...

                                                                     

                                                                    All the images are published with the profiles listed (and the one is untagged, meaning it has no profile).

                                                                     

                                                                    If the leaves in the tagged images look like one another then that means the browser is interpreting image color profiles.

                                                                     

                                                                    The red box at the top of each image uses the hex code exactly as listed to define the color in that space, which of course is interpreted differently because each different image is in a different color space.

                                                                     

                                                                    Assuming your browser IS in fact interpreting the image color profiles, then these things are interesting:

                                                                     

                                                                    1.  Whether the leaves in the untagged image match any / all of the other images.  If they do match, say, the sRGB tagged image this implies the browser is interpreting the color values as though an untagged image is in the sRGB color space.

                                                                     

                                                                    2.  What red blocks at the tops of which images exactly match the surrounding HTML background of the same code (which is what interests the Macchiato here in this thread).  If, for example, the red block at the top of the sRGB image matches the background, then the browser is color-managing each to the same goal.

                                                                     

                                                                     

                                                                    On my system...

                                                                     

                                                                    Firefox 10.0, when set to color management mode "1", shows the following:

                                                                     

                                                                    A.  All the leaves match in color in all 4 images, and the colors are accurate, because Firefox (set this way) outputs everything in the monitor's color space.  Firefox assumes untagged images are in the sRGB color space.

                                                                     

                                                                    B.  The red blocks atop both the untagged image and the sRGB-tagged image match the background red color, because it assumes untagged images and HTML hex codes are in the sRGB color space.   The red blocks atop the Adobe RGB and ProPhoto RGB tagged images do NOT match the background, as expected, because they're expressed in something other than the sRGB color space.

                                                                     

                                                                     

                                                                    Internet Explorer 9, which always assumes the monitor is sRGB, displays the following:

                                                                     

                                                                    A,.  All the leaves match in color in all 4 images, but the colors may not be accurate (depending on how different actual monitor performance is from sRGB) because IE outputs everything in the sRGB color space. 

                                                                     

                                                                    B.  The red blocks atop both the untagged image and the sRGB-tagged image match the background red color, because untagged images and HTML hex codes are all assumed to be in the sRGB color space.  The red blocks atop the Adobe RGB and ProPhoto RGB tagged images do NOT match the background, as expected, because they're expressed in something other than the sRGB color space.

                                                                     

                                                                     

                                                                    Safari shows the following:

                                                                     

                                                                    A.  All the leaves match in color in the 3 tagged images, but do not match the untagged image, since Safari passes the untagged image through to the monitor with no color management.

                                                                     

                                                                    B.  The red block atop the untagged image matches the background, but none of the other three do, because Safari passes the HTML colors through to the display without any color management.  Whether it's better to put untagged imagery out to the monitor without transformation is a judgment call.  It may be literally the right thing to do, but Firefox's strategy may be better.

                                                                     

                                                                     

                                                                    At first blush Firefox seems to have it closest to right in the general case, but it has its problems as well.  For example, it ONLY uses the color profile of the primary monitor, no matter what monitor it's opened on if you have a multiple monitor system.   In my mind this makes it lose its edge over Internet Explorer because it's sometimes right and sometimes wrong, where IE's consistent transform to sRGB on any monitor is expected.

                                                                     

                                                                     

                                                                    Conclusion:

                                                                     

                                                                    ONLY IF one configures ALL of one's monitors to produce their output in the actual sRGB color space and associates the sRGB profile with each of them, do all browsers do a proper job of color-management.

                                                                     

                                                                     

                                                                    -Noel

                                                                    • 31. Re: “Save For Web” Problems After Calibrating Display
                                                                      D Fosse Community Member

                                                                      Well, yes, IE would, since it converts everything to sRGB. So you'd be back to square one.

                                                                       

                                                                      I really have no direct experience with hex numbers, so I've just played around a bit with the color picker. It seems to me that hex numbers are not profile specific - they're just numbers, like RGB numbers. They don't have any specific meaning until they refer to a given space, whether the monitor space or a standard space.

                                                                      • 32. Re: “Save For Web” Problems After Calibrating Display
                                                                        Noel Carboni Community Member

                                                                        D Fosse wrote:

                                                                         

                                                                        RikRamsay14 wrote:

                                                                         

                                                                        The web, and everything about the web defaults to sRGB. If there is no profile, it displays as sRGB

                                                                        This is simply not correct and misunderstood. It defaults to your monitor color space.

                                                                         

                                                                         

                                                                        Though I've said it above, I just want to re-clarify this:

                                                                         

                                                                        One of the reasons this is misunderstood is that it differs depending on which browser you're talking about.

                                                                         

                                                                        • IE assumes untagged images and HTML elements are sRGB.
                                                                        • Firefox set to mode 2 (default) passes untagged images through without color-management.
                                                                        • Firefox set to mode 1 assumes untagged images (as well as HTML elements) are sRGB.
                                                                        • Safari passes untagged images through to the monitor without color-management.

                                                                         

                                                                        -Noel

                                                                        • 33. Re: “Save For Web” Problems After Calibrating Display
                                                                          D Fosse Community Member

                                                                          Yes, in practical browser terms I should have modified this.

                                                                           

                                                                          But it was obvious from context that RikRamsay14 was talking about "the web" in the abstract.

                                                                          • 34. Re: “Save For Web” Problems After Calibrating Display
                                                                            gator soup Community Member

                                                                            >> (Noel) The red box at the top of each image uses the hex code exactly as listed to define the color in that space, which of course is interpreted differently because each different image is in a different color space.

                                                                             

                                                                            >> (D Fosse) It seems to me that hex numbers are not profile specific - they're just numbers, like RGB numbers. They don't have any specific meaning until they refer to a given space

                                                                             

                                                                            okay, that's especially clear, thanks...

                                                                            • 35. Re: “Save For Web” Problems After Calibrating Display
                                                                              gator soup Community Member

                                                                              >> the best way is to set the monitor profile to srgb and push some buttons on the monitor itself (in terms of calibration)

                                                                               

                                                                              speechless.

                                                                              • 36. Re: “Save For Web” Problems After Calibrating Display
                                                                                macchiato. Community Member

                                                                                maybe. but i have been working like this for years (my previous monitor looked pretty much exactly like calibrated with srgb as the profile) and i have never had any isuees whatsoever. now that i am working on a crappy laptop screen that needs to be calibrated, i am running into this massive problem...

                                                                                • 37. Re: “Save For Web” Problems After Calibrating Display
                                                                                  Noel Carboni Community Member

                                                                                  gator soup wrote:

                                                                                   

                                                                                  >> the best way
                                                                                  speechless.

                                                                                   

                                                                                  Perhaps you're speechless because you haven't yet agreed upon a definition for the term "best".    In all seriousness, try to keep the criticism out of this conversation.  It will degrade quickly if you judge others' choices.

                                                                                   

                                                                                  In my mind the "best" thing is to strive to fully understand color-management, which gives you the ability to know and anticipate what you and everyone else are going to see under all conditions.

                                                                                   

                                                                                  -Noel

                                                                                  • 38. Re: “Save For Web” Problems After Calibrating Display
                                                                                    gator soup Community Member

                                                                                    "speechless" was my gut reaction, no criticism intended, so I apologize if I came across that way to anyone

                                                                                     

                                                                                    the OP's problems surfaced in Save for Web (SFW) after he calibrated his monitor - a common problem and fairly easy to explain why

                                                                                     

                                                                                    setting the default monitor profile to sRGB (to work around the SFW behavior) breaks Photoshop's ability to display color 'accurately' — it sets Photoshop up to behave like Microsoft Internet Explorer on an 'uncalibrated' system — and it only makes it harder (if not impossible) to guess what other people will see even in fully color-managed 'calibrated' conditions

                                                                                     

                                                                                    while my exposure to Windows users here is broadening my awareness as to how some web designers work, I still think setting one's Default monitor profile to sRGB is the worst advice for Photoshop users who need a professional 'calibrated' reference monitor (and that is my point)

                                                                                     

                                                                                    macchiato. perfectly explained his reasons for going back to what he is comfortable with in post #36 and I wish him luck

                                                                                    • 39. Re: “Save For Web” Problems After Calibrating Display
                                                                                      Rik Ramsay Community Member

                                                                                      I think I need to clarify, and expand on what I have already said in relation to the OP.

                                                                                       

                                                                                      @D Fosse Re: Web defaulting to sRGB: I believe it may be you who has misunderstood how this works. As I have mentioned before, the monitor plays very little part in this whole thing. The browser, by default, will show any image without a profile in sRGB. This is explained in W3.org's documentation on web color.

                                                                                      "All colors are presumed to be defined in the sRGB color space unless a more precise embedded profile is specified within content data. For images that do have a profile built into their data, that profile is used. For images that do not have a profile, the sRGB profile is used so that the colors in these images can be kept "in synch" with the colors specified in CSS and HTML." http://www.w3.org/TR/css3-iccprof

                                                                                       

                                                                                      And in response to that, the web itself uses sRGB color mode, so all HTML/CSS etc, whether Hex or RGB values are represented in sRGB. As mentioned, the ONLY way to ensure everything is displayed accurately in all browsers on any OS, is to have everything in sRGB.

                                                                                      "All RGB colors are specified in the sRGB color space (see [SRGB]). User agents may vary in the fidelity with which they represent these colors, but using sRGB provides an unambiguous and objectively measurable definition of what the color should be, which can be related to international standards." http://www.w3.org/TR/css3-color/#numerical

                                                                                       

                                                                                      When using different profiles in Photoshop, the same Hex value will appear different. It is rendering the values differently. BUT, the absolute color of each Hex (LAB) changes with each profile.

                                                                                      Eg, sRGB: #666666 = r102 g102 b102 =L43 A0 B0.

                                                                                      ProPhoto RGB: #666666 = r102 g102 b102 = L51 A0 B0

                                                                                       

                                                                                      In other words, they look different on screen.

                                                                                       

                                                                                      ----------------------------------

                                                                                       

                                                                                      I don't believe the OPs problem had anything to do with the monitor calibration as it doesn't affect the Hex values at all. The document profiles could only affect the final output and the fact the OP pulled the hex value from the file before saving for web, is what has probably caused the discrepancy.

                                                                                      1 2 Previous Next