December 12, 2007

Gamma Gamma Hey!

Ah, perfect. This is the most brilliant design I shall ever produce. Everything is in order; all of the colors are amazing. If I died right now while sitting at this computer, even the EMTs will say to one another, “that’s the most breathtaking design I’ve ever seen”, as they pick my corpse up off the floor. Now, let’s just Export for Web and… oh, fer fucksake! Why is everything so washed out?

Every day I see aggravated blog posts, twitters, and IMs all pleading for the same damn thing: someone to bring sanity to color calibration.

For those who may not know, monitors and operating systems come with default color settings. You are able to change and calibrate these settings to tweak things like brightness, contrast, and temperature (of color). That all sounds great, but any number of factors can shift color values away from what you’ve specified, and some applications have their own separate color settings that may override your calibrations. Take some time to bone up a bit on Color Calibration.

I have two computers. The guts are identical, same model, same make, same settings for color—both at a system level and in programs like Photoshop. On one computer, when I export an image from Photoshop it looks different in browsers and in other applications than it did in Photoshop. What’s more, it looks different still in Photoshop, browsers, and other applications on the other computer with the same settings.

Do I really need to re-calibrate my setup every other month? I know that a monitor’s colors settings shift ever so slightly as time goes on. I know that environment, lighting, and phase of the moon can all have an effect on the display of color on-screen. I can accept that. What seems odd to me is that seemingly no one has figured out how to compensate or correct this at the OS level. It also doesn’t help that the language and acronyms used to define color settings are confusing enough to make the average person weep.

I imagine there are still expensive calibration programs that will keep my computer in check, but should we have to expand our systems to address something that it should take care of already? And for the love of god, why are Adobe, OS and monitor makers on different wavelengths when it comes to color display? Is there any standardization in this field? Is standardization even possible? Maybe Pantone should’ve listened to Tim Bray and nipped this in the bud long ago.

And even if I did employ software on my setup to fix the inconsistencies, it wouldn’t really fix anything—the people viewing my graphics will still be in the same sinking ship. It’s maddening, I tell you! I realize there is no one solution to this problem, but is anything being done about it?

Commentary (34):

1. Eric Meyer says… dec 12, 2007 | 10:56 am

Substitute “character encoding” for “color” and you’ve got my #1 technology pet peeve sewn up like a treasure bag. But color runs a very, very close second.

2. Eric Meyer says… dec 12, 2007 | 10:57 am

Oh, and the pun ”…why are Adobe, OS and monitor makers on different wavelengths when it comes to color display” made me giggle like a schoolgirl. A very tall, congested, and nearly inaudible schoolgirl, but a schoolgirl nonetheless.

3. Travis Fleck says… dec 12, 2007 | 11:13 am

Damn! I was hoping I was just in the dark about a very basic way to standardize color in Photoshop and on the web…no such luck, huh? Damn!

4. Dave S. says… dec 12, 2007 | 11:30 am

First thing - you’ve turned off colour profiles, right? Set your default RGB profile to “Monitor RGB”. Working in Adobe RGB or sRGB is a recipe for a headache; everything you export will colour shift.

If you have files already set up to use a colour profile, convert ‘em to a monitor profile. I wrote this up a while back.

5. Jason Santa Maria says… dec 12, 2007 | 11:42 am

Dave S.: That definitely helps (and I was doing that before too, thanks to your previous write-up), but this is only half the problem. More browsers are starting to use color profiles, and while your method fixes things on my system, my other setup with the same settings produces different results, as would a smattering of people viewing my stuff.

It’s all such a mixed bag or inconsistencies.

6. Rick says… dec 12, 2007 | 11:42 am

You should reduce your pallet from 16,777,216 possible colors to just the 216 websafe colors. This would probably ameliorate your problem somewhat if not solve it completely.

But then I probably have to let you use tables for layout and make tag soup sites. ;-)

Unfortunately, creating the small electronic components for monitors and other devices is not as an exact science as one might hope. If you’ve ever built your own transistor radio you know the problems. (yes, i’m old enough to have done that) A tiny extra bit in this resistor, a little touch too much or too little in that capacitor, while all well within manufacturing specs, can cascade and cause the problems you complain about.

This doesn’t absolve the manufacturers and they know it. That’s why they create the ability to adjust the display properties and provide Image Color Matching profiles. While not perfect, it’s probably the best they can currently do.

