See the 3 screenshots below. There are several different green hex values amongst them however the CSS is declaring the correct hex (#A0CB3C), and the image has no colour profile data attached (saved for web from Sketch3).

enter image description here enter image description here enter image description here Chrome                                     Firefox                                     Safari

My iMac has no special colour calibration for the display, and no special colour settings set that I'm aware of.

The issue is persistent on all non-Apple browsers. i.e. the colours are consistent in Safari (although still incorrect, that's the last screenshot), in all other browsers the green used for CSS applied content is different to the green in images. The hex doesn't colour-pick correctly in any browser.

My colleague sat next to me with a near-identical setup does not have this issue. So it's clearly something specific to my machine.

Where do I start?

  • Which browsers are used to show pic 1 and 2? – klanomath Mar 24 '15 at 10:45
  • In Safari I see #AOCD2B for the first 2, #A1CB3E for 'safari'. In Chrome I see #ADCB2E for the first 2, #ADC93E for 'safari'. Calibrated monitor, sRGB weighting. 'Marketing has a pale square under it on all except 'safari' [it's still there according to the numbers, just not really visible] – Tetsujin Mar 24 '15 at 10:53
  • I just corrected the labelling, It was Chrome and Firefox. @Tetsujin - that's right, that's the problem, and the square is perfectly visible on an iMac display. – Nathan Hornby Mar 25 '15 at 11:57
  • Actually I think this might be down to some calibration. I switched off my own calibration yesterday, which didn't have any impact, however today after a restart that seems to have resolved it (restarting without turning off the calibration did nothing). I have a calibrated macbook here that doesn't have this issue though… so although related to calibration it seems there's more to it than that. – Nathan Hornby Mar 25 '15 at 11:59
  • Awful advice Kevin, but thanks anyway. 'From a developer perspective' if the image is sat on a plain colour then all you gain by using alpha is a larger filesize. The issue above shouldn't be happening, so although alpha would fix it, it's an inefficient workaround. A better suggestion in this case, from a developer perspective, would be to use an SVG; but that's still a workaround. – Nathan Hornby Apr 1 '15 at 10:23

You must log in to answer this question.

Browse other questions tagged .