9 ms·

> The image on the left below is a uniform red square in the sRGB gamut. The image on the right is slightly different, as it actually uses two different shades

> The image on the left below is a uniform red square in the sRGB gamut. The image on the right is slightly different, as it actually uses two different shades of red: one that is within the sRGB gamut and another that is outside of it. On sRGB displays, both colors are painted the same and the result is a uniform red square, just like the first image. However, on a system that can display wide-gamut colors, both shades of red will be painted differently and you will be able to see a faint WebKit logo inside the square. Ironic. Given the author's emphasis on Chromium, you would expect this example to work there. But, as far as I can tell, Chromium's "color management" currently converts all images to sRGB before rendering them in the system's color space, so the difference between the images is actually lost there. It works fine in Firefox (with color management enabled). My understanding is that doing things correctly actually makes color management a lot more complicated for Firefox (because you can't just have the renderer do color management from a single source - sRGB - to a single target - the monitor's profile), but I think getting correct results for wide gamut images is worth it. Note: my search powers are failing me at the moment, so I actually can't find where I first read about this problem, so I'm not sure whether it's the result of a bug or intended behavior, or even whether the problem extends beyond Linux + SDR screens.

grishka 5y ago
It doesn't work in Vivaldi on Android either. You have to download it and open it in Google Photos to see the difference (all other apps I tried work exclusively in sRGB too).
JonathonW 5y ago
Interestingly, the DCI-P3 demo is working in Chrome on Mac now. (It didn't used to-- Safari/Webkit was the only browser that handled DCI-P3 images on Mac for a while.)
- bscphil 5y ago
  That's good. I assume you mean the webkit logo test. I wonder what's different about color management on macOS such that this was hard for the other browsers to support. Correctly decoding images tagged in any color space has worked correctly in both Firefox and Chromium for as long as I can remember on Linux. In fact, it's even working "correctly" now on Chromium+Linux, it's just that they're seemingly choosing to render everything to an intermediate color space of sRGB before rendering out to the screen. I found a good additional test to illustrate the problem with Chrome. [1] With the first test, "How far from sRGB is your display color gamut" the bars look exactly the same in Chrome to me. [2] But they're not oversaturated (i.e. in the monitor color space), they're seemingly correct sRGB colors, as displayed in a color managed way on my screen. The ProPhoto tagged image in Chrome looks exactly like the sRGB tagged image does in Firefox. So Chrome is performing color management, it's just effectively clamping the output to the sRGB gamut. [1] https://cameratico.com/tools/web-browser-color-management-test/ https://cameratico.com/tools/web-browser-color-management-te... [2] https://ipfs.io/ipfs/QmeVGD9kWXFNyywgJZpnfwFdv3KDuEADwkiA9vatMSx2vE/chrome_on_linux_everything_is_srgb.png https://ipfs.io/ipfs/QmeVGD9kWXFNyywgJZpnfwFdv3KDuEADwkiA9va...
  - Eric_WVGG 5y ago
    Safari uses an OS level thing for decoding images — this is why Safari 14 for MacOS “Big Sur” can display WebP images, but Safari 14 Catalina cannot. So it is possible that Chrome is using the same system lib to render images, which thusly can display P3. But I would hazard a guess that if you tried to pump P3 color through CSS or an SVG in Chrome, that would fail.
t0mas88 5y ago
It's working on an iPhone with iOS 14 with Edge and Safari (both of course using the same rendering engine on iOS) But does not seem to work on Edge on Windows 10 with a built in Dell XPS display.
- dannyw 5y ago
  Yes, to be precise, it doesn't work on many Chrominum derived browsers because they can't consistently handle rich colour spaces. It works on Safari and Firefox, and in some cases, Chrome on Mac. Get off Google-controlled browsers. Stop using Chrome in 2021. The open Web matters. Google is actively evil (Manifest v3 hindering uBlock Origin, AMP, FLoC, collusion deal with FB, etc).
  - bscphil 5y ago
    > doesn't work on many Chrominum derived browsers because they can't consistently handle rich colour spaces. Do you have any references documenting the problems with Chrome's handling of wide color gamuts? I can't seem to find anyone discussing the problem I'm seeing with the colors being clamped to sRGB. Maybe I discovered it a few months ago, but I seem to remember finding a discussion about it somewhere...
thaumasiotes 5y ago
> It works fine in Firefox (with color management enabled). Hmmmm. I do have two different reds in Firefox. But I wouldn't describe the test as "working fine"; the two reds are so similar to each other that I'm unable to perceive the webkit logo. I can tell there's a circle, and that takes effort. For a test to be "working", the judge needs to be able to tell the difference between "test succeeded" and "test failed".
- jstanley 5y ago
  I'm also on Firefox and can very clearly see the difference between the two reds. How can we tell whether it is the test that is broken or just that some screens render the colours differently?
  - petepete 5y ago
    I'm on Linux/Firefox and the colour difference is very stark for me. I tested with both AdobeRGB and sRGB modes of my monitor. There's a visible difference in most of the samples here https://webkit.org/blog-files/color-gamut/ https://webkit.org/blog-files/color-gamut/
    - tux3 5y ago
      Even if you see it, the hardware could be lying to you! Unless the whole pipeline has support, you get subtly wrong results. My Firefox on Android happily displays a difference, the webkit logo is very visible. And my AMOLED screen can actually go beyond DCI-P3. But the phone is cheating. It's "enhancing" sRGB colors to wide gamut by cranking up the saturation accross the whole screen, and the settings are "sRGB" or "DCI-P3", but that doesn't turn off the post-processing filter it just adjusts the strength. The P3 flowers on that test page in particular look completely wrong on my phone.
- deviledeggs 5y ago
  You likely have a "fake" HDR monitor. To cover most of the new gamut requires very bright backlight. Most cheap HDR PC monitors are only ~400nits, not nearly bright enough. They bare bones HDR 400 spec most meet is... Not very HDR. For proper HDR you need 1000+ nits. Only Apple monitors and a few very expensive alternatives can do this. On other monitors the gamut is compressed and there's little difference between the colors at the edges. You can test your monitor with this https://m.youtube.com/watch?v=NlAsAuBtmps https://m.youtube.com/watch?v=NlAsAuBtmps When it stops getting brighter, you've maxed out your display and it can't display the additional range. For whatever reason TV tech is way better. Even cheap TVs tend to be brighter than the brightest PC monitors. If you have the space, a 40 inch TV sitting farther away will be far superior picture quality than a monitor
kibwen 5y ago
Ha, I was surprised that my monitor was physically capable of displaying it, but it didn't even occur to me that I should have been just as surprised that Firefox could render it!
dahart 5y ago
One question I have is what does “correct” mean? If a DCI-P3 image is displayed on an sRGB monitor, is there a “correct” way to do it? I would think that there might be multiple valid ways to convert wide gamut colors into sRGB, and that it really depends on what constraints the viewer wants satisfied. For example, if I want to preserve relative perceived differences between colors, maybe I’d map the boundary of DCI-P3 to the boundary of sRGB, and then interpolate all the interior colors (possibly with some non-linearities). This would allow people with sRGB monitors to see the WebKit logo in the article’s example, and it’s a perfectly reasonable and valid way to convert colors. However, this would make it so that converting from sRGB red to DCI-P3 and back returns a different color (less bright and/or saturated) than what you started with. So a different and perfectly reasonable conversion would be to match the colors within the sRGB gamut perfectly at all times, and clamp colors outside the sRGB gamut to the sRGB boundary. Even when clamping, there are multiple valid choices - clamp to the nearest point (prioritize brightness), or move toward the center of the gamut and stop on the boundary intersection (prioritize hue). A third option would be to preserve some overlapping interior region of the two gamuts exactly, and start to smoothly blend between them near the boundary. What I think this means is that I don’t know whether I can expect to see the WebKit logo on an sRGB display. Since the browser doesn’t ask me what kind of conversion I’d like, it’s reasonable to assume it’s clamping when converting (in which case the logo is lost), and it’s also (perhaps) reasonable to expect color differences to get preserved (in which case I’d see the logo). Probably the most correct thing to do would be to let either the developer and/or the viewer have a say in how the conversion should happen? > you can’t just have the renderer do color management from a single source - sRGB - to a single target I’m not sure I understand what you mean here, could you elaborate? What else needs to be involved? I would think knowing the source color space, and the target monitor’s nearest supported color space is exactly what you need, so if the source is DCI-P3 and the monitor only has sRGB, a sophisticated but well defined conversion is used, while if the monitor is DCI-P3 then the conversion is the identity function.
- raphlinus 5y ago
  You are correct here. The conversion from one color space to another when the gamuts are not identical is an artistic decision, and there is no scientifically "correct" way to do it. There can be standards so a content creator can know what to expect, and there's an awful lot of weight put into attaching metadata to source images so the transform can be informed by the metadata, but I also think it's fair to say the entire thing is a mess and that in 99+% of the cases there's a good chance trying to do fancy color management will cause something to go wrong (if not least, inconsistent results on some clients), whereas keeping everything in sRGB gives you a baseline of quality; the only thing you don't get are those super-bright colors.
crazygringo 5y ago
It's worked fine in Chrome for years on Macs with P3 displays, I don't know why Chromium would be any different. While Firefox only finally brought proper color management last month. [1] Maybe's it's a Chromium-on-Linux thing? [1] https://www.mozilla.org/en-US/firefox/89.0/releasenotes/ https://www.mozilla.org/en-US/firefox/89.0/releasenotes/
- bscphil 5y ago
  > While Firefox only finally brought proper color management last month. This was just a flag they turned on (on macOS?) to treat untagged images and CSS colors as sRGB. It's been available for everyone on all platforms since Firefox 3.5, which was released in 2009. I believe the argument for not enabling it is that supposedly there are a lot of Windows systems out there with incorrect color profiles installed, and doing color management on every image on the web makes that suddenly very obvious. Chrome has faced quite a bit of user rage over this, and still has a setting to allow users to force the browser to treat their screen as sRGB for that reason. People like their oversaturated colors. http://kb.mozillazine.org/Gfx.color_management.enabled http://kb.mozillazine.org/Gfx.color_management.enabled
  - crazygringo 5y ago
    If 99.9% of your users don't turn on a flag, then as a web designer, it doesn't exist. Saying "it's there behind a flag" is utterly useless. It's something web designers need to depend on, not users. And who likes oversaturated colors? What user rage? I've never heard of any of that. To the contrary, it was a huge problem that in Firefox, image RGB values didn't match CSS RGB values on P3 displays. How the heck are you supposed to create an interface with, you know, colors that match? Kind of a basic requirement. Thankfully, they finally fixed it. Why it took them 12 years is beyond me, though.
    - bscphil 5y ago
      > And who likes oversaturated colors? What user rage? I regret to inform you... https://techdows.com/2020/07/chrome-84-force-color-profile-srgb.html https://techdows.com/2020/07/chrome-84-force-color-profile-s... https://old.reddit.com/r/chrome/comments/930egn/set_force_color_profile_to_srgb_and_google_chrome/ https://old.reddit.com/r/chrome/comments/930egn/set_force_co... https://support.google.com/chrome/thread/50631110/force-color-profile-flag-removed-in-beta-84-no-longer-any-way-to-force-chrome-to-srgb-etc?hl=en https://support.google.com/chrome/thread/50631110/force-colo... https://bugs.chromium.org/p/chromium/issues/detail?id=1105566 https://bugs.chromium.org/p/chromium/issues/detail?id=110556...

grishka 5y ago

It doesn't work in Vivaldi on Android either. You have to download it and open it in Google Photos to see the difference (all other apps I tried work exclusively in sRGB too).

JonathonW 5y ago

Interestingly, the DCI-P3 demo is working in Chrome on Mac now. (It didn't used to-- Safari/Webkit was the only browser that handled DCI-P3 images on Mac for a while.)

bscphil 5y ago
That's good. I assume you mean the webkit logo test. I wonder what's different about color management on macOS such that this was hard for the other browsers to support. Correctly decoding images tagged in any color space has worked correctly in both Firefox and Chromium for as long as I can remember on Linux. In fact, it's even working "correctly" now on Chromium+Linux, it's just that they're seemingly choosing to render everything to an intermediate color space of sRGB before rendering out to the screen. I found a good additional test to illustrate the problem with Chrome. [1] With the first test, "How far from sRGB is your display color gamut" the bars look exactly the same in Chrome to me. [2] But they're not oversaturated (i.e. in the monitor color space), they're seemingly correct sRGB colors, as displayed in a color managed way on my screen. The ProPhoto tagged image in Chrome looks exactly like the sRGB tagged image does in Firefox. So Chrome is performing color management, it's just effectively clamping the output to the sRGB gamut. [1] https://cameratico.com/tools/web-browser-color-management-test/ https://cameratico.com/tools/web-browser-color-management-te... [2] https://ipfs.io/ipfs/QmeVGD9kWXFNyywgJZpnfwFdv3KDuEADwkiA9vatMSx2vE/chrome_on_linux_everything_is_srgb.png https://ipfs.io/ipfs/QmeVGD9kWXFNyywgJZpnfwFdv3KDuEADwkiA9va...
- Eric_WVGG 5y ago
  Safari uses an OS level thing for decoding images — this is why Safari 14 for MacOS “Big Sur” can display WebP images, but Safari 14 Catalina cannot. So it is possible that Chrome is using the same system lib to render images, which thusly can display P3. But I would hazard a guess that if you tried to pump P3 color through CSS or an SVG in Chrome, that would fail.

t0mas88 5y ago

It's working on an iPhone with iOS 14 with Edge and Safari (both of course using the same rendering engine on iOS) But does not seem to work on Edge on Windows 10 with a built in Dell XPS display.

dannyw 5y ago
Yes, to be precise, it doesn't work on many Chrominum derived browsers because they can't consistently handle rich colour spaces. It works on Safari and Firefox, and in some cases, Chrome on Mac. Get off Google-controlled browsers. Stop using Chrome in 2021. The open Web matters. Google is actively evil (Manifest v3 hindering uBlock Origin, AMP, FLoC, collusion deal with FB, etc).
- bscphil 5y ago
  > doesn't work on many Chrominum derived browsers because they can't consistently handle rich colour spaces. Do you have any references documenting the problems with Chrome's handling of wide color gamuts? I can't seem to find anyone discussing the problem I'm seeing with the colors being clamped to sRGB. Maybe I discovered it a few months ago, but I seem to remember finding a discussion about it somewhere...

thaumasiotes 5y ago

> It works fine in Firefox (with color management enabled). Hmmmm. I do have two different reds in Firefox. But I wouldn't describe the test as "working fine"; the two reds are so similar to each other that I'm unable to perceive the webkit logo. I can tell there's a circle, and that takes effort. For a test to be "working", the judge needs to be able to tell the difference between "test succeeded" and "test failed".

jstanley 5y ago
I'm also on Firefox and can very clearly see the difference between the two reds. How can we tell whether it is the test that is broken or just that some screens render the colours differently?
- petepete 5y ago
  I'm on Linux/Firefox and the colour difference is very stark for me. I tested with both AdobeRGB and sRGB modes of my monitor. There's a visible difference in most of the samples here https://webkit.org/blog-files/color-gamut/ https://webkit.org/blog-files/color-gamut/
  - tux3 5y ago
    Even if you see it, the hardware could be lying to you! Unless the whole pipeline has support, you get subtly wrong results. My Firefox on Android happily displays a difference, the webkit logo is very visible. And my AMOLED screen can actually go beyond DCI-P3. But the phone is cheating. It's "enhancing" sRGB colors to wide gamut by cranking up the saturation accross the whole screen, and the settings are "sRGB" or "DCI-P3", but that doesn't turn off the post-processing filter it just adjusts the strength. The P3 flowers on that test page in particular look completely wrong on my phone.
deviledeggs 5y ago
You likely have a "fake" HDR monitor. To cover most of the new gamut requires very bright backlight. Most cheap HDR PC monitors are only ~400nits, not nearly bright enough. They bare bones HDR 400 spec most meet is... Not very HDR. For proper HDR you need 1000+ nits. Only Apple monitors and a few very expensive alternatives can do this. On other monitors the gamut is compressed and there's little difference between the colors at the edges. You can test your monitor with this https://m.youtube.com/watch?v=NlAsAuBtmps https://m.youtube.com/watch?v=NlAsAuBtmps When it stops getting brighter, you've maxed out your display and it can't display the additional range. For whatever reason TV tech is way better. Even cheap TVs tend to be brighter than the brightest PC monitors. If you have the space, a 40 inch TV sitting farther away will be far superior picture quality than a monitor

kibwen 5y ago

Ha, I was surprised that my monitor was physically capable of displaying it, but it didn't even occur to me that I should have been just as surprised that Firefox could render it!

dahart 5y ago

One question I have is what does “correct” mean? If a DCI-P3 image is displayed on an sRGB monitor, is there a “correct” way to do it? I would think that there might be multiple valid ways to convert wide gamut colors into sRGB, and that it really depends on what constraints the viewer wants satisfied. For example, if I want to preserve relative perceived differences between colors, maybe I’d map the boundary of DCI-P3 to the boundary of sRGB, and then interpolate all the interior colors (possibly with some non-linearities). This would allow people with sRGB monitors to see the WebKit logo in the article’s example, and it’s a perfectly reasonable and valid way to convert colors. However, this would make it so that converting from sRGB red to DCI-P3 and back returns a different color (less bright and/or saturated) than what you started with. So a different and perfectly reasonable conversion would be to match the colors within the sRGB gamut perfectly at all times, and clamp colors outside the sRGB gamut to the sRGB boundary. Even when clamping, there are multiple valid choices - clamp to the nearest point (prioritize brightness), or move toward the center of the gamut and stop on the boundary intersection (prioritize hue). A third option would be to preserve some overlapping interior region of the two gamuts exactly, and start to smoothly blend between them near the boundary. What I think this means is that I don’t know whether I can expect to see the WebKit logo on an sRGB display. Since the browser doesn’t ask me what kind of conversion I’d like, it’s reasonable to assume it’s clamping when converting (in which case the logo is lost), and it’s also (perhaps) reasonable to expect color differences to get preserved (in which case I’d see the logo). Probably the most correct thing to do would be to let either the developer and/or the viewer have a say in how the conversion should happen? > you can’t just have the renderer do color management from a single source - sRGB - to a single target I’m not sure I understand what you mean here, could you elaborate? What else needs to be involved? I would think knowing the source color space, and the target monitor’s nearest supported color space is exactly what you need, so if the source is DCI-P3 and the monitor only has sRGB, a sophisticated but well defined conversion is used, while if the monitor is DCI-P3 then the conversion is the identity function.

raphlinus 5y ago
You are correct here. The conversion from one color space to another when the gamuts are not identical is an artistic decision, and there is no scientifically "correct" way to do it. There can be standards so a content creator can know what to expect, and there's an awful lot of weight put into attaching metadata to source images so the transform can be informed by the metadata, but I also think it's fair to say the entire thing is a mess and that in 99+% of the cases there's a good chance trying to do fancy color management will cause something to go wrong (if not least, inconsistent results on some clients), whereas keeping everything in sRGB gives you a baseline of quality; the only thing you don't get are those super-bright colors.

crazygringo 5y ago

It's worked fine in Chrome for years on Macs with P3 displays, I don't know why Chromium would be any different. While Firefox only finally brought proper color management last month. [1] Maybe's it's a Chromium-on-Linux thing? [1] https://www.mozilla.org/en-US/firefox/89.0/releasenotes/ https://www.mozilla.org/en-US/firefox/89.0/releasenotes/

bscphil 5y ago
> While Firefox only finally brought proper color management last month. This was just a flag they turned on (on macOS?) to treat untagged images and CSS colors as sRGB. It's been available for everyone on all platforms since Firefox 3.5, which was released in 2009. I believe the argument for not enabling it is that supposedly there are a lot of Windows systems out there with incorrect color profiles installed, and doing color management on every image on the web makes that suddenly very obvious. Chrome has faced quite a bit of user rage over this, and still has a setting to allow users to force the browser to treat their screen as sRGB for that reason. People like their oversaturated colors. http://kb.mozillazine.org/Gfx.color_management.enabled http://kb.mozillazine.org/Gfx.color_management.enabled
- crazygringo 5y ago
  If 99.9% of your users don't turn on a flag, then as a web designer, it doesn't exist. Saying "it's there behind a flag" is utterly useless. It's something web designers need to depend on, not users. And who likes oversaturated colors? What user rage? I've never heard of any of that. To the contrary, it was a huge problem that in Firefox, image RGB values didn't match CSS RGB values on P3 displays. How the heck are you supposed to create an interface with, you know, colors that match? Kind of a basic requirement. Thankfully, they finally fixed it. Why it took them 12 years is beyond me, though.
  - bscphil 5y ago
    > And who likes oversaturated colors? What user rage? I regret to inform you... https://techdows.com/2020/07/chrome-84-force-color-profile-srgb.html https://techdows.com/2020/07/chrome-84-force-color-profile-s... https://old.reddit.com/r/chrome/comments/930egn/set_force_color_profile_to_srgb_and_google_chrome/ https://old.reddit.com/r/chrome/comments/930egn/set_force_co... https://support.google.com/chrome/thread/50631110/force-color-profile-flag-removed-in-beta-84-no-longer-any-way-to-force-chrome-to-srgb-etc?hl=en https://support.google.com/chrome/thread/50631110/force-colo... https://bugs.chromium.org/p/chromium/issues/detail?id=1105566 https://bugs.chromium.org/p/chromium/issues/detail?id=110556...