Viget Inspire

Thanks for the tips. I’ve spent a few days of my life, collectively, pulling my hair out over bizarre color changes that I was pretty sure I’d protected against. Here’s hoping these settings make those a thing of the past.

One question: Are there alternate/additional things to need to do in Illustrator? We save for web from there and have had issues with that as well. Knowing Adobe, the settings are named slightly differently and located in slightly varying places.

Awesome writeup, Doug. I’ve also noticed some weirdness trying to save images as .png files (that disappear when I switch over to .gif).

Great article, I was looking into this last week. I was trying to upload photos to Flickr and was frustrated because the colors were washed out. Turned out the photo’s color space was Adobe RGB and not sRGB. Still not perfect but it looks better.

Good catch! Thanks, I’ve gone through and finished the internationalization.

I think you could call this post:
“Pimping your Photoshop Color Settings” :)
For me in PHotoshop v.7 it was only a two step process, I don’t see the setting in the third step, so I hope I’m good still.
thanks.

I was definitely aware of some of the color anomalies, but not a fix for them, bright colors are the worst, they get tamed down sometimes.

Thank you for tackling this, it’s a problem that has bugged me for years without resolution, can’t wait to try this out myself.

It’s good to hear that everyone was as frustrated by this problem as we were, it was making a few designers crazy here at Viget.

Good tips Doug, thank you very much! Just about every designer I know has run into this problem.

Have you also found that this doesn’t “correct” older files that were created without viewing in Monitor RGB proof? As in, you need to BEGIN your designs with the monitor proof mode active for accurate exporting. Opening older files and switching to that proof mode will simply result in an accurate preview of how they’ll look when exported (unfortunately lighter and de-saturated in most cases). This, at least, has been my experience… do you know of a method that will retain the initial intended values? Converting to a profile first perhaps?

Wow I like this! I remember the color shift getting the best of my time, a day or two before a deadline… It took me a few hours to get back on track again, this would have quite come in handy.

Will keep this one in my tool box of solutions! Cheers!

wow thanks so much, I have been wondering how to fix this issue.

This tip is very much appreciated. :)

I’ve recently encountered this problem when working collaboratively with my boss on a PSD.

I’ve read much and the procedure I went through is drastically different.

In Color Settings, I chose the sRGB setting. I also changed my mac gamma to 2.2 to fit “most” monitors (as more people are using a pc than a mac...). I then disabled the “Convert to sRGB” option in the Save for web window.

These were the recommended settings for designing for the web… well, according to what I read earlier, you’re making me doubt!

By default, it seems that Photoshop CS3 puts in the Adobe RGB settings, so when you save for the web, the color profile is embedded and the image’s color profile is changed to sRGB which gives you another result altogether from Adobe RGB. (to my understanding)

Basically CS3 converts to sRGB by default when it saves a file for the web because that’s a standard. But they just don’t use that profile in photoshop’s “editing” mode. This is non sense, but I guess they figure we’re not all web designers.

Hopefully, all this made sense!

Jerome.

Thanks, I understand much more of the mystic color profiles!

Rereading what I’ve written earlier… it didn’t make much sense hehe.

My old technique did everything to comply with the setting in the save for web mode “Convert to sRGB” when it could’ve be as simple as your way of doing it.

Even though we’re not yet at the point where everyone on every screen will see the same exact color, it’s better than nothing!

Jerome.

(You must think I have a lot of time on my hands!)

Maybe your X factor is the browser. Every browser, except Safari, ignores an embedded color profile. From what I understand, the color profile forced on an image in a browser is “Monitor RGB"… being however the user’s monitor is calibrated.

So even if we work in sRGB, convert to sRGB and even embed the sRGB color profile, it still won’t feel right in every browser not Apple-made (hehe).

As hard as we try to design with nice colors, correct colo profiles and calibrated monitors, most people don’t know a monitor can even be calibrated. I come across this problem too often when presenting mock-ups to my superiors.

I think your technique is as close as it gets to having a farily good idea of how an image will look compressed and to others.

Jerome.

I read Ballard’s article while researching this, but working in sRGB and saving for web without the ICC profile is resulting in color shifts in all my tests. Using Ballard’s sRGB settings, the exported image has lighter, less saturated midtones when viewed in a browser.

I don’t know too much about the color profiles, but it seems to me that if we’re setting up a color working space in Photoshop and then exporting images without this working space, there are going to be color discrepancies. If there weren’t what would be the point of using the color profile at all?

Ballard’s fixes include changes to the monitor settings, which I agree are important. But it’s not too much to ask that an image I “Save For Web” preserves the exact same colors I saw in Photoshop, without any profile or translation issues. As far as I can tell, the fix posted here can accomplish this...and unless I’m missing something, there’s no major downside for losing the sRGB setting in a web design environment.

“ But it’s not too much to ask that an image I “Save For Web” preserves the exact same colors I saw in Photoshop, without any profile or translation issues.”

It is actually. (Unless you are saving with ICC-profile and only use Safari or Opera to browse).

One cannot expect all browsers to render color like the ‘mother of all color apps’ Photoshop… You can let P’shop behave like a browser using the sRGB profile. This way you’re not fooling youreselve with perfct colors ‘cause most people won’t have a very good or calibrated monitor. And mst of the time, you are designing for ‘most’ people’.

Bytheway, I do not get a color shift on my (Eye One calibrated) high end Eizo monitors if i assign sRGB to your JPEG and ‘ave for web’.

I realy enjoy discussions like this. Most of the time the “webguys” tell the “printguys” how stuff works ;-)

Yes and no. The nice colors you see in Photoshop are actually aRGB (Adobe RGB). This color range is much larger than sRGB (small RGB). Hence the shift in colors.

The browser is actually color-dumb. (well most are). So no need to save with the ICC-tag. You can create your own ‘dumb’ preview in P’shop if you work in the sRGB profile.

Oh and there is a difference between ‘assigning’ or converting to sRGB too. A huge one.

A bit off-topic but also a myth: What dpi should one use for images for web? 72? 92? 300? Answer: None....

@MMjo
The comments about image dpi, could be off track to anyone concerned with ppi, which will directly effect the size of the image in your browser. Unless you use CSS or another means of telling the image to show at a certain size specification.

Ahh got ya macmojo, but the first thing when working on web files would be going to image | mode | and switching to RGB there. This feels like two different streams of comments those aimed at Print design and those at web. I think somebody already suggested that.

MacMojo, thanks for stopping by and helping hash this out with us! I’ve updated the post to help readers find your comments and contributions to the article.

I don’t think it is a good idea to completely turn of color management. If only working for the web this might work, but you will run into some trouble if want to print your images, as already mentioned.

There are numerous reasons for color managing. In fact its there for avoiding these problems (change in color) but it must be set up correctly to work. But if everything is set up fine you will have no color problems anymore (even in printing).

The Save for Web Problem doesn’t occur because Photoshops changes your colors after saving for the web, but because it displays them differently than applications who can’t color manage while working on them.

I wrote an article on how to set up your color management and still see your images as you would in a browser to avoid the “Save for Web”-Problem:

http://essenmitsosse.de/how-to-set-up-color-management/

Thanks for this helpful resource Doug!

Essen: but if we’re talking about the web here, that Adobe RGB file is already in the “wrong colors,” because that profile is going to be dropped when they Save For Web, and the flat, unmanaged colors are going to be outputted. I’m advocating that in this case, you can drop the color profile and get an immediate understanding of what this image will look like, in your browser, if you export it right now. Then, use proofing to check it on other color spaces.

You and MacMojo are saying that if I have my monitor calibrated well, the sRGB space should show me an accurate representation anyway, which I understand...but why would I want to keep an aRGB profile someone sends me, if I know the colors will shift when I Save For Web anyway? Seems like it might make more sense to “convert” to Monitor RGB in this case, so I’m keeping the colors the sender intended and translating them accurately through to the final exported images.

Thanks for following up on this, I’m getting a lot of stuff to try out from this conversation.

