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
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:
color: hsl(42, 70%, 50%);
color: hsl(display-p3 42, 70%, 50%);
Unless I'm not understanding this correctly. If that's correct, it seems strange and sloppy to require the display-p3 definition.
In other words, same HSL => same RGB, and same RGB but different space => often a different color.
Or is one expected to provide two different color values for every element? That would be tedious.
I don't know whether relative or perceptual colorimetric rendering intent is used.
You can open https://codepen.io/NV/pen/XLOOdE in Safari Technology Preview and check how it looks on various monitors.
It is up to the software driving the display to choose appropriate color values. That means that if a monitor has the Display-P3 gamut, then it is up to the OS or browser to know this, and send appropriate color values when viewing sRBG data such that the colors are not oversaturated.
Yes, graphics cards can store LUT tables to linearize the RGB curves to neutralize grays. But this is not gamut mapping. Profiling is a process that happens after a display is linearized, and that profile is loaded into the OS.
I'm in the color print industry. I know color management intimately.
I think Safari currently fails to display such gradients.
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.
That covers way more displays and future ones, no?
In addition to supporting all colors, it also supports HDR (very bright pixels) by allowing the lightness to go above 100%. So, this is very bright red: lab(400% 80 70).
Most design software (Photoshop, Affinity Designer..) can display colors as Lab values and those can be used in CSS. Since lab colors are not intuitive for humans, CSS also supports Lch (lightness, chroma, hue), which is more human friendly.
Browser vendors are currently adding Lab support to their browsers.
The color profile defines what your definition actually represents and translates your 0-100% value to an actual color on the display.
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.
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.
Browsers could clamp them to sRGB on parsing for the moment and add proper functionality later.
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, while my 2019 XPS 13 2-in-1 outputs 4K 60Hz 10bpc over this same Apple adapter.
It is just a wider gamut, so wider range of colours but otherwise still SDR. It has the same tone curve (gamma function) as sRGB.
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.
Alternatively, pop a Blackmagic Decklink 4k into a PCIe chasis and run it out of one of the thunderbolt 3 ports. I do this on my HDR OLED and it works nicely.
I am using the official Apple HDMI adapter with the Asus PG27UQ.
I don't know about your Apple adapter. Were it not working, then I would look at getting a HDCP splitter midway in the chain.
I wonder if someone could build WebKit for them.