Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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: Correct

Mac that doesn't: Wrong

What do I change to make this work?

share|improve this question
color calibration? – Alex Aug 25 '10 at 9:33
Yeah, I'd assumed that would be the issue - both have calibrated screens (via System Prefs/Displays/Color) but I don't see how that changes the image when screenshotted, rather than just outputted. Also, my screen looks awful even when calibrated... – Rich Bradshaw Aug 25 '10 at 9:41
The colors look different visually as well when screens are next to each other. – Rich Bradshaw Sep 9 '10 at 6:15
Did you do "Expert mode" calibration on both, or just the fast calibration? Did you specify the same non-native gamma and white point on both? (Using the "diplay native" settings can vary from display to display.) – Spiff Sep 15 '10 at 4:52
Yeah, both were calibrated in the same way. I even bought a ColorMunki and calibrated them using that. The images above are after doing that. – Rich Bradshaw Sep 15 '10 at 13:23
up vote 5 down vote accepted

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.

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.

share|improve this answer
They both have different profiles, but even when removed they both look different. – Rich Bradshaw Sep 9 '10 at 6:14
The idea is not to remove the color profile, but to ensure that it's there and in a universally accepted format. Without this profile, you are exposed to small local differences in color calibration. – harrymc Sep 9 '10 at 7:29
The background colour in the webpage is specified using #BDD041, it's not an image. The colours look different when you put both screens next to each other, and the screenshots are both taken in the same way. Is this still the right thing to look at? I guess I'm asking how to make sure that when the person using the top Mac sends me an image to build, I'm seeing it in the same way. – Rich Bradshaw Sep 12 '10 at 8:53
The images look the same on both computers, maybe because they have color profile. An image is almost guaranteed to look the same if it contains a color profile. #BDD041 is not an internet-safe color (see It might be safest to use as background an image with color profile, or secondly stick to safe colors. – harrymc Sep 12 '10 at 9:10
So you are saying that same hex on same browser on same OS might render differently? I'm 100% sure this is a calibration issue. – Rich Bradshaw Sep 13 '10 at 6:33

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:

share|improve this answer
I had already attempted that on each image, but no dice. – Rich Bradshaw Sep 8 '10 at 21:09

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).

share|improve this answer

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:

share|improve this answer
-1 OS X doesn't embed Gamma in images, this is incorrect and provided link makes no mention of such behaviour. Gamma is a function of the monitor calibration. The link does say that the gamma will be incorrect for OS X before 10.6 for untagged images, but this coincides with my explanation of the issue. – imoatama Sep 15 '10 at 15:46
It embeds the monitor profile, which contains the gamma. All PNGs contain gamma information unless you strip it when saving. – jsejcksn Sep 15 '10 at 19:46

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .