color profiles for the web

from http://www.bigspaceship.com/2009/04/color-unity-adobe-vs-html/ APRIL 22ND, 2009 Color Unity: Adobe vs. HTML Working with colors can be a very difficult. It is hard to determine what is perceptual, what is consistent, and what is offset by outlying factors. Things can get pretty hairy when trying to synchronize colors between the web standards and Photoshop. There are a lot of options ( including: proof setups [view menu] and color profiles [edit menu] ) in Photoshop that you may forget about that will stand between you and that perfect color. This test is interesting because the eyedropper tool in Photoshop is only accurate for actual colors, but it does not represent perceptual colors. When loading PSDs, you have the option to set color profiles, discard color profiles, and convert color profiles. These colors will all look very different visually, but the eyedropper color sampling will see them just the same. A deep red seen through a Windows proof setup may actually translate to a burnt-orange in HTML. The left side of these charts is the eyedropper sample taken from a PNG screenshot. The right side is an HTML “#D33432″ background color. For every single proof listed below, the PSD reported the color as being “#D33432,” which means they should match up identically. After looking at these samples, they are clearly not all “#D33432,” at least in the way we’d want them to be. After all, I did say proof. Note: This test required only one .psd using sRGB IEC61966-2.1. Use profile Convert profile Discard profile Every color in the above chart of 12 colors is supposedly “#D33432″ according to the color sampler. The only setup that seems to be accurate with regards to the web is removing all color profiles. If you are starting out a project, it can be easy enough to say, “Everyone just disable color management on these PSDs.” There is a separate issue when you have an existing profile that needs to be converted. We’ll get into that later. Photoshop vs Screen produces adverse, yet logical, effects. If you take a screen capture of a PSD with no color management and paste it back in to your document, there is no strange color shifting; the colors are exactly as they’re supposed to be. Below is a test showing what happens when you do a screen capture on a PSD that uses a color profile. The colors continuously get darker as you paste them back into your document. Saved PNG: #1: Original color. #2 is a capture of #1. #3: is a capture of #2. The big deal: The top is an open PSD, the bottom is a saved PNG24 version of the open PSD. The shades get lighter upon save. This is a little hard to follow, and for that I apologize. The point here is that the saved PNG is lighter than the color-managed PSD following the ratio of screen-capture color difference. The “#c12221″ of the exported PNG is actually the same color as the “#d33432″ in the PSD. Get a color picker and try it out. What this means is that … If you are working off a color managed PSD, your HTML colors will be a screen-capture shade lighter than what you see in the PSD (assuming you’re NOT proofing colors). In order to get the exact color of the image, you must take a screen capture of the color you want, then sample that. It will look darker, but when it gets translated to HTML… it will match.