
Wide Gamut Color in CSS with Display-P3 - chmaynard
https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
======
VoxPelli
If someone needs to read up on color profiles:
[https://bjango.com/articles/colourmanagementgamut/](https://bjango.com/articles/colourmanagementgamut/)

Eg. important to configure ones design tools like Sketch and Photoshop
correctly so that it interprets RGB values as intended rather than just in the
current color profile

------
duhi88
Neat, but I find it hard to believe devs are going to reach for this verbose
format without a default fallback.

hsl is a much nicer syntax for humans to describe color than rgb channels.

I'm sure there are good reasons under the hood, but why that syntax over
something like:

``` header { color: hsl(42, 70%, 50%); color: hsl(display-p3 42, 70%, 50%); }
```

~~~
slip
Also, I'm not understanding why HSL doesn't automatically inherit the P3 color
space without any code changes. It shouldn't require any additional syntax,
the HSL model is describing abstracted color values, unlike HEX or RGB which
are hardcoded values.

Unless I'm not understanding this correctly. If that's correct, it seems
strange and sloppy to require the display-p3 definition.

~~~
zlsa
Because an HSL value translated directly to sRGB will look different when
translated to P3. The color spaces themselves define different ranges of R, G,
and B. The only backwards-compatible method to derive P3 colors from HSL
values would be with saturation and lightness values greater than one.

------
teilo
So, does this gracefully degrade to sRGB? If so, how does one set the
rendering intent for degrading to sRGB? One needs to be able to choose either
relative colorimetric or perceptual (absolute colorimetric and presentation
are fairly uncommon), but which one depends on the intent of the designer.

Or is one expected to provide two different color values for every element?
That would be tedious.

~~~
pickdenis
According to what I read in the article, you have to provide the sRGB fallback
yourself. I suppose this is only a true annoyance if you're writing CSS by
hand (like I do), but I hear most people these days use Less or some other CSS
preprocessor that can easily handle this.

~~~
madeofpalk
The article mentions the manual fallback for when the browser does not support
the _syntax_ , but I wonder what happens when Chrome gets updated to support
color() but is used on a device that does support Wide Gamut Color. I guess
the safest thing would be to still treat it as an invalid value and require
manual fallback.

~~~
gardaani
This may already happen on Safari and Mac without support for Wide Gamut
Color. In that case, the P3 color is converted to sRGB, which typically means
clamping to sRGB.

------
gardaani
This all gets interesting when mixing sRGB, Display-p3 or Lab colors in
gradients and animations. There's an open issue about it at W3C:
[https://github.com/w3c/csswg-
drafts/issues/4647](https://github.com/w3c/csswg-drafts/issues/4647)

I think Safari currently fails to display such gradients.

~~~
NVI
I made an sRGB to Display-P3 gradient and it worked well for me in Safari:
[https://codepen.io/NV/pen/GRJvYzQ](https://codepen.io/NV/pen/GRJvYzQ).

~~~
gardaani
You are right! I had tried it in SVG, where solid P3 works, but gradient P3
fails: [https://jsfiddle.net/6pL12ct0/](https://jsfiddle.net/6pL12ct0/)

------
jfkebwjsbx
What about giving colors in 16bpp in linear space instead?

That covers way more displays and future ones, no?

~~~
Asooka
No, because this expands colours to ones that cannot be expressed with sRGB,
no matter if it's encoded as 16bit linear, or with the sRGB transfer function.
You cannot express a hue outside the Rec.709 triangle, no matter how much
precision you add (1).

Display-P3 uses points in CIE xyz space for its RGB channels that are farther
apart than sRGB, allowing it to express more hues, which sRGB monitors and
colours cannot. It's still not the full spectrum humans can see, but it's much
better.

(1) technically you can, if you allow channel values to be negative, but that
breaks compositing.

~~~
TazeTSchnitzel
> It's still not the full spectrum humans can see

In case anyone wonders why colour spaces don't typically try to cover the full
spectrum, there's two problems. One is that it may be difficult to reproduce
consistently, but the other problem is that it's not a neat triangle, so to
represent it completely as RGB you would have large regions of undefined
space.

~~~
klodolph
Another issue is that as you increase the gamut, you decrease precision. So
you sometimes see wide gamuts like scRGB only used with higher precision
images.

------
jiggawatts
This kind of thing cracks me up. It's 2020. We live in the future.

I have a HDR, wide-gamut, 10-bit, calibrated display.

Send me a non-sRGB _or_ HDR still image file that will display correctly. That
is, with the right colours, in wide gamut, with or without HDR.

You can't because I haven't specified what _platform_ or _application_ I'm
using.

Even if I did specify, you probably can't create such a file. For example,
it's currently borderline impossible to create a HEIC file on Windows, even
though it would allow 10-bit wide-gamut files to be sent to an Apple IOS user
and be displayed correctly, which is at least _something_. Adobe Lightroom
refuses to support arbitrary colour spaces on export (why!?), and doesn't
include Display P3 in the fixed list that it does support.

But if you do somehow manage to create a HEIC file (or any wide-gamut file
format) on Windows, it will show it incorrectly anyway, but not in all apps.
Some will work. But only if you manually configure a profile for your monitor.
But then your desktop colours will shift, which will make your previously
valid sRGB CSS colours display incorrectly with sRGB stretched to the wide
gamut because _fuck you, that 's why._

To my knowledge it is currently impossible to solve any such problem. Colour
management in the Windows, Linux, XBox, PlayStation, and Android space is an
unmitigated clusterfuck. Apple meanwhile is pretending that Display P3 is the
_only_ wide gamut that exists, because they use it.

One CSS attribute implemented on one platform with one usable colour space
will not solve this. It won't even begin. It's like reading an article about
the finer points of cake decoration in the midst of a famine. It feels almost
insulting. Like I should feel ashamed for starving, and not being one of the
rich elite that can afford cake. But nobody has cake, they're all pretending.

Right now, in 2020, the _only_ still image interchange format that more or
less works is an sRGB, SDR, 8-bit JPEG. You can't have anything else. No
10-bit. No other gamut. No HDR. No compression better than the one invented in
1992.

Okay fine, I admit it. There is a way to solve this problem. Download DaVinci
Resolve and create a new movie. Import your HDR image as a still image "video"
clip. Export the single frame movie, or a slideshow if you please, in whatever
HDR format you prefer. Upload to YouTube. Share YouTube link.

This, seriously is it. This is what we've all achieved.

Congratulations, Microsoft (#2 biggest company), Apple (#3), and Alphabet
Group (#4). Your stewardship of web standards and email clients has resulted
in this.

------
Sephr
This is nice, but can I use it with an HDR monitor without forking over $7000
for an Apple Pro Display XDR?

I haven't been able to confirm whether or not Mac OS Catalina actually
supports any third party HDR monitors over HDMI.

I have the Asus PG27UQ 4K HDR monitor and my 2019 MacBook Pro only outputs 4K
30Hz 8bpc over the official Apple HDMI adapter[1], while my 2019 XPS 13 2-in-1
outputs 4K 60Hz 10bpc over this same Apple adapter.

[1] [https://www.apple.com/shop/product/MUF82AM/A/usb-c-
digital-a...](https://www.apple.com/shop/product/MUF82AM/A/usb-c-digital-av-
multiport-adapter)

~~~
TheCoreh
They mention the "LG UltraFine 5K Display" on the page, maybe it's the only
one supported? Maybe there's more

~~~
MBCook
I have some sort of Dell at home that I believe I tested and works properly.

But then again I’m using DisplayPort. I don’t know why people are so insistent
on using HDMI and being surprised it doesn’t work as well.

~~~
Sephr
I save the DisplayPort port on this monitor for my Windows desktop because Mac
OS doesn't appear to output the 4K 98Hz HDR that the Asus PG27UQ naively
supports over DisplayPort 1.4.

------
saagarjha
> There are also numerous devices that support Display-P3 color space but
> currently have no browsers that support Display-P3 in CSS

I wonder if someone could build WebKit for them.

~~~
jsjddbbwj
Doesn't Google cherry pick these changes into Blink anyway?

------
hooch
Trying this in Safari I just see “unsupported property” in the inspector?

~~~
NVI
Are you using Safari Technology Preview? Web Inspector support was added in
STP 97. Before that `color: color(display-p3 0 1 0)` showed as unsupported
property in Web Inspector.

~~~
hooch
Thanks, seems that was it. I had only checked it in regular Safari.

