10 ms·

Towards richer colors on the Web

147 points by asicsp 5y ago

danwills 5y ago
In VFX for film, color is a huge issue too. What companies mostly do is to try to use a 'linear-to-light' color-space internally, pre-linearizing turned-over footage before working with it, and then post-transforming the final composites either back to the original colour space, or something similar. Doing this allows images to be freely filtered, resized, defocused, color-corrected etc whilst within the pipeline without it creating incorrect results because of non-linear color. Kinda seems like it might be quite nice in a web/css world to be able to similarly work in some kind of fairly neutral 'linear' color-space in the code, and let the platform and hardware translate that as well as it can?
- joshu 5y ago
  Any good tutorials or beginner articles about this?
  - krono 5y ago
    Someone posted this cool little tool[1][2] on Reddit a while back (no affiliation). It colour grades an image you upload based on a scene you select from their gallery. Not really what you asked for but it helped me understand how massive of an impact colour grading can have on how you perceive a scene. 1 https://match.color.io/ https://match.color.io/ 2 https://v.redd.it/113ksxlphgz61/DASH_720.mp4 https://v.redd.it/113ksxlphgz61/DASH_720.mp4
    - dannyw 5y ago
      Very cool tool but how is this colour grading? It looks like cheap instagram filters.
      - danwills 5y ago
        I think this might be because a large part of what Instagram filters do /is/ just color grading.
  - scq 5y ago
    This article covers things really well: http://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/ http://blog.johnnovak.net/2016/09/21/what-every-coder-should...
  - danwills 5y ago
    I found this: https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-... This is about working with linear-to-light values on GPUs however the issues in VFX are largely the same.
- Cullinet 5y ago
  A Web OpenEXR you mean? https://en.m.wikipedia.org/wiki/OpenEXR https://en.m.wikipedia.org/wiki/OpenEXR
  - danwills 5y ago
    Yeah totally! Some of the ideas from openEXR seem like they could help a lot here! Of course there's nothing stopping ppl from storing not-linear pixel values in whatever color space you like in an exr file, but at least the format can do a reasonable job of recording metadata about this, so that it can still hopefully still be linearized on load. I think it's worth noting here that linearizing-after-load is often not good enough, since the renderer most often has already automatically filtered (think MIP pyramid/etc) the texture values by the time you get hold of them. You always want the values in a linear color space (gamma=1.0) during filtering. Some renderers try to support this so you can load a jpeg without thinking about it too hard but myself I would prefer to include an explicit linearization step for extra control and peace of mind. You may end up wanting to use a specific LUT to linearize with for example, and the errors that creep in if gamma is not 1.0 can be quite subtle and hard to put your finger on, but can really sap photorealism in a nasty way.
- scq 5y ago
  This is also how modern game engines work. Textures are converted to linear space and all rendering is done in linear space before being converted to sRGB for display at the end. Not doing so results in weird looking shading, which has a very 90s/early 2000s feel about it.
chrismorgan 5y ago
Good related reading, including a demonstration and detailed comparison of interpolation in various colour spaces: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html https://raphlinus.github.io/color/2021/01/18/oklab-critique.....
toastal 5y ago
I love how most recent CSS specs about color were done though a linear lens. When color functions like darken() were in the spec, the color math wasn't done in sRGB which explains why darken in Less and Sass often look bad and the CSS blur filter makes ugly muddy browns between blocks of color.
- Cullinet 5y ago
  I think the confusion arises from the css specs using absolute RGB values as opposed to values calculated within the sRGB color space designed by HP ETAL. The css spec has a rgb(function) for using sRGB values directly. Yes the function for handling srgb values is called "rgb()"...
Animats 5y ago
Next, displays with more than 3 colors? Deeper into the red and violet?
- sp332 5y ago
  ProPhoto RGB colorspace has room for some non-physical colors, but it still only has three axes for primaries. It just has a range broad enough to include most visible colors as well as some that don't correspond to a sensory input you can get with your three color receptors. With paints and pigments, it's pretty common to have more than three primary colors mixed in. But with more non-orthogonal axes, there's more overlap where you can achieve the same color multiple ways by combining the colors in different proportions. E.g. purple could be a single purple wavelength or a combination of blue and red.
