weird color problem in Safari

[bitt3n]

This page displays fine in FF/Chrome, but in Safari the colors of the background and png files are darker than they are in FF/Chrome, and don't match the page. Is there some way to correct this so they display properly in Safari?

Any advice on how I can fix this would be greatly appreciated.

(The colors display fine in IE7 also, although there's a problem with the CSS that I asked about elsewhere [webmasterworld.com].)

[edited by: incrediBILL at 1:38 am (utc) on June 12, 2009]
[edit reason] removed personal URLs, see TOS #13 [/edit]

[lavazza]

As a test, try using web-safe colours [en.wikipedia.org] in your CSS

If the problem persists, it might be your hardware and/or your version of Safari and/or something else entirely

[rocknbil]

the colors of the background and png files are darker than they are in FF/Chrome

If lavazza's suggestion gives you no relief, make the areas of the image that are supposed to match the page colors transparent.

[bitt3n]

thanks, found solution

[edited by: incrediBILL at 11:07 am (utc) on June 13, 2009]
[edit reason] Removed URLs as per TOS #13 [/edit]

[incrediBILL]

The solution in PhotoShop is to set "Don't color manage this document." and then to save a GIF image (or JPG?) without the color profile.

This doesn't appear to work with PNG files as they appear to contain a color map.

[bitt3n]

actually I found it does work with PNG files

[tedster]

If all you are concerned with is matching an image color to a background color, then turning off color management can be an answer for that - but in reality it's a bit of a kludge. If you are also concerned with accurate and vivid web rendering of a photo it may not be the best way to go. The current best practice is to use the sRGB IEC61966-2.1 color profile.

In our graphics forum we had some discussion about this over the years (example [webmasterworld.com]), and this issue of how various browers handle color profiles is still a bit of a minefield.

ICC TEST PAGE
The ICC has a test page [color.org] for seeing how your browser handles the four main color profiles - it was an eye opener for me. One interesting note is that Safari handles the profile correctly -- so rather than creating a problem, Safari actually gets it right if you intentionally embed a color profile. I've read that Firefox 3 now also handles color profiles, but on my equipment it still fails the ICC test page I linked to above.

PHOTOSHOP and IMAGEREADY ISSUES
Be aware that various versions of Photoshop's 'Save for the web' option (ImageReady) are different, but all of them may by default embed a color profile -- even if you set Color Management off in the main Photoshoop workspace by using "Edit > Color Settings".

So poke around in your version of ImageReady to be sure that color profiles are being handled in the way you intend, or else unwanted color shifts can still appear in the output image.

THE MONITOR'S COLOR DEPTH
An added color mismatch confusion may come in if the computer monitor you are using is set to 16 bit color instead of 24-bit or 32-bit. This can create a gif (or hex color) to jpg visual mismatch that goes away at a higher setting.