Tony, the article you linked to is essentially the same method I’m advocating. I hadn’t seen it during my initial searches, which were a few months ago.  Thanks for posting!

(Also, your site looks great!)

Thanks for a great explanation!
I am having a few problems though.  I’ve followed the settings, opened a previous design and discarded it’s color profile as stated.  The image darkens, is that normal?  Then when i select proof setup and select “windows” it brightens up.  I have a calibrated mac display, and when clicking the “windows” proof setup i need it to not change, so i know the images i see will look as close as possible to those on PC’s, if that makes any sense.  Any help would be appreciated

Dude, thank you from the bottom of my heart. We, the designer at Jive Software, salute you. It has been plaguing the design of our new site. Adobe CS3 on our shiny iMacs has been a very painful process. We had narrowed everything down except for that evil, evil little fly out in step 3.

Thank you from the very depth of my anal-retentive, OCD, designer-soul.

Thanks so much for all your input. My photoshops are pimpn’

This is excellent. I have implemented the fix, and even though it isn’t 100%, it is such a vast improvement over what I have been doing (saving for web as I go just to double check my colors). I have been searching for a very long time for an answer and now I have one! And it makes so much sense. No offense, but the advice from serious color management gurus has not been helpful. This is a real solution, as you aptly stated, only for web designers.

B.I.N.G.O., ‘nuff said.
I mean a web designer may just manage images for web period. If this works it’s one size fits all.
The other stuff was very enlightening, wow.

Phil, are the saved-out images appearing slightly darker than your Photoshop comp when it’s in ‘no proofing’ mode, or when it’s in Windows proof? I’ve also noticed a slight shift between 2.2 Monitor RGB and Windows proofing colors, which seems to point to another factor besides Gamma that separates Mac and Windows setups (other comments seems to suggest it’s the sRGB color profile that Windows uses).

How do you set your monitor to 2.2? Does this create a monitor profile? Is this profile selected in your system preferences?

Also, as a suggested in the article, that I postet above, you shouldn’t use your monitor profile as your RGB Profile.

I think this is a problem, coming from not color managing, because now you can’t tell what Photoshop is really doing.

I have been just pressing Command/Control + y to get my colors the way I want using Curves and /Hue Saturation adjustment layers.

I will give this a try and see how it works for me. :)

You could look at the Eye One Display:
http://www.computer-darkroom.com/i12/i12_page_1.htm

oh man.. no wonder some of my designs don’t turn up the way they’re supposed to, especially after I ‘save for web’ a piece of graphic. This sucks.

But thanks for the tips, gonna try them some time.

Thank you SO much for posting this!  I’ve had this issue for months on end and thought I had tried everything.

Where’s the ‘Donate’ button?

Dave, I haven’t worked with the RAW program, but it sounds like it’s not discarding the profile after your import. One thing to try might be “Conver to Profile > Monitor RGB,” which should take the colors you see and lock them down to the “actual” colors of the image.

DISSIT is correct and most of what’s being discussed here, including the bulk of this article I’m sorry to say is not only technically incorrect but not helping the issues one bit!

Photoshop and all ICC aware applications ARE showing you the numbers correctly and anyone else who works with such an architecture. Trying to “break” Photoshop so it is just as wrong as most all web browsers is akin to driving along, getting a flat tire, getting out of the car and puncturing the other three so all four are now flat!

Users either care about the color they see or they don’t. IF they care, they need to use one of the two web browsers that support color management. Those that don’t care, no issue.

I’ve heard the argument “well most people don’t use Safari or FireFox” and then they go about, puncturing their tires, instead of doing something real simple (because they do care about the color) and telling themselves and others to use a browser that understands proper color management. You can and should educate users who care, and complain to anyone who builds a dumb web browser, but this article and the advise is totally counter productive. And in fact, you’re now potentially ruining images that may not go to the web with very bad, dangerous color settings. I understand that the author is trying to help, but I think he really needs to understand what effect these settings have, and how in no way do they help or accomplish anything useful.

And that an image is Raw or rendered is totally immaterial to this discussion (you’re not getting this to work because again, you’re not using Photoshop properly).

@DISSIT - From what I’ve been checking, it looks like the Proof -> Monitor RGB is good enough when saving WITHOUT convert-to-sRGB. One issue is always remembering turn Proofing on (no way to keep it on at all times, which is frustrating).

Converting to sRGB, however, I’m not convinced on...been trying it out and there are slight color shifts in Mac Safari from Photoshop, although they’re still not much. Which is odd, because without an ICC profile attached, Safari shouldn’t re-interpreting colors, correct?

@Andrew Rodney - Only one person in this thread has offered an actual argument for why stripping out the color management is the kind of wrong that deserves all caps, and as a result, I’ve repeatedly amended that this method is suggested for web design only.

Of the major browsers, only Safari honors ICC profiles.  Even the new FF doesn’t honor them by default. You can test here, where you should see lines around the boxes in a browser that correctly renders images with the attached profile. This is an example of what goes wrong when exported images go through color shifts or have ICC profiles: Images that are supposed to blend nicely into hex-color backgrounds show hard edges instead.

So, with your ICC profile method, I’d need to manually find a new hex value that matches my image when its color gets interpreted for Safari, which seems like a difficult process to go through for a single browser.

You can and should educate users who care…

Since only one browser honors ICC profiles by default, you’re saying web designers, who build sites for clients and thousands of users with different capabilities, computer ages, and levels of technical proficiency, should suggest that all 96% of non-Safari users switch over so they can see our colors as we intend them? I appreciate promoting browser standards, but I couldn’t agree with that less.

A note to other readers: Color profiles CAN be assigned, proofed, and viewed on for-print images, very simply. What I’m suggesting is that web designers set their Photoshop up to work best, by default, for what they spend most of their time doing. No one is puncturing Photoshop’s tires or choosing to ruin all print images here, just trying to get a little more control over what we see in our browsers.

Did any of you use ImageReady?  Omigod, it was awesome:  basically Photoshop with absolutely everything that wasn’t related to creating Web graphics removed.  No CMYK, no image resolution, no TIFF, no nothing.  It was the greatest Web graphic tool ever, and the Adobe/Macromedia merger killed it in favor of Fireworks.  I upgraded from CS2 to CS3, and all of a sudden color became this weirdly relative concept.  Thanks so much for these great tips— the sRGB one is what I was missing.

Thank you so much for this explanatory post. The fading save-for-web colors and the inexplicable cross-browser color shifts were causing unbearable headaches.

Thank you for the great reading. It saved my life !

Surely you all are kidding about taking the advice given at the top of this blog. If you’ve read everything here including my comments and Andrew Rodney’s and still want to set your working space to Monitor RGB, just realize it’s akin to going back the the color management characteristics of Ps 4 and below, where the working space was your monitor space. If you decide to do that, be aware of all the ramifications and how it might affect your other work. But hey, it’s not my head being buried in the sand.

Thank you very much, I’ve had this problem recently and i know i know that i wasn’t crazy or something :)

very nice article..it mostly solve my queries..Thank you very much..

I did quite a bit of research into the topic of colour reproduction on the web very recently and produced a couple of articles to try and explain the issues involved.

The “Save for the Web” colour shift described in the article is directly related to this.

http://www.nicedream.co.uk/articles/best_practice_colour_setup_for_web_designers/

There are lots of factors that come together in order to understand the correct colour settings to use. Reading the comments above, I agree with settings that Steve Tapping provides.

Regarding Aperture, your might find this helpful:
http://docs.info.apple.com/article.html?artnum=302827

When editing, if the sRGB colour space is used and the monitor is recently calibrated, there should be little or no difference between Windows proofing and proofing being turned off. In a perfect world they would be identical.

>There hasn’t been an sRGB display since circa 1993, it was a big CRT with P22 phosphors! If what you say is true, we’d never need to calibrate and profile our displays, they would behave as sRGB devices, which they don’t. The sRGB color space is a synthetic color space, based on three simple mathematical target values. In fact, this theoretical CRT display spec has definitions for the ambient light conditions surrounding the theoretical display!<

