Color shift (color management) issues in Mavericks

I can't believe there is not a ton of info out there on this issue! I am having the same problem. I just upgraded to Mavericks and suddenly everything on Safari looks drab. I sell my artwork and photography, and viewing my online shops with Safari gives me the same reaction I'd have if someone snuck up and blew a trumpet in my ear. It's bad. Here is a screenshot comparison; Safari vs Firefox. You can see how much duller the Safari is (which is actually closer to reality in some of my drab prints) in contrast to Firefox.

I know that sellers of art/prints online need to make buyers aware of variations of color due to differences in displays, etc. And I also know that Apple doesn't always play nice with certain companies, but Safari is yours, Apple, and as a company known to cater to the creative individual, I've never had so many issues as I've had with your products when it comes to getting my colors to be seen correctly. This is the latest frustration.

Hoping someone can please come in with answers so I don't have to tell customers not to view my online sites and shops on Safari.

Checking to see if anyone has helped. How is this not an issue for others?

Just bought my MacBook Pro 15.4 Retina and notice this. I'm really dissapointed , for paying so much money for it I would think the color will be perfect. The is my first Mac and it's not looking good. My photographs look really bad in Safari. I almost wanted to go get my money back.

Same problem here. Everything was fine with 10.8, but "Apple" applications don't show colors accuratly with 10.9. It is useless to calibrate your display as the software calibration is not from Apple.

Here is an example, first from 10.8, then from 10.9. As you can see, the colors are different in Safari and in Chrome with Mavericks.

In 10.8 :

In 10.9 :

Has any fix/resolution been found for this? I have a

Problem in that I have 2 mac pros one with 10.7.5 one with 10.9. The 10.7.5 version has perfect colour and is calibrated perfectly. Since I upgraded done of machines to 10.9 I cannot get the color on the 10.9 machine to look right!

It's messed up mainly in the blues and reds and not matter what I do (I have 2 calibrators) I can't get them to look the same. I've tried calibrating both with the same pro ione display tool and still no luck. Both machines have the same eizo monitor so they really should look the same?

Has anyone got a suggestion..? Has the marketing department got hold of the saturation controls or something??? This is a big issue for pro photographers and seems it's gaining momentum...

Same problem for me, too! Weird.

And css gradients look bad, too. :-((((

Big problem here, too.

Safari's colors actually look normal to me on my new Mac Pro, while Firefox's look super-saturated. But screenshots from Safari show a massive color shift when I measure the RGB values (when color management is entirely off!). So I assume that my whole color calibration is way off, but regardless, Safari and Firefox looking different helps nobody!

I'm not seeing this on my mac

The colorspace that you work in, and the profile that you tag to your web-viewed images, may play into available browser color management handling — or not. See this article, Web browser color management guide.

Another post where the technique of saving .vs. exporting images from Photoshop can alter the color profile assigned to an image, and inherently, how this effects viewed browser content.

Color Rendering Difference: Firefox .vs. Safari

Issues here too: 2013 Mac Pro, latest Mavericks/browser versions (OS X 10.9.4), and Dell UP2414Q display (known for good color—not to mention the only retina display money can buy).

Safari seems fine: web sites with no color profiles in the images look very much as I am used to from OS X Lion and Windows on other machines (some variation from screen to screen is just life). CSS colors match image colors when they should.

Firefox is ultra-saturated: web sites the look fine in Firefox--and identical to Safari--under OS X Lion (on a different Mac/display anyway) but on the new Mavericks system, colors are eye-burningly saturated! That's CSS and images alike (without color profiles). CSS and image colors still match—but both are WAY oversaturated.

Note: images dragged from Safari and Firefox to my desktop both look fine when opened in Quick Look or Preview. Both (again, images without profiles) look super-saturated like Firefox when opened in Photoshop CC—despite Photoshop having the same settings I'm used to using (color management Off for RGB, working space set to Monitor) on my old Mac with PS CS6 under Lion. Yet the color values in PS CC do register as correct despite looking so bad (same goes when opening my own RGB source PSDs that generated the web sites to begin with).

Shouldn't Safari and Firefox out of the box look alike, since they do in earlier OS versions? (Even if some workaround is found, "out of the box" a new Mac with default Firefox installation now looks terrible.)

Separate but complicating issues, in case it helps to diagnose this:

a) The Dell display's default calibration looks quite good to me; but if I run Apple's visual calibration steps which I would normally do on a new Mac, everything gets very dark. (So I went back to the default calibration, which is supplied by Apple and called "Dell UP2414Q"; Apple clearly supports this display specifically, since I never installed any Dell software.)

b) When I take an OS X screenshot of Safari, despite it looking "right" everywhere (Preview and Photoshop CC alike), values are way off. (Regardless of whether I strip the color profile or not when importing the screenshot into Photoshop CC.) When I take a screenshot off Firefox, the screenshot looks "right" (no longer oversaturated!) in Preview and Quicklook. When imported into Photoshop CC, Firefox screenshots behave just like drag-saved images from Firefox: they appear super-saturated just like in the browser, BUT the color values at least register correctly.

c) No setting I can find for Photoshop CC will make exported images look right (and match CSS colors) in ANY browser unless I accept them being super-saturated while I work on them (which of course is untenable). I'll deal with that separately: I've abandoned the new Mac Pro for Photoshop work and gone back to my old Mac (and PS CS6)--but this I assume to be Adobe's fault. I mention it only in case it's some kind of clue.

For what it's worth, here's my interpretation: Firefox and Photoshop are using the full gamut of the display, while Safari is not—and Safari looks GOOD not using the full gamut. (And at least with this Dell display, it looks "correct" that way.) Pure primary red #FF0000 (images and CSS alike) which appears normal to me in Safari and Preview and Quicklook turns to eye-burning neon red in Firefox and Photoshop (with management Off and working space set to Monitor). It's kind of amazing that the display can show a red even more brilliant than I have ever seen on a computer before, BUT it doesn't help me design web sites for the rest of the world who has a more ordinary gamut.

Maybe this is just a long-standing Firefox bug, revealed to me now that I have a large-gamut display? (But that wouldn't explain why other people have seen colors MORE saturated in Safari then Firefox.)

Very good thinking, but I also think this is the main point:

For what it's worth, here's my interpretation: Firefox and Photoshop are using the full gamut of the display, while Safari is not—and Safari looks GOOD not using the full gamut.

What's probably happening is how Safari, Firefox and Chrome are handling untagged images. I took one of Susan's images and dropped it into Firefox. As everyone has stated, the colors are far more saturated. As is Chrome.

As an example, when you save images out of Photoshop using "Save for Web", you can tell it what color space to fit the image color to (sRGB being the default), but it saves the resulting .jpg or .png file without an embedded profile. Opening Susan's image in PS, it indeed has no profile. If I tell Photoshop to assign sRGB to the image, then it matches Safari's display. If I tell it to display as is, it matches the more saturated display of Firefox or Chrome. Meaning, the color is simply being displayed all the way out to your monitor's gamut instead of being confined to the much smaller sRGB space, even though that may have been the color space is was created in.

So basically, Safari is automatically assuming sRGB for untagged images and displaying them that way. Firefox and Chrome are simply letting the color display out to your monitor's limits.

They must also both be treating CSS colors themselves as non-profiled/untagged.

If, for instance, I were to export images from PS as sRGB, giving Safari (maybe?) what it expects/defaults to, that might also make the images look good in Firefox. But the images would no longer match the CSS colors, which would often make UIs/menus look terrible.

(And I've long seen people recommend that web images always be export as sRGB... but that has never worked for me to make colors match CSS across different platforms. So I remain "untagged" for web work.)

I would say (looking on this Dell screen anyway) that Safari's way is better; but I wonder: what would this same large-gamit Dell screen show if I had OS X Lion (or Mountain Lion)? I can't test that since my Lion MacBook Air kernel panics when I connect the 4k display. (Too old to handle that big an output I suppose.)

Further complication: a screenshot from Safari LOOKS the same in Preview, but then I measured the color values... very close but not quite! Weird.

Also, I really wish I could take a Safari screenshot and measure accurate RGB values from the images and CSS. I guess that ability is a think of the past? (Safari's Inspector helps... some. And I guess I can take screenshots of Firefox! A silver lining to the issue?)

I do find that Photoshop behaves a little more sanely when its display profile is set to sRGB instead of the old standby of "Monitor." I'm not sure it's quite right, but it's closer... but that's a separate topic.