Colour Inconsistancies in OS X

Get Started
1

I’ve had my new Macbook Pro for only a few weeks now, so I’m still getting use to OS X and discovering it’s strengths and weaknesses over Windows. One difference which has only just caught me out, is colour profiles. I’m using an app called Coda to knock up my first OS X -based web project. Assigning a few colours to my style sheet is one of the first things I’ve found myself doing on this project, and as a result, have discovered colour inconsistencies between Apple’s colour picker, Coda and Firefox. Each app renders colours differently; I can only assume each is using/respecting their own colour profiles and rules. As a result, I’m unable to trust my colours. I’ve found by VNC’ing my Mac from my Windows machine, that Coda is the only application displaying the correct hexadecimal colour value. Firefox and Apple’s colour picker render their colours differently than both Coda, and each other. I can only assume that what I’m experiencing is colour profile hell!

Here’s a screenshot demonstrating the problem: http://i38.tinypic.com/29ffgv6.png. If you open the image with your favourite colour sampler, you’ll see that each rendering of the light brown colour is different. #F0D0AD is the correct hexadecimal value, but you’ll notice that even Apple’s colour picker is rendering the colour wrong.

I’ve never really understood colour profiles, but they’ve only ever caused me headaches as a web developer. I’m hoping some of you Mac-using designers can enlighten me on this topic, and hopefully tell me how to remedy my colour discrepancies; if I can’t even trust Apple’s own colour picker, then I’ll simply have to go back to Windows where colours are at least consistent between applications on the same computer, which would be a real shame because I’ve bought this make almost solely for web development.

Any help is greatly appreciated!

2

I just tried to replicate this using your color, and get consistent results in Coda, Firefox and the Digital Color Meter. I get F0D0AD in all three.

3

Thanks for that.

Don’t know if I’ve got any tips, but did you see this list of 70 Spectacular HTML5 Websites? The article came out on July 28.

Anyway, at number 16 in that list is a site I made called Ancient Beadart. I guess it could be described as artsy, but more importantly it has received a lot of positive feedback for its use of photography.

Actually, I remember you said a while back that you’re one of these Sitepoint weirdos who switch off Javascript. The site will work without scripting (well, just about), but to appreciate the home page slideshow and other photographic effects you will need to turn on JS.

I don’t know if this is the kind of help you’re looking for or not, but I’m afraid it’s the best I can offer.

Oh – and the site also features translucent dropdowns (the one at far left is quite effective). I guess you could also describe them as semi-transparent, but please don’t use that forbidden term I mentioned last time.

4

Yep, I slipped up there. GIFs are transparent only.

Another term you could use is “see through”. Problem is, every time I hear that phrase I am reminded of all the perverted old men here in Bangkok who buy cheap lingerie for their 19 year-old girlfriends.

Maybe it’s best to stick with alpha layers and 24 bit or 32 bit.

5

Color LCD

6

Hi there

At the bottom of the page you have an image of a cat trying to eat a cheeseburger (ffcheezburger.png). The background colour is D7C35B.

The page itself uses a background image (furnmainbg.png) that has the colour DAC34B. Check it yourself. You have a mis-match.

Is that what you meant?

In one of your earlier posts you talk about “semi-transparent 8-bit PNGs”. I understand that English is not your first language, but have you heard of the word “translucent”?

There is a big difference between a transparent GIF/PNG and a translucent GIF/PNG. I guess you know what I mean, but I’m sure that many others don’t.

Maybe you could start a new thread and explain it.

7

Andrew:
I have a page of my own (the screenshots were linked above) which shows different colours of the png’s involved, in (a) Firefox.

What do you get if you measure the images on this page? I don’t mean the screenshots (those are for anyone either not using Firefox or Safari, OR have the OS/monitor calibration those browsers are expecting), but the other images (background images). Are they different for you or the same?

Also, I can’t find that image anywhere on his site, only senior photos, so I can’t check the HTML. He wrote his page in f#%$^&% frames. Why photographers shouldn’t be writing web pages.

Copying the url you gave for the image, I do get approximately the colour you list.

Please understand that I’m not being rude or negative; I’m just curious as to what you think the issue here really is.

No, it’s cool. You’re not being rude at all.