Sorry, maybe I wasn’t clear (see comment and links). I personally am not advocating turning off colour management - quite the opposite. From my article:

“Make sure your monitor is properly calibrated, using a screen gamma setting of 2.2 and a colour temperature of 6500K (white point of D65). The colour temperature may be a setting on the monitor itself, accessible via an onscreen menu.”

“Images for the web should always be prepared using the sRGB IEC61966-2.1 colour space. In Photoshop CS3, you can use the “North America Web/Internet” colour management preset. With this setting in place, your default working colour space is sRGB IEC61966-2.1 and any new documents are assigned the sRGB IEC61966-2.1 colour profile.”

“In addition, if you have Proof Colors activated, make sure that Proof Setup is set to Windows RGB. If you are curious to see what it will look like on a Mac with the legacy 1.8 gamma setting then set this to Macintosh RGB - just remember to change it back afterwards or you may get some unexpected results later.”

“Make sure your image mode is RGB. If you have source imagery that isn’t RGB then make sure it is properly converted to RGB. Also, if you get a profile mismatch you will need to convert the source image to the sRGB IEC61966-2.1 working space.”

“In addition, if you have Proof Colors activated, make sure that Proof Setup is set to Windows RGB. If you are curious to see what it will look like on a Mac with the legacy 1.8 gamma setting then set this to Macintosh RGB - just remember to change it back afterwards or you may get some unexpected results later.”

But all this is doing is showing you how wrong the images will appear outside an ICC aware application (simulating no color management). There’s nothing to soft proof IF you’ve got an ICC aware browser, the images will match Photoshop as is, showing you the RGB values correctly. And anyone else, on any OS using the same sound approach to viewing what is nothing more than a big pile of numbers.

What some are getting confused about here is this idea of soft proofing in Photoshop. Its a “feature” that does NOTHING MORE than show you what that image would look like on your very own machine, in a non ICC aware application. Not anyone else’s system! Its not useful. It doesn’t tell you what the image will appear like anywhere else. However, if you simply stop fooling yourself with the soft proof, view the image as is in Photoshop and an ICC aware browser, the two match. For you and anyone else (who’s smart enough to use said browser and profile their display).

The soft proof process discussed isn’t useful once you understand what it is simulating and for whom (only you).

“I personally am not advocating turning off colour management - quite the opposite. “

That’s exactly what is happening when you invoke the soft proof: You are simulating what that image would look like without color management (using of course, the color management in Photoshop to do so). Its not at all useful.

“In the real world of website design we have to exercise a degree of pragmatism. 94% of all browsers out there will ignore ICC profiles and assume sRGB - not to mention colours specified in the CSS.”

Then 94% of those users will see widely different color appearance from the same numbers. It doesn’t matter a lick that these browsers “assume sRGB”. That’s what this so called web community doesn’t seem to “get”. An assumption of the color space isn’t color management. I’ve explained till I’m blue in the face what is necessary to make the same RGB numbers appear the same way to all users. An assumption? You know the old saying about that right?

Its as simple as that! You either convince those who want proper color appearance to use the right browser, or you tell people how to continue to fool themselves into thinking what they see is not only correct, but what their friends are seeing, neither of which is true. Assuming sRGB is nothing to do with getting correct and matching color appearance.

If this is the real world of web design, then they get what the deserve if they continue to advise users, at least users who care about proper color appearance to fix the problem. It ain’t that hard!

All this of course is easily demonstrated to anyone who wishes to do so.

“We are simulating what the image would look like using the operating system’s colour management and not “without color management.”

You better define what you mean by the OS’s color management. There is nothing like this happening on Windows. On the Mac, as well, all you’re getting is the RGB numbers being sent directly to the display. IF indeed there were OS level color management, the numbers would appear correct.

But even if we take your premise, its absolutely easy to prove that the same RGB values will appear differently on another users system, even of the same OS! How can you call that color management? Color management by its simplest definition is the ability to provide correct and consistent color appearance for all users who implement it. That’s clearly NOT happening in what you describe. 

“In a few years when most people are using a browser that can interpret embedded profiles, then yes, I absolutely agree. Until then, we make do with what we have to produce a result that will work for the most people.”

An embedded profile in the document is no more necessary in a browser than in Photoshop. Photoshop either looks for an embedded profile, or it guesses, based on the color settings what the color space of untagged documents are. You do NOT need to embed a profile for this to work in a browser, you simply need to tell the browser “when examining an untagged image, assume sRGB (or what will be likely in the future, Adobe RGB (1998)).

There is a problem in that Safari assumes untagged data is in the display profile color space which is BAD. Prior to Tiger, we could setup the ColorSync level system to assume whatever we wished for untagged data, just as we can today in Photoshop. That feature was unfortunately removed from the OS. Its far better to allow users to tell even a color managed app what to assume for untagged data, or at least force that assumption to be sRGB (which works if indeed the data IS in sRGB).

I’m not sure what FireFox uses for the assumption, I’d hope its sRGB. But the point is, you do not have to embed a profile unless you so desire, you simply need the color managed application to guess what an untagged doc is and nearly all do so (they have to). Then, with a display profile, the RGB numbers can be properly previewed.

For any color management process, we must have two profiles. In the case of displaying data, we need the document profile (or an assumption for untagged docs) and the display profile. Anything but such a system simply take the RGB numbers, and send them directly to the display. Calibrating isn’t enough. You must have an architecture whereby the display profile compensates for previews based on the embedded or assumed color space and that display profile.

“In a few years when most people are using a browser that can interpret embedded profiles, then yes, I absolutely agree. Until then, we make do with what we have to produce a result that will work for the most people.”

Fine, but doesn’t anyone else here see that soft proofing based on not using color management in Photoshop, based on solely your system does nothing useful but make Photoshop match YOUR browser and not anyone else’s? How on earth is that at all useful to anyone but you? How is that even useful to you? Just explain that to me please. Its a delusional setting, nothing more.

“I think that if you notice that there is a huge shift when you switch from the default proof view to the Monitor RGB view, you probably need to start over with your calibration process. This is where color management folks can really be of service.”

Nope, that’s not so. And I think I’m beating a dead horse here and think I’ll quit and then read stuff like this.

The so called huge shift isn’t a result of the image. It is the result of viewing the numbers incorrectly, just as you could do by altering the brightness and color controls on your display. You could in fact muck up the controls, profile your display and the color appearance in a color managed application would be correct due to the use of color management, the profile and the embedded profile. Calibration is only used on a display such that you can keep this non stable device in a set condition and ideally in a behavior that provides the best data (least amount of banding). The profile is far, far more important than the calibration! The profile reflects this state, good or bad (and ugly outside an ICC aware application) and compensates on the fly to produce the CORRECT color appearance.

But lets say again, we take your idea here as correct. You illustrate that in Photoshop, the one application you’re using to alter the values to produce a desired color appearance, you like what you see, but when you soft proof, by actually previewing the image outside this state, you see a “huge and ugly” color shift. OK, does that mean that’s what the image will look like to anyone else? No. Does that mean the image appears incorrectly in any ICC aware application on your machine or anyone else’s? No. Does it mean that maybe the raw behavior of your display outside an ICC aware application sucks? Yes. Is this a problem? Yes, outside ICC aware applications. Again, how is this at all useful in prep’ing an image for the web? It looked fine in an ICC aware application. It looks poor only on your machine outside an ICC aware application. As yet, what’s the value? Does anyone else have a display behaving as yours does or worse? Maybe, maybe not.

When you load this soft proof in Photoshop, does it help that you now see the color appearance incorrectly and only based on your one computer? And what do you do now, go back into Photoshop and edit the image based on a display that’s pure science fiction and has no relationship to anyone else’s? How is that useful?

