Adam Argyle joins Amelia and Nick to catch them up on all the goings on within the world of CSS colors. There are a lot more options than youâd expect if you havenât been keeping up, and Adamâs here to help you avoid the âgray dead zoneâ!
Matched from the episode's transcript đ
Adam Argyle: Excellent question. So if you think about the gamuts, the gamuts are the totality of colors possible. So if youâre in the P3 color space, thereâs a certain number of colors that it says âI can do this.â So if youâre P3 gamut-compliant, that means you can represent everything inside of there. And that is â itâs just like flattened out, kind of, and you get this view that doesnât feel very dispersed. It looks very evenly distributed. But when you get into the color spaces, where you change the shape of something, the shape change can heavily impact how many you have there.
But - okay, so letâs talk about OKLCH. If youâre in the red hue, and you go from lightness 100 to lightness 0, this is a superpower of LCH and OKLCH. Itâs called CIELAB color spaces; theyâre perceptually uniform for human vision. They were tested in the â70s, and they got tons of participants to say what was lighter, what was darker, and they arranged the color space based on how we see, so that it doesnât matter what hue youâre in, you do get an even distribution from zero to 100%. This is why itâs a powerful space for a design system, is if you want to lighten or darken a color, youâre literally lightening or darkening it based on the way that our eyes perceive color; the noticeable difference that the human eye can see, not the change in a number, in a mathematical color space shape, but literally something that 1% will change something visually, 1% to humans. And so thatâs something special for that color space. Other color spaces might not be that way.
I did want to mention one more thing, too⌠Sometimes it can sound like - when Iâm talking about this stuff, like RGB, is somehow not capable, or RGB, like the lights, or just like the color concept of three channels that way is not good⌠Itâs very good. Thereâs color spaces that use RGB, that are very HDR. Thereâs a Adobe Profoto is a very wide gamut RGB-based color space. And even Rec 2020 has an RGB mode where you can access colors using R,G and B. Because so many of our displays display color that way; so we can specify how much power to put on each of those lights. But yeah⌠I donât know, this stuff gets gnar.
To bring it back to CSS a little bit, though⌠Wanna chat about like some color functions? So weâll go beyond color spaces and gamuts, and kind of chat about like usage, and stuff that you might do inside your application thatâs handy, and how Sass helped, and how Sass has adapted to the changes in CSS as well?