ICC Profile Use in CSS3

There will come a day when most of our OS, applications, devices, and browser experiences are color managed. Right now, we are close in some respects but still pretty far in other respects. If you read my prior post on browser compatibility, you found out that with respect to images, they should be embedded with sRGB, but that only helps if your viewing the images on a browser that supports embedded profiles (otherwise the display profile is used as source).

Let's say we were talking about non image elements, like gray backgrounds or orange headers. How should those elements be color managed, especially if your designer is using Photoshop for conceptual layout? If the web designer uses sRGB as the "Working Space" as he/she is supposed to do, what happens at the level of the Web Producer.

The Web Producer does the splicing of the PS file and makes PNG or GIF files out of the individual elements or he codes directly the hex values into CSS. However, one can not embed a profile into a PNG or GIF. This is where CSS3 comes in. CSS3 will allow the Web Producer to set the color profile for the entire coded page, in this case sRGB. That way when the designer and the producer compare the published beta site and the Photoshop preview the two match (of course right now only in Safari).

It will be great day when all modern browsers use embedded profiles and CSS3 becomes a common standard. If your looking for a fantastic tutorial on the subject check out gballard.net.