Until someone explains the logic of providing an incorrect preview based on a single display, I don’t see why there’s a reason for me to continue here. Forget that 95% of web browsers are not color managed. Assuming you’re viewing an image incorrectly, based on your one system, how is this helpful? You’re going to now edit the image based on this science fiction? Makes no sense to me. Its like the analogy I suggest weeks ago: Image looks too dark in Photoshop, don’t change the numbers, increase the brightness on your display.

MacMojo, CONGRATS ON BEING COMMENT 100! Also, I think this is all the more reason to just leave the profiles out of exported images, no matter how we do color before Saving For Web. Safari’s current system of applying color profiles but leaving hex colors flat is going to look dreadful on a lot of sites.

I think this discussion, while great, has gotten a little confused with comments perhaps being misread or misinterpreted in some cases. Not really surprising given the number of posts.

Specifically, I think that there is some confusion over what the Windows RGB soft-proof setting actually does in Photoshop. I’ve cited the Adobe help file below, maybe this will help to clear it up.

From the Adobe Photoshop help file, talking about Soft-proof presets:
“Macintosh RGB or Windows RGB (Photoshop and Illustrator) Creates a soft proof of colors in an image using either a standard Mac OS or Windows monitor as the proof profile space to simulate. Both options assume that the simulated device will display your document without using color management. Neither option is available for Lab or CMYK documents.”

So, in the case of Windows RGB, we are seeing how it would look on a ‘simulated Windows RGB monitor that doesn’t use colour management’. This doesn’t turn off the colour management in Photoshop. It is still using it’s colour management to produce an accurate image on your calibrated, profiled monitor.

In the case of Windows RGB, unmanaged colour means sRGB. When also working in sRGB IEC61966-2.1, which is recommended for web work, this setting should have the same effect as turning soft proofing off if your monitor is calibrated using gamma 2.2, white point D65.

The full help article can be found here (under Soft-proof presets):
http://livedocs.adobe.com/en_US/Photoshop/10.0/help.html?content=WS151986BD-6D68-4880-9123-CC0D8B7033F5.html

Adobe’s recommended web publishing RGB workflow can be found here:
http://www.adobe.com/designcenter/creativesuite/articles/cs3ap_colorworkflows_06.html

Hope that is useful.

“Spot on correct! But we have no idea what the definition of a “windows RGB monitor” is. That very fact that every display out of the box, even from the same make and model is different and thus why we spend money on an instrument to calibrate to a target proves the point.”

Yes, but in the commercial arena of website design the destination of our work is largely unpredictable. We don’t have control over the destination colour environment. We make the most appropriate choice to keep the majority of people happy.

We’re not trying to achieve photographic proof level colour correction. We understand that it is an unrealistic proposition on the web at this point in time.

The reality is that most people will never calibrate their monitors or even know what monitor calibration is for that matter. We are not talking about specialists viewing our websites. We are talking about the general public with their computers, monitors or even mobile devices.

sRGB is the default color space in Windows. Non-colour-managed applications and devices are taken to be using the sRGB colour space. If you calibrate your monitor on a Windows computer then the Windows Image Color Management (ICM) converts the default sRGB colour space to the monitor’s profile, producing a representation of sRGB. If you don’t calibrate your monitor on Windows then Windows assumes the monitor will reproduce a representation of sRGB.

It turns out then we do actually have a practical (note: not perfect) guide to what the average “Windows RGB monitor” is: sRGB.

http://www.microsoft.com/whdc/device/display/color/default.mspx

From the above Microsoft article…
“sRGB Color Space Profile. sRGB is the default color space in Windows, based on the IEC 61966-2-1 standard. An sRGB-compliant device does not have to provide a profile or other support for color management to work well.”

It’s perhaps summed up a little better here:
http://www.microsoft.com/whdc/device/display/color/wincolormgmt.mspx

From the above Microsoft article:
“Hewlett-Packard and Microsoft helped to develop and drive the sRGB color space as a published international standard (IEC 61966-2-1). In the most basic sense, when the operating system, devices, and applications support sRGB, the result is a simple, easy-to-use solution that works for many kinds of hardware and software that historically have been unable to represent color in a consistent manner without direct user intervention.”

The sRGB standard was adopted for the web precisely because of its simplicity:
http://www.w3.org/Graphics/Color/sRGB.html

From the W3C article above:
“Currently, the ICC has one means of tracking and ensuring that a color is correctly mapped from the input to the output color space. This is done by attaching a profile for the input color space to the image in question. This is appropriate for high end users. However, there are a broad range of users that do not require this level of flexibility and control.”

The above paragraph is particularly appropriate to this discussion. The key point here is that us web designers are dealing with a broad range of users, not specialists.

And finally, please, there’s no need to be pedantic. It’s not conducive to a helpful, constructive discussion about the topic. When mentioning D65 in the context of monitor calibration, this was in relation to the monitor settings: the target white point, not the actual definition. We know that D65 is our very definition of white light, the standard illuminant, our Sun.

Taken to its logical conclusion, we could go on about the nuclear fusion of hydrogen into helium, the electromagnetic radiation this produces, the solar constant, emission spectra, the Raleigh scattering effect etc. etc. - none of which is really relevant to this particular discussion.

Andrew, you do realise that I’m not talking about the article at the of this page?

I’m talking about my article, as referenced in my first comment:
http://www.nicedream.co.uk/articles/best_practice_colour_setup_for_web_designers/

“So can you explain how using the soft proof setup recommended, one that only shows you how something will appear (and incorrectly I’ll add)) ONLY on your machine in any way is helpful? That’s the $64,000 question no one here appears to wish to answer.”

OK, I think things are getting lost in translation. Personally I don’t work with proof colours turned on, I use it every now and again to check that things are going to look roughly ok on the Mac with it’s default gamma.

I was asked this question, in the context of my Article (not the article at the top of this page):

“Thanks for the links, Nina. When your article explains that color should look like it does “when editing,” do you mean with Windows proofing on or off?”

I was trying to explain that activating the soft proof setting “Windows RGB” does nothing more than to convert what we are seeing to sRGB, simulating a gamma of 2.2.

Since (taking the settings in my article) we have a working space of sRGB, with a display calibrated to use a gamma setting of 2.2, it shouldn’t drastically change the colours. That is all.

“No, it is not! They might be close to sRGB, they may not. So you’re saying ever CRT and LCD display, of any make is sRGB out of the box, no matter what controls or settings the end user might make as means this is sRGB?”

I completely agree with that, of course all displays are different. The point I was trying to make was that there are some useful defaults as long are we’re working in sRGB or converting to sRGB. Again this is useful given the target audience of out work.

“ONLY in ICM aware applications.”

That’s not strictly true, it depends on the version of windows you are using. Have a look at the table at the bottom of this MSDN article:

http://msdn.microsoft.com/en-us/library/ms536809(VS.85).aspx