There are lotsa pages that will tell you how to adjust your monitor. What is needed, as you hinted at above, is a basic standard which the consumer can use to check the adjustments. I don’t know of one.

7. James Ellis says… dec 12, 2007 | 12:51 pm

Long a frustration for me as well. I finally got a handle on how color management works in Photoshop. Then I wrote an article on the topic. The process can be boiled down to the following:

Photoshop Working Space. Set PS’s RGB working space to sRGB. This will force PS to interpret RGB/hex using the sRGB baseline, instead of shifting values according to any working space color profile.

Working With Documents. Apply your monitor’s color profile to any PS document that you open. This will make the document display the in same way it would in Firefox, Safari or whatever.

Exporting. If you’re running CS3, you now have to switch your doc back to sRGB (removing the color profile) before running Save For Web. To keep this switching easy, I use two hot-keyed Actions to bounce between sRGB and my monitor’s profile.

8. Naomi says… dec 12, 2007 | 1:07 pm

I’ve got nothing to add except I feel ya, I really do.

9. Adam Norwood says… dec 12, 2007 | 1:13 pm

What it really boils down to, as you said, is that color profile tools are confusing, inconsistent, not readily available, and there’s a maddening number of variables involved. Going from camera to screen to print is one thing, but going from screen to web seems to have way more problems than it should.

I use a cheap calibrator (Pantone’s Huey, ~$60) combined with online gamma and brightness charts to get my monitors and laptops pretty close to one another. OS X handles the Huey profiles a-ok without complaining, but to have dual monitor support (each monitor having a correct, separate profile) in Windows I have to download Microsoft’s Color “Power Toy”, which is actually pretty useful to have — why isn’t this built into the OS? And of course this really only helps me, not my clients or the public who have differently-calibrated systems, browsers, OS’s, etc. For that I’ve been tinkering with settings similar to what Mr. Shea and Mr. Ellis above suggest.

Now that Firefox is going to support color profiles as well as Safari, will that change anything? Is the default gamma on the Mac still set differently than Windows, or is that no longer true? Why is the sky blue, and why does it look purple on your screen!?

PS: pick up a copy of Josef Albers’ book Interaction of Color if you ever want to question your own visual judgment :)

10. Evan Agee says… dec 12, 2007 | 1:20 pm

I’ll tell you what’s being done about, more and more designers are becoming complacent and deciding that things don’t have to look the same on every computer our work is viewed on. I gave up a long time ago. I do my best and accept that not everyone is going to see things as beautifully as I intended. No biggie, really.

11. beth says… dec 12, 2007 | 1:26 pm

There’s also the additional beast of printer color calibration in coordination with monitor and photoshop calibration, not such a huge issue for web stuff, but if you’re doing any kind of digital photography this can be an endless pain in the neck!

12. Jason Santa Maria says… dec 12, 2007 | 1:28 pm

Evan Agee: Now that’s just silly :D

Complacency gets us nowhere. As I mentioned above, I’m not asking for everything to look the same, I’m just asking for some reasonable consistency. The fact is there no baseline or standard to shoot for, and the terminology for management is awash with gobbledygook that alludes the vast majority of computer users.

When we code our sites with standards, we take into consideration that things won’t look exactly the same for everyone. That’s fine, but we also understand that standards have been put forth and we have a workable baseline for expectations.

13. Oxa Koba says… dec 12, 2007 | 2:12 pm

I wondered if you weren’t thinking of “web standards” when you asked why their wasn’t a standard for color.

The first thing I thought of was the ACID test thingy that browser makers asked to pass. Could something similar be made for browsers? Will Firefox and Safari support a standard color profile system, cross-platform?

Would having the browsers aim for a color standard (in the web standard sense) at least take out one variable. After that it would be up to applications that export-to-web to target the color standard as well.

Once upon a time a Pantone rep explained to me that any two Pantone swatch books, from the same press-run, will be immediately different hot off the press. Without ever facing sunlight, moisture or any environmental exposure, the swatches at the beginning of the run will be different from the end of the run. I wanted to scream and cry and kick something. And I am seriously stoic. Argh!

If print, after a few centuries of trying, cannot do it, how are complex electronics going to pull it off?

14. Rene says… dec 12, 2007 | 3:23 pm