8

Greetings funky Dutch woman

How do you explain this: open this photo of his in Photoshop. Notice that the border colour (for the most part) is 332C2B. Next, look at the guy’s HTML and notice how he’s using inline CSS to create a background colour of 454140.

So, does the problem here really have anything to do with colour profiles and Firefox’s supposed inability to render colours correctly.

Please understand that I’m not being rude or negative; I’m just curious as to what you think the issue here really is.

Anyway, have a nice day in the glorious Netherlands.

9

Do you remember me saying that Fireworks will also do this?

If it’s a free program and runs on Linux, I’ll consider it. Oh wait, bummer…
seriously a bummer though, because Fireworks I believe is the one who lets you do that trick with semi-transparent 8-bit PNGs, which is just awesome. Folks have been asking for that in the Gimp community ever since that SitePoint article came out : ) Anyway, I don’t use Photoshop because I’m not gonna go buy a 300 euro Operating System just to run it. Same with Flash.

Gimp can strip sRGB chunks but only after downloading a plugin… I keep forgetting what it was called, separate+?, but I didn’t want to mess with my Gimp… and pngcrush is command-line and just works : ) Still, if the stripping and compressing were built-in with Gimp, yeah, I’d be using that.

And that guy’s website with the disclaimer at the bottom is just, well…

He’s spreading the word… let the users know how Mozilla’s jerking them around. That colour profile stuff should be opt-in, not opt-out. People should have to turn it on, because then they already know the dangers of colour mismatch on regular web sites when they do it. Instead, we have Joe Users who just don’t know why this “professional” photographer has all these mis-matched colours in their browsers. And no, someone with thousands of photographs shouldn’t have to learn to write a little batch script to run every image and resave… esp if you DID spend the time getting your colour profile correct for images you want to do other things with… the browsers shouldn’t be trying to deal with that, if they do it so badly.

10

Do you remember me saying that Fireworks will also do this? Then again, not everyone has both Photoshop and Fireworks so I guess your solution is more practical than mine.

I’m amazed though at how often this colour profile issue crops up. It’s a real bummer when you don’t know how to deal with it.

And that guy’s website with the disclaimer at the bottom is just, well…

11

Can I ask out of curiosity, what your system colour profile is set to? (under “System Preferences” -> “Displays”).

12

[ot]Hey Andrew, since I can’t contact you:
if you have any tips for this guy, could you contact him? He wanted to make an artsy photography site in HTML5.[/ot]

13

Both Safari and Firefox will try to use your colour profiles, and unless everything is absolutely what those programs expect, everything will be pants.

Don’t use colour profiles. Safari might get them right, IF the monitor you’re viewing Safari on is an Apple monitor. Hook up some OTHER brand monitor, which may have other settings or defaults, and you can kiss your matching colours goodbye. At least, this has been my experience… checked my site out (pre-header-chunk-stripping) at a Mac shop, where things looked ok, and then at a friends’, where he had some bazillion-px-wide screen he wanted to use with his Mini… non-Apple.

http://stommepoes.nl/firefoximg/ScreenshotStommePoes1.png
clapping for Mozilla
http://stommepoes.nl/firefoximg/ScreenshotStommePoes2.png
more golf claps

The GIMP adds in an empty sRGB header chunk by default, which for GIMP means, “no colour profile”. This here caused both Safari-for-Windows and Firefox (but in my case, only Firefox not on my Windows machine, but on almost any flavour of Linux… see OS colour profile settings, since in my case both OSes were using the same monitor) to garble CSS colours versus PNG colours, no matter that they were the same hex number.

I have to pump every PNG I create through pngCRUSH to remove the empty sRGB chunk, causing Firefox and Safari to (finally) believe there is NO colour profile, before colours would match.

So far as I can tell, the browsers are too stupid to get the profiles right, or they can’t check correctly the settings on the OS, or they get the monitor settings wrong, or something. I’m not sure which… all I know is, there is a group of web developers who are just leaving little notes on the bottoms of their web sites warning Firefox users that colours will look terrible on their websites due to this !awesome colour “fixing”.

