Thought Brewery

Colors showing up incorrectly in Safari

Posted September 19th, 2008 by Leeps

When designing a web page, it’s always a good idea to test it on as many different browsers and platforms as you can. Every browser displays things a little differently; you can’t always assume that your page is going to look right without checking.

The Problem

Safari seems to screw up colors between images and CSS. This happens most often when using images as part of a layout that blend into regions that are simply filled with a CSS background property. It also doesn’t seem to happen as often with GIFs as it does JPGs… no clue why.

Here’s a screen grab from a sample page I made to show you what I’m talking about:

The two outlined images are, according to Photoshop, the exact same color as the background: #48be30. The image on the left, however, is showing up noticeably darker than the background and image on the right. Why!?

The Cause

In short: color profiles.

Safari is one of the few (I use the term loosely, I’m not an expert on the topic) browsers that natively supports embedded color profiles in images. Safari does not, however, adjust CSS to match the image’s profile. It makes sense though - if a page has multiple images with multiple profiles, how could it tell which image’s profile to use?

Photoshop tends to embed a color profile in any image you create, so Safari will tend to “correct” any image you create in Photoshop. I can only guess that other image editing programs do the same thing, and the result will be the same: the images look wrong.

The Solution

Get rid of the color profiles in the offending images.

In the image above, the only difference between the two pictures is that the one on the right has had the color profile stripped from it. Since there is no color profile, Safari won’t try to correct the colors.

To do this in Photoshop, just open your picture and go to Edit > Assign Profile…

Once there, select the radio button for “Don’t color manage this document”.

Click “OK” and save your image.

The End

No really, we’re done.

At this point Safari won’t muck up your colors when going back and forth between images and CSS. If you use a different editor than Photoshop, I am not sure the steps you’ll need to take, but look for some way to strip off the color profiles and you will be headed the right direction.

Tags: background, bad, color profile, colors, incorrect, layout, safari, screwed up, wrong