Here’s the simple solution: FIREWORKS. I never have to mess with all those settings. Photoshop is a great app, but is not focused on doing one thing great like Fireworks does for web/interactive work. There’s a reason Adobe kept this program around, and there’s more to come from it (http://tinyurl.com/yqfwh6). Do yourself a favor and try it on your next website design.

I know of Gary. His text is incomplete:

From Gary Ballards article:
“Photoshop’s Soft Proof screen preview here simulates how unmanaged applications, web browsers, will display the file on 2.2 gamma monitors, based on the sRGB profile (ON YOUR MACHINE is missing). If the file is based on sRGB and our monitor gamma is 2.2 and D/65 6500 degrees Kelvin, we should see very little shift here, which is the goal.”

OK, so lets assume you did the right thing recommended here, you did use an instrument to calibrate the display as Gary suggests. And lets assume that indeed, you should and do see very little shift here. Then I assume the three of us agree (based on your post above) that the recommendations of this site, to use the Soft Proof is of no use yes? That’s been my argument from day one. Well OK, Gary suggests it, still makes no sense to me despite the calibration recommendations as again, the soft proof never tells you what any other user would see, only you.

Lastly, all users should calibrate to a TRC gamma of either 2.2 or, if the software allows it, native gamma (which is pretty darn close to this). Mac users should NOT calibrate to 1.8.

“There are other reasons: Getting CSS and Flash colour to match (hex values).”

Flash will be color managed. My NDA doesn’t allow me to go further. We can thank Adobe for finally seeing the light here.

Further, I’m referring more to images (Photoshop’s meat and potatoes).

“So, if we take Nina’s (and Gary’s) advice, as web designers we will be happy about our own color setup, but our color settings and proof views will have little relevance in the broad scope of user variables.”

Yes. Especially the last part of the sentence.

“And if we take Andrew’s advice, as web designers we will be unhappy about our own color setup (the ‘shift’) but our color settings and proof views will STILL have little relevance in the broad scope of user variables. Is this correct?”

Yes except you need to understand that all you’re working with are big piles of RGB numbers, numbers alone don’t provide enough information about color appearance. IF you do what I propose, the color numbers in ICC aware applications ARE showing you a correct preview. At least you can work to that goal. And anyone else using the same system will see what you see.

Once you move outside that system, all bets are off. And, as I’ve tried to point out, using the soft proof advise presented here, you’re not only seeing the colors incorrectly on your system now, you’re not seeing them correctly based on any other system, so the idea presented isn’t useful. It gives you the false impression that now that Photoshop and your non color managed browser match, you’re somehow seeing things correctly when in fact, all you did was make Photoshop as incorrect as your browser. That’s not at all useful is it?

Andrew wrote:
“There’s nothing there that indicates that a transform is used to convert using the display profile”

The information is there, just have to follow the definition links:

“When no input color space is specified, by default WCS 1.0 uses the sRGB color space as the input color space for color mapping (<- link).”

“color mapping: See color matching (<- link).”

“color matching: Matching a converted color to its visually closest color in the destination color space.”

Here is the link again for reference:
http://msdn.microsoft.com/en-us/library/ms536809(VS.85).aspx

Andrew wrote:
“(and then the question would be, is this display profile accurately defining the display or some generic profile that shipped with the unit 3 years earlier?)”

Absolutely, I think we all agree on this, however it is ground we have already covered many times in this discussion.

I knew you had to work with your color profiles to fix this but, in my late comment I would also say that it’s a lot to do changing the profile such as you have when a person also has a profile set for photographic work (or print work). Is there an easy way to save ones different profiles and change then quickly based on the work one needs them for?

Just because not so many color professionals are posting here does not mean that you web designers who don’t want to bother with learning color management are doing the right thing.

Giving up on color management because a lot of your viewers have poorly controlled monitors is sort of like posting the time on your web site but not bothering to be sure it is right, because most people’s watches are wrong.

There are standards, and if you follow those standards you will be doing the right thing, even though not everyone will see the right thing. The important reason to do the right thing is that your work will be repeatable, and still look good in the future, when you yourself have a new monitor with different capabilities… and so that it will look good to the folks who do bother to set the right time on their watches.

Tweaking a color design endlessly with color management disabled is certainly an exercise in futility.

I shudder to think what any of you who are working in your monitor spaces would do to my perfectly tweaked artwork that is done in a properly color-managed environment. Suffice it to say, you would ruin the color.

You have Andrew so exasperated you’ll probably never learn anything from him, but he knows what he is talking about, and you should try to learn.

I’m getting a soft of dejavu: All this has happenned before.

With the arrival of InDesign us ‘printguys’ had basically the same discussions. “ICC will never work perfect”, “"why would I bother?” I don’t need an RGB workglow, everything is fine in CMYK”.

With Flash and some other new app’s (SlideRocket, the other one for pixel-webdesigning, forgot the project’s name) now under Adobe’s wing you’d better believe there will be support for ICC all over the place in the not-so-distant future.

The article and comments are packed with good info. Everything you need to work with ICC. Hell, I’ve worked with ICC for years and still learned some new tricks. So, thanks everyone for one good old fashioned article and superb comments!

Thank you so much for this article! I’ve been having the save-for-web color-shift issue with Illustrator for several years now and have never been able to figure out what the problem was—until this morning when I read your article! It’s that dastardly little “Convert to sRGB” option in the nearly-hidden little pulldown menu in the Save for Web dialog box that I’d missed. I’ve never even noticed the menu before, and have been tearing my hair out trying to solve this problem. THANK YOU!!

Using this solution means any images or photoshop files I’ve previously created get color-shifted when they get converted to the new working space.

This is a fix for tarnished color accuracy that involves ruining the color right from the beginning rather than at the end. There’s a better way..

Brilliant! Thank you for posting this and saving me more future headaches! Brilliant!

Ryan, I’m (slowly) putting together a summary of what happened in this thread, but since I don’t want to incite another firestorm (OR DO I???), I’m being pretty careful with it. I have to clarify that what I did in this process was with CS3, which, from what people are saying, uses “Monitor RGB” to mean “Color Management Off.”

I could be wrong on that, but since the recommendation here and at Tancredi is to disable management, it seems like it would be correct.

I’d also suggest you look through Nina’s article on the subject, which I still haven’t fully gotten into, but which seems to have a good solution.

Bottom line: the approach Doug has laid out initially is a very dangerous way to work with color in the age of color management (since Photoshop version 5.) You will ruin all sorts of preexisting color images without ever knowing it, and you will have no idea what color you are really using when you create your graphics.

Nina’s article details a perfectly acceptable approach.

There are a number of additional fine points to be made, but you will do much better to follow Nina’s approach.

One of the really big problems for Mac people is that your monitor is probably set with a 1.8 gamma, which is utterly inappropriate for web work.

Thanks for the tutorial. This problem was doing my head in!

That was epic.

Thank you.

I think my favorite comment is Jeremiah’s

“So, if we take Nina’s (and Gary’s) advice, as web designers we will be happy about our own color setup, but our color settings and proof views will have little relevance in the broad scope of user variables. And if we take Andrew’s advice, as web designers we will be unhappy about our own color setup (the ‘shift’) but our color settings and proof views will STILL have little relevance in the broad scope of user variables. Is this correct?”

I’ve been studying up on color management off-and-on and profiling monitors for six years now and love the ideas of accuracy/repeatability in general.

HOWEVER, I am also a creative pragmatist.

The photographers I work for need their prints to look good on print and their web images to look good on the web. For print-flow the camera embeds AdobeRGB, we edit the images in an AdobeRGB color space, and we used to convert-to-sRGB as a final step because that was what our out-of-state Printer used. When they began accepting AdobeRGB images, we stopped converting them to the smaller-gamut sRGB.

Fine.

But for the web, it wasn’t until discovering one of these monitor/colorLCD profile shenanigans that the image in Photoshop ever matched “the browser.” Definitely mattered when aliasing or matching color between old images and new, backgrounds, etc. And the only way we could get those already-print-ready images matching on our machine (yes, on our machine) was to convert-to-monitor-profile and then to unembed this profile when saving. The “logic” was that if all these browsers are going to screw things up one way, I will screw them up in some other way so that they average out to what the properly profiled print-ready image looked like (yeah right) Yes, you can see the screw-up by dragging these images back into a properly profiled environment ...they look weird…

But that’s not the web-audience. If there’s no profile embedded, it sounds like the web-audience going to see some multiplication of their monitor profile and maybe some form of sRGB.

Are we saying that a future in which monitors auto-calibrate and OSes always manage color is around the corner? Isn’t that what would have to happen? And when that happens, will all these screwed up images be revealed for the charlatans they are ;) If we are really headed towards an ICC-tight future, then these images will probably look screwed up right?

OR is it that even if the OSes get a firm hold on profiling, the monitors won’t. I mean, there are many manufacturers who put value on different things, different components, and it’s probably pretty $$$ driven.... cheap parts trumping reliable parts trumping accurate parts.

