User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15

Steps to reproduce:

Run Firefox on a Mac that has an HDR display.

Actual results:

Everything in Firefox is too bright and over-saturated. It's like being slapped in the face with a fluorescent fish while soaking your eyeballs in lemon juice :-)

Expected results:

Firefox should be rendering in a sensible colour space. It plainly isn't. Most other software on my Mac is using a sane colour space and doesn't do this. There are odd elements in some other programs' UI that are rendering using the wrong colour space and exhibit similar behaviour, but in Firefox, the entire program is doing this.

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Pretty sure this really is a defect, not an enhancement request. Yes, adding HDR support to Firefox would be an enhancement and would have the side effect of fixing this defect, but you only have to try running Firefox on an HDR enabled display on a Mac to see what I mean about it being a defect. Other non-HDR-supporting programs don't have this problem (or exhibit it in a handful of places).

I believe the problem is that color profiles are not working on OSX.

On the below site, I only see a red blob in Firefox, suggesting that it does not display the DCI P3 colour space correctly. In Safari I see a logo and brighter red color on the right side.
https://webkit.org/blog-files/color-gamut/comparison.html

I had the same problem on my Windows machine and fixed it by specifying the path to my ICC profile (thats another bug I guess):
gfx.color_management.display_profile = "C:\Windows\System32\spool\drivers\color\C27HG7xQQ.icm

I tried the same trick on OSX, but the settings have no effect:
gfx.color_management.mode = /Library/ColorSync/Profiles/Displays/Color LCD-37D8832A-2D66-02CA-B9F7-8F30A301B230.icc
gfx.color_management.enablev4 = true
gfx.color_management.mode = 1

Testing was done with Firefox 89.0.1

(In reply to esmorun from comment #3)

I believe the problem is that color profiles are not working on OSX.

On the below site, I only see a red blob in Firefox, suggesting that it does not display the DCI P3 colour space correctly. In Safari I see a logo and brighter red color on the right side.
https://webkit.org/blog-files/color-gamut/comparison.html

I had the same problem on my Windows machine and fixed it by specifying the path to my ICC profile (thats another bug I guess):
gfx.color_management.display_profile = "C:\Windows\System32\spool\drivers\color\C27HG7xQQ.icm

I tried the same trick on OSX, but the settings have no effect:
gfx.color_management.mode = /Library/ColorSync/Profiles/Displays/Color LCD-37D8832A-2D66-02CA-B9F7-8F30A301B230.icc
gfx.color_management.enablev4 = true
gfx.color_management.mode = 1

Testing was done with Firefox 89.0.1

Thanks @esmorun, this helped solved my issue (running Firefox 102.4.0esr on a Mid 2011 iMac, macOS 10.13.6).

Just like you I couldn't see the DCI P3 logo on Firefox, but could on Safari. The following settings tweaks in about:config on Firefox fixed it so that Firefox displays the P3 image correctly:

gfx.color_management.mode = /System/Library/ColorSync/Profiles/Display P3.icc
gfx.color_management.native_srgb = false

Note, the other gfx.color... settings didn't seem to make a difference, these are the important ones to adjust!

(In reply to dkeen01 from comment #4)

(In reply to esmorun from comment #3)

I believe the problem is that color profiles are not working on OSX.

On the below site, I only see a red blob in Firefox, suggesting that it does not display the DCI P3 colour space correctly. In Safari I see a logo and brighter red color on the right side.
https://webkit.org/blog-files/color-gamut/comparison.html

I had the same problem on my Windows machine and fixed it by specifying the path to my ICC profile (thats another bug I guess):
gfx.color_management.display_profile = "C:\Windows\System32\spool\drivers\color\C27HG7xQQ.icm

I tried the same trick on OSX, but the settings have no effect:
gfx.color_management.mode = /Library/ColorSync/Profiles/Displays/Color LCD-37D8832A-2D66-02CA-B9F7-8F30A301B230.icc
gfx.color_management.enablev4 = true
gfx.color_management.mode = 1

Testing was done with Firefox 89.0.1

Thanks @esmorun, this helped solved my issue (running Firefox 102.4.0esr on a Mid 2011 iMac, macOS 10.13.6).

Just like you I couldn't see the DCI P3 logo on Firefox, but could on Safari. The following settings tweaks in about:config on Firefox fixed it so that Firefox displays the P3 image correctly:

gfx.color_management.mode = /System/Library/ColorSync/Profiles/Display P3.icc
gfx.color_management.native_srgb = false

Note, the other gfx.color... settings didn't seem to make a difference, these are the important ones to adjust!

Thanks! gfx.color_management.native_srgb = false was the missing piece for me.

Also please note there's an error in my post, the ICC profile should be set in gfx.color_management.display_profile, not gfx.color_management.mode. The latter can have a value of 1 or 2. 1 means that srgb content will be oversaturated, and 2 means that srgb content will be less saturated but more correct.

(In reply to esmorun from comment #5)

(In reply to dkeen01 from comment #4)

(In reply to esmorun from comment #3)

I believe the problem is that color profiles are not working on OSX.

On the below site, I only see a red blob in Firefox, suggesting that it does not display the DCI P3 colour space correctly. In Safari I see a logo and brighter red color on the right side.
https://webkit.org/blog-files/color-gamut/comparison.html

I had the same problem on my Windows machine and fixed it by specifying the path to my ICC profile (thats another bug I guess):
gfx.color_management.display_profile = "C:\Windows\System32\spool\drivers\color\C27HG7xQQ.icm

I tried the same trick on OSX, but the settings have no effect:
gfx.color_management.mode = /Library/ColorSync/Profiles/Displays/Color LCD-37D8832A-2D66-02CA-B9F7-8F30A301B230.icc
gfx.color_management.enablev4 = true
gfx.color_management.mode = 1

Testing was done with Firefox 89.0.1

Thanks @esmorun, this helped solved my issue (running Firefox 102.4.0esr on a Mid 2011 iMac, macOS 10.13.6).

Just like you I couldn't see the DCI P3 logo on Firefox, but could on Safari. The following settings tweaks in about:config on Firefox fixed it so that Firefox displays the P3 image correctly:

gfx.color_management.mode = /System/Library/ColorSync/Profiles/Display P3.icc
gfx.color_management.native_srgb = false

Note, the other gfx.color... settings didn't seem to make a difference, these are the important ones to adjust!

Thanks! gfx.color_management.native_srgb = false was the missing piece for me.

Also please note there's an error in my post, the ICC profile should be set in gfx.color_management.display_profile, not gfx.color_management.mode. The latter can have a value of 1 or 2. 1 means that srgb content will be oversaturated, and 2 means that srgb content will be less saturated but more correct.

Whoops, yes, I also meant gfx.color_management.display_profile earlier for the ICC, not ...management.mode (which I have left on the default 2 setting).

Great to hear it's working for you too

Want to pipe in that I am also experiencing issues rendering HD colors on my Apple silicone Mac.

Setting gfx.color_management.native_srgb = false will at least get HD colors to render, but those colors appear to be inaccurate using the native display on my M1 Macbook Pro (which supports HD colors).

This is something I am experiencing both in mainline Firefox 115.0.2 (64-bit) and Firefox Developer Edition 116.0b5 (64-bit). I am running the latest version of macOS at the time of posting.

Honestly, if you just pull up any site that is using color in an HD color space (gradient.style is a personal favorite) side by side in Firefox and Chrome the difference is clear. Firefox's colors look washed out in comparison.

Hoping to see a fix for this as I'm starting to use HD colors in my projects and don't want to feel like I am missing out when using my favorite web browser!