Color management can be frustrating, but if you want consistent color for web, I would suggest you use sRGB consistently as the default profile for all apps despite the previous advice.

Using the Monitor RGB is the straight path to hell if you ask me, because that is the very definition of a moving target. I’ve tried that and it just doesn’t work in the long run, especially with multiple computers.

If you really want to understand this stuff, Real World Color Management is the only book that is really worth a read.

15. Shaun Inman says… dec 12, 2007 | 3:33 pm

I feel your pain Stan. It seems like every time I look at my site in a browser it’s a different color.

16. Jason Santa Maria says… dec 12, 2007 | 3:37 pm

Shaun Inman: You come out from under your rock for a bad pun?! Get back to work, ya bum :D

17. Shane Guymon says… dec 12, 2007 | 3:47 pm

There are far too many facotrs involved to be able to fix a problem like this. Not only do operating systems have to all come to a global standard, but so do companies making monitors, but even then why would you want a monitor that you can not adjust the colors and contrast. Then beyond the monitor itself you have the browsers and those differences.

I say you need to just LET GO, and not NEED that much control. Just design websites that work well, and let the rest just fall into it’s places and realize it is beyond your control.

18. Mandy says… dec 12, 2007 | 5:38 pm

If it’s any consolation, the illusion of control in the print world is really just that—an illusion. I just opened a box of freshly printed catalogs to find that half were the pantone color specified, while the other half exhibited a color infinitesimally different, and yet, so wrong. And they came off the same press within seconds of each other. I think color is a restless, whimsical creature that refuses on principle to be consistent.

19. Andy States says… dec 12, 2007 | 7:03 pm

I seem to have that problem especially when exporting from photoshop for web. I know some people that claim fireworks does a much better job. I’d be surious to see some comparisons.;-)

20. Mark says… dec 12, 2007 | 10:21 pm

THIS made it make sense for me.

21. Jason Santa Maria says… dec 13, 2007 | 9:08 am

Mark: Wow, that worked perfectly! I don’t remember that being on by default in CS2. *shakes fist at Adobe*

22. Doug says… dec 13, 2007 | 9:50 am

So is the post title a nod to the Ramones?

23. Jason Santa Maria says… dec 13, 2007 | 9:55 am

Doug: Yessir!

24. Decavolt says… dec 13, 2007 | 3:31 pm

I was having the same issues with two designs this week. Lots of subtle color variations that were totally lost after Save for web. I finally found a great how-to for managing color profiles, it was a huge help.

25. Decavolt says… dec 13, 2007 | 3:32 pm

Oh, and major points for the Ramones pun in this post’s title.

26. Steven Clark says… dec 13, 2007 | 5:11 pm

I think you hit it on the head when you said that you will never know how users see your design colours.

That’s really important because we often sit back with calibrated monitors and high quality screens - but in the end we still need a couple of old monitors just so we can see what normal people are receiving.

I feel for you too Jason.

27. Natalie Jost says… dec 14, 2007 | 3:06 pm

There’s not much I could add to the conversation except to say that I’m afraid even if we could sync every element from computer to paper, to the lighting in the room, there would still be the matter of the human eye and its vast perception of color. It’s why it took my groom and I way too long to agree on the right shade of pink for the twins’ room! Though looking at the same paint card, we each saw a slightly different pink.

28. krystyn says… dec 15, 2007 | 4:40 pm

I’ve had the same woes time and time again.

I did a little web research recently and discovered I wasn’t the only one who suspected this whole color profile nonsense was likely created by some soused Freemasons looking for a way to make it near impossible for non-Mensa members of society to figure out why images that are perfectly fine on my monitor look darker than midnight inside a badger’s ass when saved for the web:

http://tinyurl.com/ysltxu

Don’t know if that helps, but it helped me.

29. Gerry Quach says… dec 15, 2007 | 7:56 pm

I’m constantly amazed that colour management isn’t properly taught in graphic design or illustration school.

People who work with images and colour need a properly calibrated colour setup — that means profiled screens, scanners and printers.

A colorimeter is essential, yet few graphic designers have one in their studio.

30. Niko says… dec 17, 2007 | 9:04 am

black & white.….….black & white.…

31. Jon says… dec 18, 2007 | 6:59 pm

I liken it to mixing music. No two people have the exact same speakers in the same room with the same wall reflections, etc, therefore you strive for a balanced mix that will translate well onto other systems. I think the color issue is similar.

