To clarify, this is an easy fix if you have saved your png files from Photoshop and, of course, still have access to the software. I stumbled across this fix in PS and haven't tested in any other applications. Feel free to point out other ones that work in a similar fashion. Note: I was using CS2.

The problem with colors in a png image not matching with other images (such as jpg) or hex color values has been around a long time. It's bugged the hell out of me that I couldn't ever find a very convenient way to get around this issue because png is a superior format to gif. From my understanding, this happens because of gamma correction data that is embedded in the file's meta data. Some browsers will read it, others ignore it. As a result, the actual color of the image can be slightly different than actual color values outside of a color calibrated environment. It's not terribly noticeable most of the time, but if you're working with tiled images it tends to stand out. I've done plenty of digging around (maybe not enough) and the only solutions I ever came across were using 3rd party applications that can read and modify the meta data of a png file, and strip it of the gamma correction information.

Two of the apps I came across that appeared most promising were TweakPNG and PNGCRUSH. TweakPNG is a Windows app, and being that I'm on a Mac this wasn't terribly convenient. While I can certainly boot into Windows or use Parallels to run the app, it's just not worth the trouble. PNGCRUSH is a command line app for DOS or Unix/Linux. Also more effort than it's worth for me.

While working on a site today, I decided to try and work with this problem more to see if anything would come of it. I went ahead and made all the imagery (save for a couple photos in jpg format) png. I thought I could pull it off, but I still had a couple spots where I was using a background color in my stylesheet so it didn't match up with the png images. I remembered the methodology behind the two previously mentioned applications and I started browsing around the menus in PS to see if I could get at any of the embedded data. Turns out, it's completely possible and I'm an idiot for not thinking about it earlier. I suppose it's probably not some hidden menu that no one knew about but I certainly never saw it brought up in any discussions about the png color mismatch dilemma.

After you've saved your file in png format (preferably through the save for web feature), close it and reopen it (so to make sure it's reading the embedded data that was saved with the file). Go to the file menu, then file info. You'll see a window with a list of categories on the left. Go to the Advanced category. Your window should look something like this. Delete the Adobe Photoshop Properties item and the item that just says http://ns.adobe.com/png/1.0/. Click ok, then save your file. The data in the file causing the color shift will now be gone and your images will match up with other image formats and hex color values correctly. It's important to know that if you reopen the file in PS and do any sort of modification (allowing it to be saved again) then it may reapply the embedded data. One additional thing be aware of is that you can put these steps into an action to be reused at any time. It does seem to keep track of how the file info is modified when recording the action.

This fix is kind of stupidly simple, but I was never able to find anyone who used the same method. As a result, I'm writing about it here. If I just completely suck at harnessing the power of Google and it turns out this information is widespread and others have blogged about it, then feel free to ridicule me. Hopefully this helps some folks out anyway.

UPDATE: After some discussion with Jesse, he pointed out that Safari was still forcing a slight color shift (though much less significant than prior to the data stripping). I managed to fix this, at least for myself, by in Photoshop going to the edit menu, then Assign Profile. I assigned a file my working space color profile along with stripping the data out and this seems to make it display correctly in Safari with no color shift. I'm currently unaware if this only repairs it for someone with the same color profile or not but I'll continue testing. However, it does seem that Internet Explorer 6 continues to color shift. All other browsers/platforms I've tested work.