CSS colors on OS X displaying incorrectly in Safar

2019-07-24 08:25发布

问题:

If you look at this page: https://www.color-hex.com/color/ff00ff and scroll down you see "Monochromatic Colors of #ff00ff".

The last four colours there are #ff00ff, #ff1aff, #ff33ff and #ff4dff. (The HSB values are hsb(300, 100, 100), hsb(300, 90, 100), hsb(300, 80, 100), hsb(300, 70, 100). The HSL values are hsl(300, 100, 50), hsl(300, 100, 55), hsl(300, 100, 60), hsl(300, 100, 65))

In Firefox it looks like this:

In Chrome it looks like this:

In Safari it looks like this:

In Chrome and Safari #ff00ff, #ff1aff, #ff33ff and #ff4dff all look like the same colour.

Using the colour picker in Preview to click on the #ff1aff colour block, I see that in Chrome and Safari #ff1affis actually #ff00ff. The same with all the other colour blocks too.

In Chrome:

In Safari:

Only in Firefox is the #ff1aff actually #ff1aff:

Why does only Firefox properly differentiate between these colours? And why does Safari and Chrome not?

My web browser versions:

  • Firefox: 66.0.2 (2019-03-17)
  • Chrome: 73.0.3683.86
  • Safari: 12.1 - 13607.1.40.1.5

Strangely, I cannot get Gimp to differentiate between ff00ff and ff33ff. Nor can I get LibreOffice writer to differentiate. But I can get Inkscape to do so. Inkscape is an X11 app. Neither Gimp or Inkscape are X11 apps.

My OS:

  • OS X 10.13.6

This seems to be a OS X issue because on my Ubuntu machine things are fine in both Chromium 70 and Firefox 65.


Edit: Potentially 'solved'

I opened up the Color section in Settings. My display profile is Color LCD. This profile was created by Apple. I have not modified it. I'll include a screenshot with the colours blocks above it:

(Note, the calibrated version also doesn't show the colour differentiation)

But if I change to another profile I see the colour differentiation. If I choose sRGB ICE61966-2.1, a profile created by HP apparently, my colours appear like they do in Firefox:

So why does my Macbook come with a default colour profile that doesn't differentiate between #ff00ff, #ff1aff, #ff33ff and #ff4dff amongst other colours?