32. pbear says… dec 19, 2007 | 6:05 pm

Kinda for print, but I think applicable: Color Management Photoshop Basic Theory.

33. Marla Erwin says… jan 6, 2008 | 12:00 am

Deselecting “Convert to sRGB” in that ridiculously hidden dropdown was the key for me, after a year of struggling with this problem. This UI flub by Adobe has sabotaged even experienced designers with perfectly calibrated monitors.

34. Marc Aguilera says… jan 9, 2008 | 7:49 pm

Wow - so many different opinions on this topic. Reading some of the above responses I realize more and more just how important this topic is to the design community. Our agency is completely color managed and I teach this stuff for a living for X-rite, the Owner of Pantone and the i1 Spectrophotometer and Colorimeter. Here is my take on all of it. Before we begin - color is and will always be subjected to the individual observer and your viewing conditions - geeky I know, but it had to be said.

1. All devices produce color deferently (we color geek types call it ‘device dependent color’), even the same device from the same manufacturer next to each other will look slightly different. This is hell.

All applications treat color differently - Mac OS X apps built using Aqua, i.e Mail, Preview, Safari, and iPhoto all use the default display profile and recognize embedded profiles. Windows applications like Picture Viewer and Outlook don’t use a color management engine. Adobe Applications all have a common color architecture and if you synch working spaces will all look the same - but only in the application. IE 7 has an color management setting however the user has to enable it, and the current release of Firefox does not include a color engine. So no matter what, if you plan to implement a color managed workflow your images will look right in Safari but wrong in everything else. (I am not sure about Opera). Finally, if your display is not calibrated and profiled you will have even more trouble - so no matter what it’s best to at least have a calibrated and profiled display. The questions then becomes one of application implementation.

2. Color measuring your display is crucial if you want consistent appearance. If you do not, you’re experimenting with color rather than managing it. All of our displays (5 Mac - 2 Win) are all calibrated with a sprectrophotometer to the same settings - D65 (6500 Degrees Kelvin), Gamma 2.2, and 130 cd/m2 Luminance. When we share files they all appear similar (taken into consideration individual viewing conditions) - regardless of platform. We run Mac OS 10.4 (Design) and Windows XP (Web Production). We all share the same color settings file (.CSF) in our Adobe Apps. sRGB is the Working Space for Web work and Adobe RGB for Print. When a designer prepares an image for the web we like most “save for web” via image ready and embed the icc profile when we really need to match colors and don’t embed when it’s not as crucial. We then brief the client on real world expectations based on Browser implementations and uncalibrated displays.

3. When we embed sRGB it is only is useful for Safari (by default) since Safari has color management enabled by default. It does not help us with Firefox, unless you’re running Firefox 3 Alpha 7 and you run gfx.color_management.enabled to true (via about:config) * How lame is this? Very Lame Indeed!

Conclusions and thoughts:

The idea of ICC (International Color Consortium - www.color.org) is still somewhat young in it’s discipline. It was written to be open in terms of implementation, meaning the OS, Applications, and Devices use profiles differently or not at all. This makes it a nightmare for everyone. Apple at least has taken a huge step forward with Colorsync and Aqua and Windows Vista has a new color management system called WCS (Windows Color System) but is has been slow to implement fully. This is the current state of affairs with this stuff. If you want any control you have to give up some and live within the limitations of this imperfect discipline. I would rather we all follow an imperfect standard rather than try to invent a new one. It really comes down to setting expectations within your devices and with the client.

Final thoughts:

We have color issues - but they are minor - most of the time we are spot on. We are Pro-ICC and I recommend all designers and photographers follow. If you decide to go this route you should do the following:

1. Calibrate your display to a standard, i.e D65, G 2.2, Luminance 120 cd/m2 - recalibrate at least once a quarter.

2. Use sRGB as a working space (for the web) and make sure all your applications do this same (although this can be challenge for some applications).

3. When you save your images embed sRGB - in the short term they wont look right in IE 7 and Firefox but there will come a time soon when all of the major browsers will have color management turned on as the default, like Safari.

Reading Real World Color Management by Peachpit Press is great but I fear too much for most designer. Take a seminar. Xrite and I will be launching a seminar series in March and we will discuss many of these issues. Check out www.xrite.com or contact me directly at www.encompus.com