Color problems on Mac OS X

Question

I have two Macs and a couple of Windows boxes - If I take screenshots (also looking at the screens...) of anything on each of them the Windows machines and one Mac look the same, but my Mac looks different. Why? How do I fix that?

As an example, Mac that works:

Mac that doesn't:

What do I change to make this work?

Answer 1

I would guess that the background color is different because you have created it using an untagged image. The problem is because each application renders untagged image / color differently.

From Colour Inconsistancies in OS X:

In safari/ color picker, untagged image will render based on your monitor color-gamut.Iif you are using 2010 mbp 15, after proper calibration color-gamut should be close to srgb, but not exact match therefore the color variation.

You might want to read this website to better understand about untagged image in browsers. http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html

In short, if you wish an image to render the same on all browsers, you should incorporate the color profile. Some older browsers may not take notice of it, but most modern browsers do.

The problem is explained clearly in the above embeddedJPEGprofiles link, with demonstrations and with advice how to incorporate color profiles in images.

Answer 2

Do you just need a clean screenshot, and is it in PNG?

Try using pngcrush to delete the color profile from the file and see if it clears up:

http://www.kaktus.cc/weblog/png_and_color_profiles/

Answer 3

To fix this across most OS and browsers do the following:

• Create a tiny image (eg 1px) using the desired color
• Give it an sRGB ICC profile
• Use this as your background

Color consistency is a headache - it is almost certain that there is no way to get this to appear the same on all machines and all browsers (even assuming calibration!). But we can try our best.

Embedding ICC profiles, if they are honoured, gives you control over the color space used to display the image and can guarantee color consistency. Your problem is occurring because without a profile, Safari renders colour in monitor color-gamut rather than sRGB. The only reason it looks fine on the first Mac is bcause the monitor color-gamut just happens to match sRGB.

You're using CSS styles with RGB codes to set the background color. The CSS3 standard proposes a color-profile property that would let you include a color profile to control how this background colour is rendered, but unfortunately almost no browsers yet implement this.

Using a tagged image containing a color profile as your background (and eg tiling) instead of CSS would enable you to ensure consistency across all browsers that honour ICC profile tags in images. Unfortunately this is not all browsers (eg IE doesn't), hence my synopsis at the start that there's no guarantee you can ever get consistency everywhere.

I recommend that you create a tiny image using the desired color, tag it with an sRGB profile, and use this as your background. This should get you consistency almost everyhwhere (since IE/Windows assumes sRGB for everything anyway).

Answer 4

This is a gamma-related issue. In 10.6, the default gamma is now 2.2 (like PCs), where it was previously 1.8 on all Macs. 2.2 is "darker" to your eyes.

You were correct in thinking you can calibrate your monitor to fix this problem. When you take a screenshot in OS X it embeds the gamma value of your display into the resulting image. If you set both displays to a gamma of 2.2, then they should look much closer at the same brightness setting (or at least screenshots taken on different machines should display properly on a single machine).

Read more here: http://support.apple.com/kb/ht3712