- NavinF 5y ago
  There are bandwidth limitations. My 120hz 4K main monitor supports HDR, but a single displayport cable can't push data fast enough to use HDR at that resolution and frame rate. I can connect 2 cables between my monitor and 3090 GPU to enable HDR, but that would break gsync. When the manufacturers get this sorted out, you'll likely still have to make a trade-off between latency (240hz), resolution (8K), HDR (bit depth), and your suggestion (more color channels)
  - jacobolus 5y ago
    You don’t need more color channels in all of your images to support more display primaries (at least, to a basic level). You just need GPU-type hardware built into the display which can convert each small area of an image made of pixels with colors represented in a trichromatic space to the appropriate signals sent to whatever physical arrangement of varied-primary pixels to reproduce the intended color (assuming a human viewer with typical color vision). Probably most convenient would be to start using 16-bit floating point numbers for each of 3 color channels, so that would still increase bandwidth somewhat compared to current high-end displays which use 10 or 12 bits per channel. It would eventually cool to have spectral representations of images, but that isn’t necessary for just expanding the gamut.
bscphil 5y ago
> 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...
raphlinus 5y ago
Another good introduction to wide gamut and HDR is this talk about HDR in Krita from LGM 2019: https://www.youtube.com/watch?v=5MrocfwJd4k https://www.youtube.com/watch?v=5MrocfwJd4k There, the main focus is on very bright shades (whiter than white), but highly saturated colors are in scope as well. I definitely appreciate the work to enable this, but honestly remain skeptical how important it is. I mean, sRGB #FF0000 is a pretty bright red. When do you really need more than that?
- bscphil 5y ago
  > I mean, sRGB #FF0000 is a pretty bright red. When do you really need more than that? I mean, sometimes you do. Especially when you're working with canvases. But I fear this will just be abused: what advertiser isn't going to want the brightest possible red in the gamut of the user's screen, instead of just the brightest possible red in sRGB?
- sp332 5y ago
  If you look at the color space diagrams, #FF0000 isn't super ultra red. If your monitor is showing it that way, maybe it's miscalibrated, and inaccurately showing a brighter red than is actually encoded in the file?
  - jacobolus 5y ago
    > #FF0000 isn't super ultra red ... you mean, because it is super ultra orangish red? Your display’s version of FF0000 is literally the most intense vaguely red type of color that it can produce. Some standard RGB space’s version of FF0000 is literally the most intense vaguely red type of color that it can represent. The sRGB version is so colorful that it should be avoided for most practical purposes. Forget about ever putting the P3 version of FF0000 on screen, unless you hate your audience. Or do you just mean it’s less intense than e.g. a laser pointer?
    - sp332 5y ago
      literally the most intense vaguely red type of color that it can produce It's not, because we're talking about #FF0000 in a specific color space. Most monitors these days can go well beyond sRGB's version of red, but you have to have some way to express that through the software to the monitor. This shouldn't just be the brightest red your display can show, unless you calibrated it that way on purpose.
robertoandred 5y ago
Nice to see Chrome start to catch up.
- crazygringo 5y ago
  Catch up to what?
  - deleted 5y ago
    [deleted]
  - robertoandred 5y ago
    Other browsers.
    - crazygringo 5y ago
      ...but Chrome's been ahead. Firefox only caught up to Chrome just last month in color management. https://www.mozilla.org/en-US/firefox/89.0/releasenotes/ https://www.mozilla.org/en-US/firefox/89.0/releasenotes/
      - robertoandred 5y ago
        And both have been trailing Safari forever.
