Skip navigation
Currently Being Moderated

“Save For Web” Problems After Calibrating Display

Mar 7, 2012 7:32 AM

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

 
Replies 1 2 Previous Next
  • Noel Carboni
    23,534 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 7, 2012 7:45 AM   in reply to macchiato.

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 7:49 AM   in reply to macchiato.

    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.

     
    |
    Mark as:
  • Noel Carboni
    23,534 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 7, 2012 8:04 AM   in reply to macchiato.

    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

     
    |
    Mark as:
  • Noel Carboni
    23,534 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 7, 2012 8:08 AM   in reply to macchiato.

    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

     
    |
    Mark as:
  • Noel Carboni
    23,534 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 7, 2012 8:11 AM   in reply to macchiato.

    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

     
    |
    Mark as:
  • Noel Carboni
    23,534 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 7, 2012 8:25 AM   in reply to macchiato.

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 8:46 AM   in reply to macchiato.

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 8:58 AM   in reply to macchiato.

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 9:11 AM   in reply to macchiato.

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

     
    |
    Mark as:
  • Noel Carboni
    23,534 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 7, 2012 9:25 AM   in reply to macchiato.

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 10:15 AM   in reply to macchiato.

    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

     
    |
    Mark as:
  • Noel Carboni
    23,534 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 7, 2012 10:45 AM   in reply to macchiato.

    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/Browser ColorMgtTestPage.html

     

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 10:50 AM   in reply to Rik Ramsay

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 11:09 AM   in reply to gator soup

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 11:11 AM   in reply to Noel Carboni

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 11:14 AM   in reply to Rik Ramsay

    >> 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?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 11:31 AM   in reply to gator soup

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

     

    hex.png

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 11:41 AM   in reply to Rik Ramsay

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 11:41 AM   in reply to Rik Ramsay

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 11:48 AM   in reply to twenty_one

    >> 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?

     
    |
    Mark as:
  • Noel Carboni
    23,534 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 7, 2012 11:56 AM   in reply to gator soup

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 11:56 AM   in reply to gator soup

    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.

     
    |
    Mark as:
  • Noel Carboni
    23,534 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 7, 2012 12:03 PM   in reply to twenty_one

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 12:06 PM   in reply to Noel Carboni

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 12:05 PM   in reply to twenty_one

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 12:08 PM   in reply to macchiato.

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

     

    speechless.

     
    |
    Mark as:
  • Noel Carboni
    23,534 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 7, 2012 12:22 PM   in reply to gator soup

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 1:44 PM   in reply to Noel Carboni

    "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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 7, 2012 2:17 PM   in reply to gator soup

    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.

     
    |
    Mark as:
1 2 Previous Next
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points