Labs

                           

PAUL     Nov 19, 2009
ha, I spent a while looking into this myself too ..
So I went out and bought myself a spyder pro to calibrate my monitor. Second if working for web, proof colors, and proof for monitor, in save for web, do not attach profiles, since the only browser that can read these is safari. Am I wrong with this ?


Best,
Paul

Bingofreakz     Jul 16, 2009
Damn, that sound's so easy if you think about it.

Roulette-DAlmbert     Jul 13, 2009
Sometimes it's really that simple, isn't it? I feel a little stupid for not thinking of this myself/earlier, though.

Magnus     Jun 18, 2009
My settings that work, same colors everywhere, PC & Mac.
#1 - Set Photoshop to your monitors color profile. (Don’t use proof colors)
#2 - Make documents using the monitors color profile or no profile at all.
#3 - When saving for web, choose Uncomencated Color, don’t include ICC profile and do not convert to SRGB.
#4 - If someone else needs to use your psd-document make sure they discard the psd’s color profile when they open the psd.

Pamelarelp     May 23, 2009
beautiiful blog merciiiiii

Christian Sparrow     May 06, 2009
I use 2 monitors on my Mac. One is my work space which I set to sRGB, and the other I keep at Mac's default display settings. This way I can test how things will look within both spaces with a quick drag of a window.

I set Photoshop (and other apps) to the sRGB Monitor's color space to do my work, and then drag items onto the Mac monitor to see if it looks good there as well.

Since sRGB's 2.2 gamma is a bit darker and has smaller color spectrum, it can flatten out darker websites that use subtle details such as monochromatic gradients that only jump a few shades. I try to get my colors just light enough in sRGB to maintain their intended effect, but not perfectly bright or it will look crap on the Mac.

The 1.8 gamma of the default Mac display is brighter and more colorful, but can get a bit washed out if you make your sRGB based design just right. And remember, the opposite is true if you make it perfect on the Mac screen: the sRGB side may look too dark and flat.

I recommend creating a balance between the two if you care about pleasing both audiences (the latter being more design-critical!).

I'm sure there's a better way, but this works great for me.


Bill     May 02, 2009
Reds and oranges are the most affected colors for sure.

Simple Solution:

Disable color profiles.
View working files as monitor RGB in your workspace.
Uncheck all color profiles when exporting images.

Now all your colors will look exactly as they do in your workspace and online. No need to worry about color-profile support in every browser.

Truong Nguyen (constantX)     Apr 30, 2009
I wonder why Firefox dont have color management turned on by default. I've been struggling with the "why" of color when exporting to web (flickr specifically) until recently research into color management for Mac and Windows platform.

Just a note, flickr honors your photos' color profile, it's just a matter of viewing it in Safari (color managed by default) and Firefox (NOT color managed by default).

Turn on Firefox's color management:

about:config
gfx.color_management.enabled <-- set to true
restart firefox

dissit     Apr 27, 2009
This was solved already...

Jonathan Moore is right. the 3 steps he listed is correct. Always use srgb profile and convert to srgb, the KEY step is #2. I havent had issues with shifting colors for a long while now, in either safari or firefox and placing pngs, gifs, or jpegs on a page with the background set to an html color code, it always matches.

NOTE that,

-Even tho you may have Proof > Monitor RGB "checked", if you open a new psd file you still have to proof colors again even tho it is checked, for some reason you always have to proof even tho it says its proofed. Set it as an action.

-Taking a screen capture maybe an inaccurate flawed way to test and compare colors. there are too many factors involved. your monitor setting profile, the psd profile, the psd proof colors enabled or not, saving for web, converting to srgb enabled or not, taking a screen capture from safari vs firefox... etc etc.


@david c
not sure what your trying to say, but your right, the top image color shifts depending on browser. but if you open up the top image in PS and follow Jonathan Moore's steps, youll notice it wont color shift and they will all be the same.



Devin Ross     Apr 23, 2009
I've always had trouble bringing psds to html. Its fustrating to see your colors change when you bring it over. I'm glad someone finally addressed the issue. Thanks!

Karl     Apr 23, 2009
I first encountered this problem a few years back. The issue stemmed from the fact that only Safari honors color profiles. No other browser did (or still does). All things being equal, if you export an image from Photoshop, the colors will never match an identical hex value on any browser *except* for Safari.

Rob H     Apr 23, 2009
A simple principle (on Macs) I use is to convert the document's color profile to whatever profile the monitor is using. Even if there is a custom profile generated by user calibration, the color profile created will be available in the "Convert to profile..." dialog box.

After this, the only option needed when saving for web is "Use document color profile".

Alex Buga     Apr 23, 2009
Nice article, and comments.

I had the same issue when I first started on a Mac. I looked into it and on Apple's support pages I found something really useful.

In order to set the Gamma to 2.2 (Windows native) you have to create a custom color profile for your monitor, without checking the "Advanced" checkbox. You set the gamma to 2.2 and the whitepoint to D65 and you're done. It takes a while until you get used to your monitor but then you're safe.

