iPhone4 and Colour Management

How does the iPhone4 handle colour management? After a lot of speculation on the iPhone4 OS handling ICC profiles, Correct Color's Mike Adams gets down and dirty with the latest Mac "must have" to see how it handles displaying colour.

He assesses the main browsers CM credentials. Having the ability to offer up accurately managed colour on a website might not matter to most. But if you're in the business of buying or selling something where colour is important - paint/textiles/clothes/tiles/carpets etc - then these things matter. With an increasing amount of web viewing being done on handsets, colour management on portable devices has never been so important. Has anyone got it nailed down yet?

This is an article by our friend and colour guru Mike Adams, self confessed lifelong Mac fan. The original article can be read on Correct Color's website. Our resident Colour "Master" Craig Hudson (who doesn't have an iPhone!) has added some explanatory comments for those not fully grounded in colour management. By definition this article is about how browsers recognise and apply colour profiles to images, and as such some understanding of colour management will be needed to understand Mike's results.


I got my new iPhone 4 last week, and since there was a bunch of speculation about the iPhone 4 operating system supporting ICC profiles, I decided I’d check it out. And in the checking, I found out a few things I’d never realized before. So if you’re all geeky about color management and displays and browsers, follow along. It’s kind of interesting.

First off, here’s the link to the test:


What you get when you get there is four versions of the same image: One in tagged ProPhoto, and one untagged; and one in tagged sRGB and one untagged. The background is grey #767676, which is what the grey border on the image measures out to in sRGB.

(And yes, I know no one ever sends ProPhoto to the web; I just wanted to get an obviously visible shift on all screens in what I was using as a larger gamut, so even though I usually use this image in Adobe 1998, I converted it to ProPhoto for this test.)

(CH NOTE: The sRGB colour space was designed to represent the gamut of the "average monitor". It is accepted wisdom that images used on the web are converted to sRGB before using. This gives a satisfactory result, as non colour managed systems are presumably viewing on an "average monitor". Colours aren't accurate, but they're not offensive. ProPhoto is a very large colour space, much larger than the average monitor. Correct colour management of the ProPhoto version of the image should still render it accurately, as the device will still understand what colours are being asked for, and will render the image as best it can, according to the specified intent. However, if the device ignores the ProPhoto profile, or applies the wrong profile, this image will to shift a great deal.) 

Now, conventional wisdom has it that Safari is color managed, and so is Firefox, while Internet Explorer is not. Well, turns out that’s not entirely true.Or it is, but that’s not the whole story.

If you open this file in Safari on a Mac, this is what you’ll get:

Trust me on this: The two on the left appear here exactly as they do in Photoshop when converted to each of these profiles. In other words, they’re absolutely correctly color managed. Meaning that the application–in this case Safari–has recognized the embedded profiles and then converted the images to the monitor profile for display.

The ones on the right were created in the exact same color spaces as the ones beside them on the left. The difference of course is that the ones on the right don’t have anything embedded in them that tells any application that is looking what those color spaces might be. So in the case of both of these, Safari is simply assuming they were created using the monitor profile, and in so doing, assigns it to them. Not likely, but that’s what it does.

Note that in this one on the lower right the background does blend seamlessly, because #767676 is rendered in both cases directly to the monitor profile.

Okay, what happens in Firefox? Well, in Firefox, you get this:

At first glance, you might think this is pretty good. You’ve got three images that match, and all of the three even get a seamless border. So how’d they do that?

Well, if you’ll look closely at the three that match, not only do they match each other, but they also match the untagged sRGB image in Safari. So what Firefox is doing is recognizing the profiles in tagged images, applying it, then converting the images to sRGB, and then assigning the monitor profile to everything.

So, none of these images appear in Firefox as they appear in Photoshop. What that means is that depending on how different the viewing monitor profile is from the monitor images were viewed on when they were created, and from sRGB, those images are going to display correspondingly poorly, or incorrectly in “color managed” Firefox.

And while that’s managing color–in a sense–it is not proper color management. (Any time you assign a color space to an image other than the color space the image is currently in, you’ve defeated the purpose of color management.)

Note that in both cases here, Safari and Firefox, the untagged ProPhoto image has just been assigned the monitor profile.


(CH NOTE: When you CONVERT an image from one colour space to another, you keep the same colour, but the numbers representing that colour change. When you ASSIGN an image another colour space, you keep the same numbers, and the colour changes to whatever colour those colours represent in that colour space. If this concept troubles you, consider the same concept with a simple two dimensional illustration.

You have an unmarked ruler in each hand. one is longer than the other. You have a line drawn on the desk in front of you, it's shorter than both rulers. I can't see the line, but I have the same two unmarked rulers as you. You need to tell me how long the line is, but you can only tell me that as a percentage of a ruler. So you lay the shorter of your rulers next to it, and the line is 90% of the length of that ruler. You lay the longer ruler next to the line and the line is 60% of the length of that ruler. Now, when you tell me the line is 90%, if I don't know which ruler you're using, I might use the wrong one. You can CONVERT the information between rulers - 60% of the longer one, is identical to 90% of the shorter one. SO - Provided I know which ruler you're referring to, the different percentages represent exactly the same line length. (just as different percentages represent the SAME colour in different colour spaces) However, if you ASSIGN a different ruler, keeping the percentage the same, the line you've described to me is a completely different length, even though the percentage was the same. (just as identical percentages represent different colours in different colour spaces.) 


So now IE:

Now I’ve followed some links lately that allowed as how Microsoft has it all over Mac in how it handles browser color in that IE just assumes everything is sRGB. And for all I know that may even be true. But if it does, it then goes ahead and assigns the monitor profile to everything before it displays it, making the whole exercise moot if it happens.

What you’ve got here is all the elements in this image having the monitor profile assigned to them with no regard to their original color space and no color management used at all.

Note that the two on the bottom now both match the one on the bottom right in Safari, as well as the three that match each other in Firefox. And now both of the ones on top are unmanaged, equally awful, and match precisely the unmanaged ones on the top in Safari and Firefox.

So the bottom line on all these browsers is this: Somehow or another eventually you have to get an image to the monitor color space if you want it to display. Except for Safari on a Mac with an image with an embedded profile, all browsers get there by assigning the monitor profile to your images; Firefox after recognizing embedded profiles, IE before.

So what about the iPhone 4?

Well, rather than try and get a screen capture posted I’ll just say it displays identically to IE. Try it for yourself. In other words, no color management at all. Maybe someday, but not for now. I’m not sure how or where this phone supports ICC profiles, but in its version of Safari it’s acting exactly as IE does on a Windows computer, and it’s not using any profiles embedded in online images in any way.


Mike Adams owns and runs Correct Color and has extensive experience in colour management as it pertains to print and just about any other media too. His writings are included in our Knowledge Base with his direct permission for which we are very grateful. All rights in his work remain entirely his.