http://www.hildebrandstudio.com/ see his disclaimer at the bottom… this was just easier for him than running ALL his images through some profile stripper… of course, users can turn this “feature” off, but who wants to tell all your clients to crawl through about.config to turn stuff off you’ve never heard of?

Don’t use colour profiles on the web.

Don’t use colour profiles on the web.

Don’t use colour profiles on the web.

Don’t use colour profiles on the web.

That ought to fix everything. It’ll even make you a sammich. Now you can enjoy your Mac.

14

Actually, I remember you said a while back that you’re one of these Sitepoint weirdos who switch off Javascript. The site will work without scripting (well, just about), but to appreciate the home page slideshow and other photographic effects you will need to turn on JS.

I keep it off for a reason. If I want slideshows and fancy stuff, I just use one of my other browsers.

I don’t know if this is the kind of help you’re looking for or not, but I’m afraid it’s the best I can offer.

I just figured you could contact that guy and give him some tips. I’m not using HTML5 for anything.

15

Another term you could use is “see through”. Problem is, every time I hear that phrase I am reminded of all the perverted old men here in Bangkok who buy cheap lingerie for their 19 year-old girlfriends.

Arg, you’re way too good at painting mental imagery! Stop!

: )

16

Hmm, yeah ‘translucent’ is an old word similar to semi-transparent but with translucence you cannot see the detail of a background shape (i.e. diffusely) and GIF is not ‘translucent’ it is ‘transparent’ where you can clearly see the ‘background’ - assuming you set “transparency”.

17

At the bottom of the page you have an image of a cat trying to eat a cheeseburger (ffcheezburger.png). The background colour is D7C35B.

The page itself uses a background image (furnmainbg.png) that has the colour DAC34B. Check it yourself. You have a mis-match.

Is that what you meant?

This is what I wanted to know, thanks; however I actually don’t have a colour mismatch. Though, I already need to update that page: in making an alternative stylesheet, the cheezburger cat needed to lose the bg colour (which I had put in there for smoothness) so now it’s a (wholly) transparent gif with the png as the background (I can set gif for IE6 then). So here’s what I get when I copy the cheezburger cat and view in Gimp:

1154×536 76 KB

You see they look very different. I then went and resaved another copy just to be sure, and they still look like this.

As for measurements (of images who haven’t been changed between the example FF-sucks page and my main page):

The page itself uses a background image (furnmainbg.png) that has the colour DAC34B. Check it yourself. You have a mis-match.

Because it’s a gradient, I made sure to measure these both at their bottoms (where they are meant to match the CSS background colour of #dfc35e I have set). So measurements are at 219px down from top.

Yup, it’s certainly the same colour at the bottom.
Looking at the two images (I did View Image) on my main page (where the images have had their empty sRGB chunks removed) and on the FF page (where the empty sRGB chunk has not been removed… they are otherwise exactly the same image):

679×540 25.5 KB

This is colour correction at work. Same image. Here’s Opera for comparison. Firefox thinks one of them has a colour profile.
I downloaded both from FF and saved the “bad” one with “ff” at the end of the name, and compared colours. Because Gimp hides my mousetools when I take screenshots, I moved the colour picker window so you can see who I’m measuring. Also at 219px down:
951×683 87.2 KB

955×688 73.2 KB

This is what I’m talking about. I believe this is partially what Waldorp is seeing (I don’t know anything about Coda though).

In one of your earlier posts you talk about “semi-transparent 8-bit PNGs”. I understand that English is not your first language, but have you heard of the word “translucent”?

I know the term translucent, but I’ve never seen anyone use it to refer to alpha transparency or a pixel who seems half transparent/half coloured… I have seen “semi-transparency” though to mean “not flat yes-no gif-style transparency”. Because when you’re fading to transparent, you get semi-transparent-looking pixels. This article calls the lightbulb glow “translucent” once, but seems to call all instances of transparency as “semi-transparent”… so that must be where I get the phrase “semi-transparent PNG”.
Should I be saying “translucent PNGs”? You know more about graphics than I.

There is a big difference between a transparent GIF/PNG and a translucent GIF/PNG. I guess you know what I mean, but I’m sure that many others don’t.

I should probably just say, “PNGs using an alpha layer with transparency” to be clear to everyone.

Wait, translucent gif??