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