Getting PNG color and CSS color to match

Same RGB/Hex color is light in image, dark in text

[rjohara]

I'm a graphics-challenged person, but this weekend I've been trying to learn a bit about PNG in particular so that I can get my images to display well on both Macs and PCs. PNG stores gamma information with the image, and browsers that know how to read this (most, nowadays) can make an image look more or less the same on both platforms. I have converted a few GIFs into PNGs with Photoshop, and the result is really fantastic - my nice Mac images don't look like mud on PCs anymore.

But I've noticed a slight discrepancy still, and I wonder if one of the graphics experts here can tell me how to correct it if possible. (I'm working at the edges of my understanding here, so my explanation may not be quite clear.)

I am using a tiled border and the color of the border image (now a PNG) is set in Photoshop to be the same color that I use in my CSS to indicate <strong> emphasis: 120,52,66 in Photoshop RGB; #783442 in CSS Hex. Thus in principle the border and the <strong> text should match exactly. On the Mac I create them on they do, but when viewed with IE or Opera on a PC, the image is clearly lighter. (The page in question is the one in my profile if you want to check.)

So, what am I missing? If this is a limitation of the current browsers, I'm satisfied to leave it as is and let them catch up. I have a feeling there is some setting I have missed somewhere, though, that is causing this mismatch. I have calibrated the Mac monitor with the Monitors control panel, so that should all be right. Is there a Photoshop setting I have missed? It is as though the PC is correcting the gamma value twice on the image and so making it a bit light.

Any tips will be much appreciated.

[mivox]

I've never found a way to get a graphic to 100% match an HTML or CSS specified "browser-rendered" color... I just try to design all my sites to completely avoid the very concept of a seamless transition from a solid-color graphic to a background/border color.

AFAIK, there are too many variations between platforms & individual browsers to make precise color management for the web a reality.

[SmallTime]

I'll bet if you tried the same thing in Fireworks the color would match. I generally don't have a problem, and have a vague memory of Photoshop issues regarding pngs. Does it make a difference in jpeg?

[rjohara]

I found the answer to my question:

[libpng.org...]

This describes the strange behavior of various browsers which may apply gamma correction to images but not to CSS colors, or may apply it inconsistently. The page has a series of test suites that allow you to check whether colors do or do not match on various browsers.

If anyone is working with PNGs on a Mac, can you tell me what image editing software you use? The legendary GraphicConverter is great, but it doesn't save the gamma information in the file, which was my main reason for wanting to use PNGs. My old copy of Photoshop 4 does save gamma information, but is terrible at compression. (I'd also like to be able to use transparency.)

[mivox]

Nice reference! Thanks for sharing... I don't work with PNGs much right now, but I know Photoshop introduced some great web compression features with v5.5, so I'd look into upgrading, if I were you... You should still be able to get the latest version for the upgrade discount price if you already own v4.

[eeblet]

As great as Photoshop is, Fireworks is just far more web-able, and definitely more PNG-able (PNG is the default Fireworks format). So if you have the money, go for Fireworks.