So the real question here is: if converting-to-monitor is so wrong, why does it look so good on so many monitors? Why does my image look good on monitors that aren’t mine? Are we literally just throwing any old numbers on these files? Is it whatever numbers we’ve calibrated to? I think my conversion-profile says “Color LCD” so is that my computer profile or some Adobe/Apple standard?

I guess my goal is to create the perception of accurate color for as many monitors as possible. Just like Photoshop has color rendering abilities which wrangle colors for perception vs accuracy, with the web you’re going for perception and for print you need more accuracy. Now, if computers WERE more accurate, then that would trump. But I need to know/understand what method will result in the most repeatable perception...and for how long it’ll work until they “fix” the system.

At any rate, trying to calibrate these LCDs is already a major compromise. I can get these calibrators (had Spyders and eyeOne) to repeat their profiles, tried the standards, tried variations—but there’s still considerable variation from print AND web… totally feels like you’re shooting blind even in a super (over?) calibrated print-flow. I fear we’ve been sacrificing perception for accuracy so I’m feeling open to profile shenanigans.

And honestly, if someone is downloading our images and trying to print them, I’m GLAD if they print crappily or don’t sail into their photoshop ;) Protect that copyright!!

Seems like this debate will go on until someone can explain the true practical perceptive consequence of “the wrong way.” It’s not enough to say “it’s only consistent with your own machine” or that it won’t be accurate. As Jeremiah implies, every one’s monitor WILL render the image differently from yours, no matter what you do, no matter if you are calibrated, no matter if you are profiled.

So bottom line is: which method will get most people seeing close to what I’m seeing most of the time.

Any web designer obsessed with standards will eventually have to hack their gorgeous code to get something to work. This ain’t 2020 when the Interweb will be perfect. This is MacGyver. We’re lucky each day our computer doesn’t melt.

On 5/16/08 3:56 AM, “Viget.com” wrote:

> Are we saying that a future in which monitors auto-calibrate and OSes
> always manage color is around the corner? Isn’t that what would have to
> happen?

No. All we need is the browser to operate like Photoshop. Recognize an embedded profile OR assume the color space based on a preference (sRGB for the time being). ITS THAT SIMPLE.

>And when that happens, will all these screwed up images be revealed
> for the charlatans they are ;)

Yes. That’s very possible.

> OR is it that even if the OSes get a firm hold on profiling, the monitors
> won’t.

The display is an output device like your printer in that its device dependant and far more than modern ink jet printers, is unstable over time and differs from make to make (even the same model) PLUS it has controls that let people screw up its output. They have to be profiled.

> So the real question here is: if converting-to-monitor is so wrong, why
> does it look so good on so many monitors?

Its that delusional effect due to the fact you’ve made a closed loop viewing environment. It also never guarantees it will look like this on any other monitor. Only color management allows that. That’s all color management is supposed to do! Make the same RGB numbers in this case provide the same color appearance on a multitude of displays that are profiled. But I’ve only said that here a dozen times.

> I guess my goal is to create the perception of accurate color for as many
> monitors as possible.

That’s been possible for well over a decade.

> At any rate, trying to calibrate these LCDs is already a major compromise.
> I can get these calibrators (had Spyders and eyeOne) to repeat their
> profiles, tried the standards, tried variations—but there’s still
> considerable variation from print AND web…

Its not a compromise, its a necessity to get the same RGB numbers to preview the same way. Print is a totally different beast, you need a profile for that device (and you need to soft proof to it) and you’re now dealing with matching an emissive display to a reflective print under some (as yet) undefined illuminant. Don’t confuse the issue here with print. Folks are having enough difficulties just understanding how to make multiple displays match!

> So bottom line is: which method will get most people seeing close to what
> I’m seeing most of the time.

They all calibrate and profile their displays on a regular basis (once a month or so), they all view the images in an ICC aware application. Rocket science? Nope.

> I mean, technically, these images are locked into color numbers… it’s
> not as though every monitor doesn’t receive the same image/numbers once
> it’s actually online

Actually, it does. But the color appearance isn’t the same because of a lack of color management.

> We know what Photoshop is supposed to do
> and it should be simple right??

No. Photoshop, like Safari, Excel, or any other application on your Mac or PC is only a big calculator that deals with 1’s and zero’s. R23/G57/B99 is just a set of triplet values. Numbers alone don’t define color appearance. R23/G57/B99 in sRGB isn’t the same color in Adobe RGB (1998) or yourprinter RGB! Color management just gives the numbers a scale and thus a proper color appearance. Color management is number management!

> So let me get this straight, if the browsers become color-aware, that’s
> really enough??

Color aware means the numbers have a known scale (the software “knows” R23/G57/B99 is in sRGB or any other defined color spaces) and it knows about your display profile. So yes, IF you have a color aware browser, its looks at a set of RGB values, associates it to a color space, provides the correct preview based on the display profile. Yes, calibrate and profile the display, have a set of numbers in a defined color space, that’s enough (that’s what Photoshop and dozens, maybe hundreds of other applications can do, unfortunately not the majority of web browsers).

> I suppose I am not being clear...when you guys say repeatable color,
> you’re content if the minority with a profiled workflow can see the images
> correctly

R23/G57/B99 either previews correctly AND repeatedly every time you view it, or it doesn’t. IF you use a color aware application and regularly profile the display (because they are unstable devices), these number will preview correctly and repeatedly. This is really very simple.

> You say it’s
> useless...that people either care about color or they don’t. If they care,
> they’ll see things correctly if you do them correctly.

If they care, the calibrate this unstable device and the use ICC aware applications. Simple.

> But is it possible that even if people don’t care about
> color, that one of these janky methods—like so many hacks --
> actually/accidentally works??

Its possible, like the alignment of the planets, the preview can be correct, until this unstable device changes its behavior. Then it will not. R23/G57/B99 in sRGB should provide the same color appearance today and in a month, and in a year, and in 5 years. Unlike cheese, color numbers don’t age or change by themselves. So it seems pretty logical that every time you view the same numbers, on any number of displays, the color appearance should match no?

> As for LCDs, I meant that using an LCD in the first place is a compromise
> although maybe you’re saying that the LCD-vs-CRT bidness is only relevant
> to print.

Makes no difference.

> OK, so basically you guys are saying that unless people calibrate their
> workflows, all bets are off

Yup.

There is SECOND LESS KNOWN color shift! I just wrote about the color shift on my site and a reader informed me about it. It’s in the PNG files. There is a free app to remove it called GammaSlamma:
“GammaSlamma is a utility that allows web designers to remove the gamma information from PNG files to enable them to display consistently in all browsers.”
http://www.macupdate.com/info.php/id/23359

Would it not be nice if you could upload ONE ICC-profiel for an entire site and tell the browser to show all images with this profile? It would be much easier then saving every jpeg with it’s own ICC-profile. Images without any profile would automatically display correct.

Woz, thankfully Photoshop CS3 no longer writes the gamma chunk into PNG files… at least this is what my experiments have shown. This is an issue with CS2 and earlier on Mac. I removed the gamma chunk using PNGOUT (on Windows) before CS3 came out.

Amazing? Why? Every monitor is a different output device just like every printer is. You wouldn’t expect to send the same file to ten different printers and have them all match, would you? The last time you were in a Circuit City store and looked at the bank of televisions on the wall, did THEY all match? That’s what I thought.

Here’s my situation.
I shoot my digital camera in sRGB.  My Adobe ACR raw converter is set for sRGB.  My working space is set for sRGB.  I’m set for Monitor RGB proof setup.  So my workflow is sRGB end to end.  I don’t use Save for Web because I want to retain IPTC and EXIF data and my old habits are “Save As”, pick JPEG save at 10.  I’m suffering about a 20% desaturation in colors when viewing the photo on the web.  If I do a Save for Web, I see the desaturation happen in proof it shows.

My color settings are currently North America Web/Internet.

I’m on an Intel MacBook Pro running OSX 10.5.2 and CS3.  My monitor is set to the Windows 2.2 gamma and not the Mac 1.8.  I’m viewing the images on Firefox 2.0 which doesn’t recognize profiles but more importantly my viewers are viewing with everything under the sun.