Also, you need to set Photoshop to sRGB and opt for "Don't color manage my documents". My main problem was when I exported JPEGs on a background color and then placing them in HTML on the color code equivalent ... they didn't matched no matter what I did.

I know a lot of people dealing with this issue, so maybe this article will make things clear for them too.

Jonathan     Apr 23, 2009
I would be interested in using your PSD files for further testing. If you're willing to post the file(s) here.

Nathan de Vries     Apr 22, 2009
Just to follow up on Jonathan Moore's comment regarding changing the gamma settings - MacOS 10.6 (Snow Leopard) will be making the switch from 1.8 gamma to 2.2 gamma, bringing it on-par with default PC settings. Apple has "recommended" that most people switch from the defaults in previous versions of MacOS (http://support.apple.com/kb/HT2026), but very few people I know have made the switch or even know what it means to switch.

My only real experience with colour profiling is with PNGs, where the only real option is to completely strip the sRGB profile information using something like pngcrush.

Matt Kenefick     Apr 22, 2009
@Jonathan Moore

Yes, you are correct. If you are using a PSD that is setup in sRGB like in my example... if you want to export graphics out of it, definitely check the "Convert to sRGB" box in the Save-for-web dialog and the colors will be accurate.

So I suppose the solution for this whole ordeal is this:

1.) Create your documents using the sRGB IEC61966-2.1 profile which can be set by going to "Edit -> Color Settings". Select "sRGB IEC61966-2.1" from the Working Spaces->RGB box.

2.) Set your proof setup to Monitor RGB. Go to View -> Proof Colors [to enable]. Then go to View -> Proof Setup -> Monitor RGB.

3.) When exporting graphics using Save-For-Web, make sure to check the "Convert to sRGB" box.


This should fix problems of exported colors, screen cap adjustments, and preview colors. I also did a test using Firefox vs Safari and they appeared to be the same.

Sounds like a fix to me.

Jonathan Moore     Apr 22, 2009
@Matt Kenefick

It would seem that #1 and #3 cancel each other out, but my understanding of Convert to sRGB is that it just adds in the sRGB color profile to the jpeg/png/gif that is respected by modern browsers. So in reality if you uncheck the box you're essentially stripping out the sRGB profile that you have in the PSD.

Matt Kenefick     Apr 22, 2009
@Jonathan Moore
Your method sounds pretty good. It sounds like #1 and #3 cancel each other out a little bit (but works perfectly if choosing a color profile). Great links as well!

@davidc
That is quite interesting! I remember having seen that before too but did not think to add it to this post. I am glad you put it here in the comments though. I wonder if that happens between Opera / Chrome / versions of IE as well... I will have to check.

@Jonathan
I am going to continue looking into different issues related to the color shifts and post more in the future. I want to dive deeper into different color profiles, better/more solid solutions, and effects on certain colors it may have. It is interesting that the screen capture degrades the color in such a linear fashion. I would like to know if that is a Mac capture thing, or if PC Print Screen / Linux does the same.

Jonathan     Apr 22, 2009
Wow! I've been concerned about this issue for a long time, but I've never had the motivation to get this in depth. I'd love to see something simplified like, "do A, B, and C if you want your exported jpegs, pngs, and/or gifs to look the same.

I especially run into this color difference problem all the time when using both my PC and my Mac for editing / exporting photoshop files. If I exported the sliced images using my PC, and then update one of the slices using my Mac, the color gets off... so I would go through a crazy (but simple) work-around:

From my Mac I open the jpeg with the correct color(s), copy the new updated slice from the PSD into the jpeg file and export. Get's VERY tedious if I have a lot of updated slices, but it has been the only solution I'd been able to find.

Will use this post as a resource next time I have these issues. THANKS!



david c     Apr 22, 2009
We have been through this before.
Not only this but if you look at the same images in safari vs firefox you will see a difference as well. Our findings was anything with a profile embeded in it would give you mixed results.
We also noticed a difference when using save as vs save for web. (but i believe there is a way to turn off color profile embedding in save for web cause my test below shows no change between the save as and save for web which i know it did when we first came across this)

view this page http://www.watsondg.com/test/htmlcolor/ in safari and firefox on a mac and you will see the top image the one with the profile in it shows up differently.




Jonathan Moore     Apr 22, 2009
I struggled with this for quite some time, but finally I have a work flow where I know that all my Save for Web (png, jpg, gif) images look the same in html or Flash as they did in the PSD.

1. Always use sRGB for PSD color profiles
2. Work on the PSD in Proof Colors > Monitor RGB
3. When saving for web I make sure the Convert to sRGB option is checked.

Also, on a Mac I changed my monitor color gamma from 1.8 to 2.2 for more consistent colors on Mac and PC.

Here are a few links that helped me solve the color issues:
http://www.gballard.net/psd/saveforwebshift.html
http://www.gballard.net/psd/srgbforwww.html
http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/