Jen SimmonsI had not heard of the web technologies for making use of P3 color in CSS before I joined Apple. Over the last three months, I dived *deep*, getting to know so much about it all. Wow. There is so much possibility for color on the web. And web designers have not been taking advantage, even though it shipped in Safari 10! Over SIX YEARS AGO!!! đ±đ€©đ
alex.tm@jensimmons I love using P3 colours in my web design work, it always looks amazing compared to the closest sRGB alternative. I wish there was broader industry support, but itâs great as a progressive enhancement.
Dan Yoder@alextm @jensimmons What's the advantage of P3 over using LCH?
@danyoder @alextm P3 is a color gamut. Itâs the range of colors that are possible. sRGB is another color gamut â the one thatâs been the default on the web since the 90s. P3 can represent 50% more colors than sRGB. You need a display that supports P3 to see it.
LCH (and OKLCH, LAB, OKLAB) are color *models. *They are a way to describe a color. So are hexadecimal numbers, HSL, HWB, the RGB function, etc.
LCH, OKLCH, LAB, & OKLAB can represent P3 colors. The old models cannot / only do sRGB.
@danyoder @alextm So you arenât âP3 over using LCHâ. You use LCH, OKLCH, LAB, or OKLAB to define a color. And you can define a color that only exists in the P3 color gamut if youâd like. (Or maybe the color exists in sRGB, too.)
The advantage of using a new color model (LCH, OKLCH, LAB, or OKLAB) over an old color model (hexadecimal numbers, named colors, HSL, HWB, or the RGB function) is that you can define colors in *any* gamut in the new models. While the old ones are stuck in the past.
@jensimmons @danyoder Great explanation.
I think this article from Josh Comeau is a really good guide to modern web colour and also discusses the differences between P3 and LCH:
Color Formats in CSS
CSS gives us so many options when it comes to expressing colorâwe can use hex codes, rgb, hsl, and more. Which option should we choose? This turns out to be a surprisingly important decision! In this article, we'll take a tour of color formats in CSS, and see which option will serve us best.
@alextm @jensimmons Thank you! I'll check it out. đ€
@jensimmons @alextm Thank you so much! That is super helpful. đ
Naman
LorenAmelang@jensimmons Just searched - "The 2020 iPhone SE has a TrueTone screen with 1400:1 contrast ratio, support for the P3 wide color gamut..." Does that mean mine can show all of #P3, or just that it understands the code for it? Is there some handy app or site that demonstrates how much of the #gamut can be displayed? Or whether an app or site is using P3?
VĂĄclav VanÄura@jensimmons @danyoder @alextm Talking about color profiles, +/â, could you and your team please consider HDR support in AVIF? Chromium has it too, and since Apple devices have supported EDR for years, itâs the last missing piece to great-looking photos. Please check out https://gregbenzphotography.com/hdr/ in Chrome (I know) or Opera.
Create and edit true HDR (High Dynamic Range) images - Greg Benz Photography
SALE: save $160 off the ASUS PA32UCXR 32" 4K HDR monitor, which is a stunning 1600 nits HDR monitor with 2304 local dimming zones (4x the Pro Display XDR), automated calibration, and single cable charging/pass-through. See my full review or full list of other recommended HDR monitors. Note: "HDR" on this page refers to new display hardware which enables truly higher
Eric Eggert@jensimmons And in roughly 50 years, we will know how to calculate color contrasts for them, too! đ I really wished accessibility standards wouldnât lack technology that much.
Egor Kloos@jensimmons Iâm a fan of OKLCH and P3 is great. Just a shame that many design tools donât offfer these new browser abilities in colour, fluid layout, and typographical units.
Christian "Schepp" Schaefer@jensimmons I find them very intriguing! I'm also interested to see how they might influence, maybe even improve accessibility. It's still hard to make use of those new color spaces, though,as you need to have an end to end HDR capable toolchain (hardware and software, easier on Apple though). And then you also need to check how everything maps down to the still more common SDR contexts (maybe a new idea đĄ for devtools?)
@Schepp Safari 13.1 shipped tools to figure out how to manually map P3 color to sRGB, back in March 2020.
@Schepp HDR is not the same as P3. HDR video hardware often comes with P3 support â but P3 is for more than images/video. P3 is a color gamut, while HDR is high dynamic range (how many stops of light).
People also keep saying âHD colorâ when they mean P3, but thatâs not it. HD video is defined by number of lines/pixels. Itâs *always* in sRGB.
Conflating P3 color with HD/HDR is kind of like assuming HD video = 24p while SD video = 30p. Nope.
Itâs called P3, or generically âwide gamut colorâ.
@jensimmons i think we both mean the same. I was indeed referring to the increased color ranges & higher precision in between colors compared to sRGB. Not increased peak brightness or increased pixel count. As for Safari's devtools, I'm one of those few Windows users amongst webdevs, so I'm not always aware of what's already in there. Great to hear, you've already thought of that! đâš
Caleb Hearth 
@jensimmons Are you taking questions? Iâve been searching for an algorithm for translating between color spaces, preferably one that doesnât require that I always take a detour through LAB.