jimnotgym 5y ago
I enjoy articles that do the following. There are people in my team who specialize in this area and know so much more than me about it than I do. We are working on really exciting projects that I don't get the chance as a manger to understand fully under-the-hood, but casual weekend reading just got me closer! It always interests me how much top developers are not just coding experts but also domain experts. Edit: ps. We are interested in meeting more of those colour domain experts...
traceroute66 5y ago
With a lot of things fighting for my time, could someone give me a TL;DR ? Specifically, is this blog post just another a re-hash of the modern web colour stuff already covered in Refactoring UI[1] ? [1] https://www.refactoringui.com/book https://www.refactoringui.com/book
- nine_k 5y ago
  To;dr: traditional sRGB displays have a narrow color gamut, the new displays have a much better gamut, with brighter reds and greens. A new color API uses Lab and LCh color spaces, better suited to human vision, allow interesting ways to express and manipulate color, including the newly available. Chromium has some support, if you have the right screen (I don't). The API is backwards compatible to sRGB screens. Many small demos.
mattowen_uk 5y ago
What I didn't understand, and maybe someone can explain it to me... In both Firefox and Chrome I couldn't see the webkit logo on the right hand red square, HOWEVER if I copy/pasted the right hand red square into Paint.NET the logo was VERY visible. Why did it work in one app and not the others?
- raphlinus 5y ago
  The right image is not in sRGB, it's in Display P3. The difference in reds is pretty subtle, so most likely if Paint.NET is showing a dramatic difference, it's misinterpreting the color space of the PNG image.
- cyberge99 5y ago
  It’s due to how the browser app renders color.
- wffurr 5y ago
  Because Chrome and FF smash the color information in the bitmap into 32-bit integer sRGB format instead of a 128-bit float format with a color space.
- bscphil 5y ago
  Do you have color management fully enabled in Firefox? If you don't have a color profile assigned then Firefox will probably just treat your screen as sRGB, meaning that both images will be compressed into the tiny sRGB gamut and look the same. I'm not sure how / whether Paint.NET does color management.
deleted 5y ago
[deleted]
account42 5y ago
> The Display-P3 space is about one third larger than sRGB. This means that from CSS we have no access to roughly one third of the colors that modern monitors can display. 50% larger - 1/3 larger would mean that only 1/4 of Display-P3 is missing from sRGB. Not that it really matters since the LAB color space used to derive this difference makes no attempt to make the color volume meaningful.

147 points by asicsp 5y ago

In VFX for film, color is a huge issue too. What companies mostly do is to try to use a 'linear-to-light' color-space internally, pre-linearizing turned-over footage before working with it, and then post-transforming the final composites either back to the original colour space, or something similar. Doing this allows images to be freely filtered, resized, defocused, color-corrected etc whilst within the pipeline without it creating incorrect results because of non-linear color. Kinda seems like it might be quite nice in a web/css world to be able to similarly work in some kind of fairly neutral 'linear' color-space in the code, and let the platform and hardware translate that as well as it can?

joshu 5y ago
Any good tutorials or beginner articles about this?
- krono 5y ago
  Someone posted this cool little tool[1][2] on Reddit a while back (no affiliation). It colour grades an image you upload based on a scene you select from their gallery. Not really what you asked for but it helped me understand how massive of an impact colour grading can have on how you perceive a scene. 1 https://match.color.io/ https://match.color.io/ 2 https://v.redd.it/113ksxlphgz61/DASH_720.mp4 https://v.redd.it/113ksxlphgz61/DASH_720.mp4
  - dannyw 5y ago
    Very cool tool but how is this colour grading? It looks like cheap instagram filters.
    - danwills 5y ago
      I think this might be because a large part of what Instagram filters do /is/ just color grading.
- scq 5y ago
  This article covers things really well: http://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/ http://blog.johnnovak.net/2016/09/21/what-every-coder-should...
- danwills 5y ago
  I found this: https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-... This is about working with linear-to-light values on GPUs however the issues in VFX are largely the same.
Cullinet 5y ago
A Web OpenEXR you mean? https://en.m.wikipedia.org/wiki/OpenEXR https://en.m.wikipedia.org/wiki/OpenEXR
- danwills 5y ago
  Yeah totally! Some of the ideas from openEXR seem like they could help a lot here! Of course there's nothing stopping ppl from storing not-linear pixel values in whatever color space you like in an exr file, but at least the format can do a reasonable job of recording metadata about this, so that it can still hopefully still be linearized on load. I think it's worth noting here that linearizing-after-load is often not good enough, since the renderer most often has already automatically filtered (think MIP pyramid/etc) the texture values by the time you get hold of them. You always want the values in a linear color space (gamma=1.0) during filtering. Some renderers try to support this so you can load a jpeg without thinking about it too hard but myself I would prefer to include an explicit linearization step for extra control and peace of mind. You may end up wanting to use a specific LUT to linearize with for example, and the errors that creep in if gamma is not 1.0 can be quite subtle and hard to put your finger on, but can really sap photorealism in a nasty way.
scq 5y ago
This is also how modern game engines work. Textures are converted to linear space and all rendering is done in linear space before being converted to sRGB for display at the end. Not doing so results in weird looking shading, which has a very 90s/early 2000s feel about it.

chrismorgan 5y ago

Good related reading, including a demonstration and detailed comparison of interpolation in various colour spaces: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html https://raphlinus.github.io/color/2021/01/18/oklab-critique.....

toastal 5y ago

I love how most recent CSS specs about color were done though a linear lens. When color functions like darken() were in the spec, the color math wasn't done in sRGB which explains why darken in Less and Sass often look bad and the CSS blur filter makes ugly muddy browns between blocks of color.

Cullinet 5y ago
I think the confusion arises from the css specs using absolute RGB values as opposed to values calculated within the sRGB color space designed by HP ETAL. The css spec has a rgb(function) for using sRGB values directly. Yes the function for handling srgb values is called "rgb()"...

Animats 5y ago

Next, displays with more than 3 colors? Deeper into the red and violet?

sp332 5y ago
ProPhoto RGB colorspace has room for some non-physical colors, but it still only has three axes for primaries. It just has a range broad enough to include most visible colors as well as some that don't correspond to a sensory input you can get with your three color receptors. With paints and pigments, it's pretty common to have more than three primary colors mixed in. But with more non-orthogonal axes, there's more overlap where you can achieve the same color multiple ways by combining the colors in different proportions. E.g. purple could be a single purple wavelength or a combination of blue and red.
NavinF 5y ago
There are bandwidth limitations. My 120hz 4K main monitor supports HDR, but a single displayport cable can't push data fast enough to use HDR at that resolution and frame rate. I can connect 2 cables between my monitor and 3090 GPU to enable HDR, but that would break gsync. When the manufacturers get this sorted out, you'll likely still have to make a trade-off between latency (240hz), resolution (8K), HDR (bit depth), and your suggestion (more color channels)
- jacobolus 5y ago
  You don’t need more color channels in all of your images to support more display primaries (at least, to a basic level). You just need GPU-type hardware built into the display which can convert each small area of an image made of pixels with colors represented in a trichromatic space to the appropriate signals sent to whatever physical arrangement of varied-primary pixels to reproduce the intended color (assuming a human viewer with typical color vision). Probably most convenient would be to start using 16-bit floating point numbers for each of 3 color channels, so that would still increase bandwidth somewhat compared to current high-end displays which use 10 or 12 bits per channel. It would eventually cool to have spectral representations of images, but that isn’t necessary for just expanding the gamut.

bscphil 5y ago

> 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...

raphlinus 5y ago

Another good introduction to wide gamut and HDR is this talk about HDR in Krita from LGM 2019: https://www.youtube.com/watch?v=5MrocfwJd4k https://www.youtube.com/watch?v=5MrocfwJd4k There, the main focus is on very bright shades (whiter than white), but highly saturated colors are in scope as well. I definitely appreciate the work to enable this, but honestly remain skeptical how important it is. I mean, sRGB #FF0000 is a pretty bright red. When do you really need more than that?

bscphil 5y ago
> I mean, sRGB #FF0000 is a pretty bright red. When do you really need more than that? I mean, sometimes you do. Especially when you're working with canvases. But I fear this will just be abused: what advertiser isn't going to want the brightest possible red in the gamut of the user's screen, instead of just the brightest possible red in sRGB?
sp332 5y ago
If you look at the color space diagrams, #FF0000 isn't super ultra red. If your monitor is showing it that way, maybe it's miscalibrated, and inaccurately showing a brighter red than is actually encoded in the file?
- jacobolus 5y ago
  > #FF0000 isn't super ultra red ... you mean, because it is super ultra orangish red? Your display’s version of FF0000 is literally the most intense vaguely red type of color that it can produce. Some standard RGB space’s version of FF0000 is literally the most intense vaguely red type of color that it can represent. The sRGB version is so colorful that it should be avoided for most practical purposes. Forget about ever putting the P3 version of FF0000 on screen, unless you hate your audience. Or do you just mean it’s less intense than e.g. a laser pointer?
  - sp332 5y ago
    literally the most intense vaguely red type of color that it can produce It's not, because we're talking about #FF0000 in a specific color space. Most monitors these days can go well beyond sRGB's version of red, but you have to have some way to express that through the software to the monitor. This shouldn't just be the brightest red your display can show, unless you calibrated it that way on purpose.

robertoandred 5y ago

Nice to see Chrome start to catch up.

crazygringo 5y ago
Catch up to what?
- deleted 5y ago
  [deleted]
- robertoandred 5y ago
  Other browsers.
  - crazygringo 5y ago
    ...but Chrome's been ahead. Firefox only caught up to Chrome just last month in color management. https://www.mozilla.org/en-US/firefox/89.0/releasenotes/ https://www.mozilla.org/en-US/firefox/89.0/releasenotes/
    - robertoandred 5y ago
      And both have been trailing Safari forever.

jimnotgym 5y ago

I enjoy articles that do the following. There are people in my team who specialize in this area and know so much more than me about it than I do. We are working on really exciting projects that I don't get the chance as a manger to understand fully under-the-hood, but casual weekend reading just got me closer! It always interests me how much top developers are not just coding experts but also domain experts. Edit: ps. We are interested in meeting more of those colour domain experts...

traceroute66 5y ago

With a lot of things fighting for my time, could someone give me a TL;DR ? Specifically, is this blog post just another a re-hash of the modern web colour stuff already covered in Refactoring UI[1] ? [1] https://www.refactoringui.com/book https://www.refactoringui.com/book

nine_k 5y ago
To;dr: traditional sRGB displays have a narrow color gamut, the new displays have a much better gamut, with brighter reds and greens. A new color API uses Lab and LCh color spaces, better suited to human vision, allow interesting ways to express and manipulate color, including the newly available. Chromium has some support, if you have the right screen (I don't). The API is backwards compatible to sRGB screens. Many small demos.

mattowen_uk 5y ago

What I didn't understand, and maybe someone can explain it to me... In both Firefox and Chrome I couldn't see the webkit logo on the right hand red square, HOWEVER if I copy/pasted the right hand red square into Paint.NET the logo was VERY visible. Why did it work in one app and not the others?

raphlinus 5y ago
The right image is not in sRGB, it's in Display P3. The difference in reds is pretty subtle, so most likely if Paint.NET is showing a dramatic difference, it's misinterpreting the color space of the PNG image.
cyberge99 5y ago
It’s due to how the browser app renders color.
wffurr 5y ago
Because Chrome and FF smash the color information in the bitmap into 32-bit integer sRGB format instead of a 128-bit float format with a color space.
bscphil 5y ago
Do you have color management fully enabled in Firefox? If you don't have a color profile assigned then Firefox will probably just treat your screen as sRGB, meaning that both images will be compressed into the tiny sRGB gamut and look the same. I'm not sure how / whether Paint.NET does color management.

deleted 5y ago

[deleted]

account42 5y ago

> The Display-P3 space is about one third larger than sRGB. This means that from CSS we have no access to roughly one third of the colors that modern monitors can display. 50% larger - 1/3 larger would mean that only 1/4 of Display-P3 is missing from sRGB. Not that it really matters since the LAB color space used to derive this difference makes no attempt to make the color volume meaningful.