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