Since I see the desaturation happen in Save For Web, Photoshop has to be doing something intentional.  Ironically if I view the saved JPEG in Safari the color pretty much match what I see in PS.

This is getting very frustrating.  If on the color settings I have it “Desaturate the display by 20%” then I get in PS what I see in the browser, but it warns you that you won’t see what’s being printed.

If I’m sRGB end to end why am I having this problem?

Thanks in advance!
Rob

I thought you said, the only thing you had to do from this pages original list of steps was pick Monitor RGB under View->Proof Setup->Monitor RGB.

Which Ironically, if I do this AFTER I load the image, it matches the browser pretty close.

Given my work flow of sRGB->sRGB through and thru and not using Save for Web, but regular Save As (which I verified on Flickr is seeing sRGB tagged images), what should my color settings be?

From what I’m seeing you say above I have to convert to sRGB but I’m already in sRGB so that conversion seems out of place.  Or am I mis-reading this too?

“they will look correct to EVERYONE who has properly set up their systems and bothered to download a color managed browser.”

Just what planet are you living on anyway ? I mean, lets be REALISTIC here. The large majority of systems in the world are sitting in family homes and company cubicles AS IS, straight out of the manufacturer’s box. They don’t know color management for beans, let alone know what ICC is or even exists.  They get IE on their machines by default and most people never use anything else, even though there are much better alternatives out there to be downloaded. Macs are still in the minority in the computing marketplace and Safari for Windows has a raft of problems. Opera is certainly viable and a great browser, but it’s user base is very small.

Would we, as web designers, be saved a lot of hair pulling over color if all browsers were ICC aware and all systems EXACTLY the same ? Absolutely. Are we deluded enough to believe we can make the average computer user go download a certain browser and spend money just to calibrate their monitors just so they can see our pretty colors ?? No. Real world… it’s all over the place and while the ‘ideals’ put forth here are nice - ideals always are - it’s not reality and it likely won’t be for a very long time.. if ever. Most computer users, home and corporate, are NOT all that concerned about the colors, except for the initial gut reaction that it ‘looks nice’ or it ‘looks awful’. While the color shift that’s the subject of this article is annoying, at best, the end user is never going to notice the difference - unless you’re one of the ‘experts’ that have posted here, even they wouldn’t know the difference unless they see the original intended colors.

The in-depth discussion here is interesting, if not mind-numbing, to someone like me, a web designer, who has never worked as a print designer and therefore not overly concerned with exacting color for the print world.  I learn as much as I can, and use the information that gives me the best results overall. Given the myriad differing and often conflicting ‘solutions’ to this same issue, I do the best I can with what I’ve got to get relatively decent results. I’d love perfection, but just isn’t going to happen.  My Photoshop is set up closer to what Nina’s article suggested, and I’m not unhappy with the results from that.. and neither are my clients.

A.R. I think Rob ISN’T listening to the “people trying to convince him to ‘turn off’ color management” because he probably wouldn’t see the color shifts he’s describing—he would have created a closed circuit.

He says he’s got everything managed in sRGB from end-to-end...the only thing is if he has the the soft proof on all the time. At any rate, it sorta sounds like he’s just describing the exact motivation behind Doug starting this blog post in the first place and why people love the “fix.”

It’s pretty funny actually… I mean Rob, not funny at all of course! This is exactly the frustration that has driven people throughout the last 100 comments to strip out or mangle their profiles and color management system.

The proper sRGB workflow in Photoshop just does not match the majority of non-ICC-aware browsers… so people have been mangling their profiles to compensate while the other camp insists that if a person cares about color (including us), then they would use ICC-aware programs from end-to-end as well. And if the person doesn’t care or isn’t, themselves, ICC-aware, then monitors/etc are so janky that nothing will match—so why break the image?

It’s a tough one.

Jean: “they will look correct to EVERYONE who has properly set up their systems and bothered to download a color managed browser.”

Diane :"Just what planet are you living on anyway ?”

I live in the world of creating images. My images go to the web, to print on offset press, fine art print processes, photographic processes, and into computer applications. They are created in color managed software (Illustrator and Photoshop) and in non-color managed software (Fireworks, ImageReady, various 3D renderers.)

The only way I can guarantee consistent color as my images go into and out of various color managed and non-color managed processes, image formats, and color modes is to really understand color management. Color management for the web is certainly the simplest and most straightforward aspect of my color work.

What Doug has recommended here is a huge step backward for professional digital image creators and publishers, and I am sorry to see so many people reading it and applauding his sad advice.

The challenge to Doug is to really take this issue on, and post an amended approach with a more mature and subtle solution.

Ruining the color for everyone but yourself, on one monitor, is not a professional solution. Ruining the color of properly color managed images that come to you from your clients and their contractors is truly atrocious.

Exactly! They can’t. sRGB is the best thing for now. Using anything else is fooling youreselve. Unless you work for a pro-audience with a lot of Safari users.
Thats what a friend of mine does. If so, you can ‘tease’ the other readers a bit. Anyone know the Dutch beer brand Heineken? It’s green with black yeah. So he changed his avatar to that. It says ‘color’ instead of Heineken but everything else is the same. THAT IS, if you view it with Safari. If you see it in IE of FF it looks crap. Have a look: http://www.macmojo.nl/ANDERS/color.jpg

(Funny, if you drag the avatar from the FF browser to your Mac desktop it changes back to green.)
This is realy something to remember if you make something for the internet....

:’( spoke too soon..... not sure if there’s somehting else I should be doing here - but my green still goes wrong:
http://screencast.com/t/p2Vl0yxB

as you can see the orginal green is much deeper, much more of grass green. Once I go into ‘save for web’ - the green ends up very much on the yellow side… :’(

any ideas what could be going wrong here?
(steps above followed precisely - and the image is RGB, 8)

prisca, you might be better luck following Nina’s guide (posted above), which has a more thorough description of the steps, and a difference in the color space handling. Try it out, and let us know if it helps.

Your options in that panel aren’t what I see in CS3, which might be part of the confusion. What Photoshop version are you using?

I see, you’re looking in the arrow above the 2-up screen. I’ll have to look into this, I hadn’t tried using the 2-up screen in this process, just comparing the comp and final result. I’ll look into it.

Prisca, the first thing you need to do is IGNORE Doug’s advice at the beginning of this article. It will just mire you more deeply in confusion, and bury you irretrievably in an approach to color that will not be reliable or repeatable over the long haul.

The next thing you need to do is go to your Mac System Preferences, go to the displays panel, and choose the Color tab. Run through the “Calibrate” routine until you get to the point where you select the target gamma. Yours is set to 1.8, which is a poor choice for Web design. Change it to 2.2, finish the process, and save the profile. This is a short-term stop-gap measure, but it will get you through the immediate issue.

Next, you need to set up color management in Photoshop. Again, Doug’s advice for how to do this will cause you grief, you don’t want to go that route. A decent starting point for color management settings for a Web designer is the preset Adobe has supplied, called North American Web/Internet. I do a broad range of color work, so I use a more sophisticated set-up, but you guys aren’t there yet…

Save your interface file and close it. Open it again. Opening it at this juncture should convert it to sRGB. Verify this by setting the read-out in the lower left, immediately to the left of bottom scrollbar, to display the document’s profile. It should say sRGB plus some additional characters, indicating yu are in sRGB color space now with this document. I hope you are now seeing color you like, but you may not be. Verify also that your file has not been flattened. This is a real danger when you move from unknown messed-up color to controlled color. (That is one of the dangers of working in unknown messed up color to begin with.)

If your file has been flattened, close it without saving.

If the file is intact at this point, you can adjust the colors until you like what you see, knowing they are being rendered in a way that is appropriate for a general web audience. (They still aren’t accurate, because you are running your display with a generic profile, but they are more nearly in the ball park.)

To preview how this image will display in a non-color managed browser, or any any browser *on your current monitor only* go to view > Proof Set Up > and pull down to Monitor Color. Don’t adjust your color after while in Monitor Color Preview, just consider it a preview of how the image will look in Firefox. Turn the preview back off.

Now you are ready for Save for Web. Save your image once with the profile embedded, and once without the profile embedded. Name them so that you will know which is which. At this point it is up to you to decide if it is better to post the image with the profile or without. Generally, interface elements are best posted without a profile, because you may need to match CSS color to flat areas of color with in the image. Posting with a profile will cause a mismatch in this circumstance in Safari.

Here is a page I put together showing my results, and how the tagged and untagged images look next to a hex color sampled from the untagged image.

http://www.stlouisartistsguild.org/testing/greens.html

Do either of these appear correct to you? View them in Safari and in Firefox to compare the results. (But you will have to have set your display to 2.2 as I told you to do first.)

by the way… I didn’t initially notice your British spellings of words. If you are in Canada, North American Web/Internet is still a good choice. If you are in the UK, Europe Web/Internet may be better. You will want to choose the correct dominant inkset for your region for CMYK color space, so any CMYK files supplied to you without profiles will have a shot at being converted correctly.

Jean,

thanks - yes, I’m in London, UK - and we’re used to the American settings and have to cope using those pretty much. Despite trying to install European settings - a lot of software does not readily keep our preferred choices.
One example would be the print papersize. Fine for myself here at home - but where I teach - the American default setting of ‘letter’ seems stuck… ;-)

And I do not have any European settings in Photoshop to replace the North American Web/Internet - http://screencast.com/t/4b1Cw9tbsq

I will definitely be more aware of colour settings now, for web and print, and try to keep learning and using the correct settings - wish me luck :)

