colors don't match on FF on Mac

views:

answers:

+2 Q:

colors don't match on FF on Mac

On this page, the <body> element has a background color of #77BFBC. The image (rv-banner.jpg) set as the background of the <header> element also has a background color of #77BFBC.

On windows (either FF or IE), the two colors blend perfectly. However on FF on the Mac, there is a noticeable difference between the background color of the image and that of the <body> element. How can I fix this?

Thanks, Don

This isn't due to your code but color profiles, I don't know if you can change this.

MatTheCat 2010-10-22 09:04:17

+2 A:

When images are displayed, they are converted from their color space to the color space of the screen.

To make your JPEG images display with the same color conversion as the rest of the elements, you should convert the images to the sRGB color space before saving them.

Browsers that doesn't support color profile information in images always uses the sRGB color space, so if you use sRGB for the images the color profile gets correct even for those browsers.

If there is no color profile in an image file, the sRGB color space is assumed. This means that you can save your images without a color profile to minimise the file size.

Guffa 2010-10-22 09:08:58

Thanks, any idea how I can "convert the images to the sRGB color space"> Can it be done with Paint.NET?

Don 2010-10-22 09:27:32

But won't it also depend on the colour-profile of the viewing computer? To quote Mozilla: "What this means is that if you have a tagged image where a color is expected to match the CSS that’s right next to it, it won’t. Or at least it’s likely that it won’t on some output device – maybe not the one that you happen to be using for development. Remember that different output devices have different color profiles." http://hacks.mozilla.org/2009/06/color-correction/

flashparry 2010-10-22 10:41:50

@Don: No, Paint doesn't handle color profiles. A photo editing program like Photoshop or GIMP can do that, and also some of the simpler photo processing programs.

Guffa 2010-10-22 16:01:04

@flashparry: It's true that each display can have their own color profile, but both the image and the background specified in the HTML would be converted from sRGB to that color space, so the colors would still end up matching.

Guffa 2010-10-22 16:24:32

Try to save image as png not jpg. And if you are using photoshop, then choose "save for web and devices" not "save as".

kasp3r 2010-10-22 09:09:46

Using the PNG format can actually make it worse, as it has a gamma correction value instead of a color profile, and that is treated differently in different browsers. The alpha channel of the PNG-24 format can however be used to make the background part of the image transparent, so that the color differences doesn't affect the background.

Guffa 2010-10-22 09:18:17

Save as PNG and then refer to http://hsivonen.iki.fi/png-gamma/ for a pngcrush command-line that will strip out the gamma nonsense. One way to get pngcrush is to install http://www.cygwin.com.

Daniel Earwicker 2010-10-22 10:36:38

+1 A:

With the release of Firefox 3.5, colour-correction was turned on by default, but its effect depends on your system profile:

http://hacks.mozilla.org/2009/06/color-correction/

In practice, this means images saved with colour profiles are corrected and could show up mismatched to CSS colours.

It's possible to turn off colour-correction in Firefox, which fixes the problem for you, but that still leaves all the other potential visitors out there. Seems like removing the colour profile from the image is the way to go. There is a GIMP plugin that does this, see here for a discussion.

flashparry 2010-10-22 10:25:40

The GIMP Plugin worked like a charm, thanks!

Don 2010-10-27 12:16:32

ansaurus

tags:

views:

answers:

colors don't match on FF on Mac

related questions