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.

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

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.

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.

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.

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.

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

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.

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.

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

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.

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.

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

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.

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.

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

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

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

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.

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.

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

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

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.

"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

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.