It seems the letter U is not the only thing that gets lost in translation. I’ve discovered a really strange phenomenon between Windows and OS X.

For some reason, browsers on OS X display colours slightly differently to colours in Windows. What the hell is this all about? I’ve only seen this problem on one website, or at least I’ve only noticed it once. This only affects images, and not colours in general. I only noticed this when an image didn’t blend in with the background on a site I was working on. The background was coded in CSS to be #231F20, and the image was displaying #231F20 in Photoshop’s colour picker, but apple’s color pick shows the colour as #191618. Now once viewed in a browser the image was displaying #1A1718 with browser colour pick plugin, but still #191618 with Apple Color Pick. But the weirdest thing is, I can see the difference with my bare eyes.

Picture one displays what I was seeing on my Mac. Please note at this point, PC users were seeing the site correctly (side panels blending into the background).

So I changed the colour of the side panels to match accordingly. It seemed to work, I could see the site all as one. But then PC users sent me the following screenshot:

Basically they saw the invert to what I originally saw. Messed up.

Why is the background showing a true #231F20 fill, but the image is being displayed as #191618. It’s almost as if Photoshop knows the image should be #231F20, but either the Operating System, or the Browsers (any) are displaying images incorrectly. But if the system can clearly understand the hex code in the CSS, why can the system not interoperate the correct colours from image files?

Any people say Macs are good for design…

No doubt you’re confused reading this post, because I’m very confused writing it! I thought we were well over the days of ‘web-safe’ colours.

The work-around to this problem was to use conditional PHP/CSS, to change the background colour to match the side panels. So if a user is on Windows, the background colour is #231F20, but if the user is on OS X they see a background of #1A1718. Perfect. I now see the site the way it’s meant to be. But I’m still left none-the-wiser as to why my Mac can’t show me the proper colours.