thanks.... well, now I really feel like a beginner - not knowing those little bits…

thanks for all your help :-)

Thanks, Jean :-)

well, I didn’t think I was a beginner (until reading your comments) - but I don’t mind feeling like one when I get to hear people like you with real expertise in their subject talk :)
after all it’s one of the things I love about the web - it allows me to be a student forever as there is always so much to learn :)

and yes, will be doing A LOT better now. I couldn’t resist - after I did my colour settings following your isntructions - had to have a quick look back at some other images I had done and optimised - can see clearly what a difference this has made :-)
I will be flying now!!! Thank again.

“I’m in London, UK - and we’re used to the American settings and have to cope using those pretty much. Despite trying to install European settings - a lot of software does not readily keep our preferred choices. “

@Prisca: You might want to read the artcile: “Better not use the Adobe Creative Suite 3 ICC profiles?” It’s about correct CMYK / print settings for European printers.

http://www.macmojo.nl/nl/artikelen/better-not-use-the-adobe-creative-suite-3-icc-profiles.html

No problem. I write about this stuff a lot. But in Dutch. Could switch to English but my grammer is not that good… By the way, use to work with a big London agency but forgot their name! We worked for the Philips Domestic Appliances account combined with Disney Paris. Had a great time.

hi again, just a quick comment - I’ve written up the steps I followed in order to keep them as a reference for myself (and my students) - I am not sure how accurate the post is (just a very quick and somewhat superficial step-by-step) - but thought I should give you the link, in case it helps:
http://graphiceyedea.co.uk/wp/2008/06/09/colour-madness/

PS: Jean, I hope you don’t mind me quoting you and showing your sample - I’d also like to link to your site - if you have one?

Thanks again :-)

Thanks, Jean :-)
and sorry about mistaking you for a man… and compared to me you are still an expert in these colour issues - you’ve learnt a lot from your experts :)

Will email you for the sample files - thanks.

I don’t completely agree with this article.

The problem is he’s obsessing over getting photoshop to appear like his browser does. But on a colour calibrated mac, that’s not the ideal solution. He should be striving to replicate what everybody else is going to see (since most people, sadly, are on windows).

Set the working profile to sRGB so that you’re more closely simulating Windows Gamma/RGB to begin with (and therefore making the image more predictable in appearance for the masses). And set your Proof Setup to Windows RGB. When you do a save for web you will naturally see a slight brightening of the image (due to the brighter Mac gamma) but that’s something you just have to accept. It would be no different than viewing a jpg created on a windows machine first.

After that, if you really wanted the colour to stay the same in your preview window/browser, you could re-calibrate your monitor to use the darker 2.2 (I think?) gamma.

>he point of this exercise is to quickly and simply achieve a true color match between Photoshop and a browser (both on the designer’s own machine).

NO it’s not. Keep saying to yourself over and over again, its NOT matching the designer. Its not matching the designer. Your flawed logic and instructions fail to recognize it ONLY MATCHES BETWEEN PHOTOSHOP AND YOUR BROWSER!!!!

This isn’t rocket science. I don’t understand why you find this so difficult to understand.

The only way your browser and any one else’s browser (even your designer) match is how multiple users get Photoshop to match: By using color management and a profiled display.

You’re far, far from anything close to true color matching.

>Sorry Andrew, but that’s exactly what I said. You even quoted it: “A true color match between Photoshop and a browser (both on the designer’s own machine).”

For what purpose? You’ve got two different systems, two different displays, two different video pipelines. The entire POINT of profiling a device is to define this for a color aware application which your browser is not. Nothing will stop this fact from being so. Photoshop operates correctly because it examines the display profile and the document profile (or assumes in this case sRGB) and applies a very specific compensation for EACH USERS so that the same RGB numbers produce the same color appearance on differing systems.

You’re NOT GETTING THIS bud. Your designer and you both use the same RGB doc but the display isn’t profiled (or in this case, the browser has no idea that the profile exists or how to use it).

Your instructions do not DO NOT in any way make Photoshop and your browser in addition to any other users browser match. I’ve only tried to explain this a dozen times and you still don’t appear to get it.

That the browser and Photoshop match on YOUR machine does NOT mean the image in YOUR browser and YOUR designers browser match. No, not so, nada.

>The point of this exercise is to achieve a visual match between Photoshop and browser on a single machine.

Totally meaningless since what you just did doesn’t apply to any other human on the planet.

And if you want the correct match between Photoshop and a browser on a single machine, use Safari or FireFox and forget all the hopes you’ve jumped through to get Photoshop to improperly show you the RGB values.

Doug, if you want to work on someone else’ graphic within photoshop, and the graphic has no profile, all you have to do is open it in sRGB, edit as needed, and save it again, without converting to sRGB, and without embedding a profile.

It’s just that simple.

While in photoshop, you preview in monitor RGB before you start, and whenever you want as you work, to verify what you will see when the image is saved without a profile.

No need to use the elaborate and totally whacked color settings you advise here, and no reason to advise who knows how many others to ruin their settings as well.

Working with screenshots on a Mac is another matter, because the Mac system is color managing your screenshot, applying a profile too it. Had you even noticed this yet?

If you screw around and turn color management off, you can’t possible know what you are really doing. It’s like driving around in a rainstorm with your wipers turned off.

“Ever noticed you CAN NOT turn color management off.”

That’s right. You cannot turn it off on the Mac OS, either.

That’s why screenshots are throwing Doug for a loop.

You have to learn this stuff, people, otherwise it will trip you up when you least expect it, and you won’t have a clue how to deal with it.

Doug, you really ought to get someone to come in for a day and show you how this works, if you haven’t been able to figure it out from the responses you have gotten so far.

You have a responsibility to your readers now to clean this mess up.

Marc, if you have your monitors properly calibrated and profiled (at the very least, using 2.2 gamma and D65: I would double-check this) then we can conclude the following:

On the monitors where you see minimal shift when we remove the sRGB profile and display with no profile we can assume those monitors’ native behavior is pretty close to the sRGB standard.

On the monitors where you see a significant shift when you display an sRGB image without the sRGB color profile, we can assume that monitor is not so close to sRGB in its native behavior.

One of my monitors is capable of displaying quite a bit more color than the sRGB color space describes. When I view sRGB images without a profile on it, they appear more saturated.