Why do PNG colours look different in Google Chrome?

Question

I have designed a website using different colors for the navigation bar. However, when I save the PNG images in Photoshop and upload them to the web server, they display differently in Google Chrome compared to Explorer. In explorer they look correct, but not in Chrome. They look slightly ligther in colour than what I want them to look like.

The reason why the colour is so important is because when a menu item has been selected, the background page changes to the same colour as the tabbed menu item. So in Chrome the result looks like the tab is slightly dis-coloured. I want it to look seamless. Can anyone offer any suggestions?

Answer 1

Have you calibrated your monitor? Photoshop has tools for that. Windows does a lot of substitution with graphics. Used to be that MSExploder didn't support PNG transparency, instead showing a light gray rectangle in the background. Make sure your Photoshop color pallet is set to web-safe or web-extended colors.

Answer 2

re-save your PNGs for the web again. If the probelm persists, try using a GIFF instead. It's something to do with the alpha channel in your PNG - have you tried updating chrome?

Answer 3

when saving use "save for web and devices..." switch to the 2-up view and compare what's happening. You can't really see the preview of how it's going to be saved when using "save as", or compare it to the original psd version. It could be a simple setting like checking or unchecking sRGB, but at least with save for web dialog box you can see what's going to happen to your image when you click save.

Answer 4

Different browser's are going to have different way's of viewing web pages, including images.



Listen to Pedo, try a different image format. Perhaps GIF.