 Welcome to CSS Podcast, where we cover all things CSS from accessibility to Z-index. Since we last talked about color in episode 6 and the future of web color in episode 7, there's been a few changes to the next level color specs, and we want to update you all on where they're at. So we'll talk about expanded color spaces and color functions in this episode. Some you can try out in tech previews, some are more experimental, but all of them are super exciting for the web platform. Yes, those episodes were two years ago, which we all know in tech years. It's like a decade, and we don't want you to be left behind in the 5% lightness. Get the joke, it's a CSS joke. Anyway, it's totally worth a review if it's been a minute for you. You know, and go check those out. They're all about color perception and syntax. So let's start with what we shared in those episodes that has been changed. What did we get wrong or share too early, Yuna? Well, two new color spaces have been added since. There is now OK Lab and OK LCH. These color spaces are pretty much 95% the same as Lab and LCH, but they've been created with special adjustments to the blue spaces so that gradients and interpolations inside these spaces stay within the perceptual hue better. Or one could say that LCH and Lab poorly transition from blue to white. They kind of go purple in the middle. So these new color functions OK Lab and OK LCH, they don't. They transition a bit more true to perceptual color from blue to white. Yep, excellent recap. Gray has also been removed. So there was a function called gray, G-R-A-Y. You'd pass a percentage inside of there, and it was essentially a convenience function for accessing grays from a perceptually linear space like LCH. And the way forward is just use LCH, like LCH, open parentheses, 50%. I feel like perceptual is one of those words like specificity that's hard to say. Perceptually linear. What reminds me of Point Pleasant Police Department? Have you seen that skit? No. Oh, they just exclusively. Excited to be after. I will. They talk in all words to start the letter P and they do it while they're eating food and they're just like spitting on each other while they talk about things and it's very funny. It's an SNL skit. Nice. Worth the time. OK, well, let's talk about color manipulation now. There's been some stabilization around color functions and color manipulation that's really exciting and can even be tried in browsers like you know saying with some experimental flags turned on or poly-filled with preprocessors. What's the first one you want to talk about here, Yuna? Well, let's talk about color mix. Color mix is awesome for mixing colors together just like it sounds. You can mix in black and white if you like, or you can mix two colors together like hot pink and Rebecca purple. It works as simply as using the color mix function and the imprentices stating the colors that you want to mix. So color mix, it's color dash mix and the imprentices white comma red would equally mix white and red together in the LCH color space. It could also be written explicitly without shorthands or default parameters clearly articulating the color space that the function should keep 50% of the white in and 50% of the red in the mix. So you could write color mix and then imprentices in LCH comma white 50% comma red space 50% and then close parentheses. So you could also state the color space and you have flexibility there with the available color spaces. Nice, and color mix can also scale up to complex cases like mixing colors with alpha, mixing colors in custom color spaces and much more. And as a final syntax tip with this color mix function, we've mentioned the percentages that can be passed with each color. This percentage says how dominant that color should be while mixing or rather how much of this color should make its way into the final result. And you don't have to specify the percentage for both colors. If you emit the percentage for one of the colors, it'll automatically be assigned the remainder of the weight. So here's an example of that with color dash mix open up parentheses white space 25% comma red. Now the mixed result is more red than white because we said that white is 20% of the mix. Red is then assigned 75% to total the two mixed colors to 100%. So here's another example kind of reversing it. We have color dash mix open up parentheses white comma red space 25%. Now the mixed result is more white as it's now 75% of the mix. Nice. So there's also a function called color adjust. And if you've been reading early versions of the spec, it's worth noting that this function color adjust has been removed. However, there is the relative color syntax that has all of the same features and even more. So the relative color syntax isn't a function, but it is a way to create a color from another one, which when it comes down to it is pretty similar to adjusting colors. So the basic syntax is say you wanted to work in the LCH color space, you can say LCH and then parentheses from space red space L space C space H. This creates a new color in the LCH space from red and returns the LC and H values for use in calc if you wanted to make any adjustments. Yes. So here's a relative change to the lightness of red using the relative color syntax. We say LCH open up parentheses from space red space calc L minus 20% space C space H. So this returns a new red color that's 20% lighter where the lightness adjustment was done in the perceptually linear space of LCH. So it's relative change because we took the current lightness, which is stashed in that L value and subtracted 20% using a calc. So here's another example, though, that's an absolute change where we're not going to use calc. We're just going to change one of the channel values. So I'll say LCH open parentheses from space red space 20% space C space H. This creates a new dark red color by setting lightness to 20%. It's not a calculation. It's just a reassignment, which is what makes this an absolute change to the color and not a relative one. Nice. So speaking of reassignment, so far we've only worked inside of LCH. But there is a classic use case when working with color and CSS, and that is somebody wanting to add alpha transparency to an existing color value. You might have a color value in your theme colors, and now you want to add some opacity to it and not have to use the opacity property for the entire element. Because that doesn't always make sense. You often want it just on the color value. So you can use this relative color syntax to do that. And let's do an RGB example since we've been working on LCH. Say you want to do RGB. You would have RGB and then parentheses from space red. That's the color that you're working in. And then you would specify RGB with spaces in between. And then you would add a slash and 50% and then close the parentheses. So this would create a new 50% transparent red from that hex color. And it creates a new color that gives an initially opaque value, this initially opaque red color, some transparency to that 50% red. So that use case is solved by using this syntax. Yep, I cannot wait for that. That is going to be really nice because it seems like we always get opaque colors from a design system. And there's always these edge cases where you're like, oh, but I want it 25% here. Maybe I want it in a box shadow and boom, relative color syntax for the win. Yes. There is so much more to talk about in this syntax. But here's another fun use case before we go. I'm going to work in LCH again. So I'll say LCH, open parentheses from space blue. So remember where we're saying blue here can be any color in any format. The starting function that we call LCH is the type of color that we're going to return. But we can work with any color inside of there. So we can pull a color from those. Anyway, so I want to say LCH from blue, calc L plus 60% space C space H. So this creates a new light blue color that's 60% lighter, where 60% is a healthy average amount of perceptual lightness change to pass Wicked2. So you can use this like a pseudo color contrast function. Speaking of which, Yuna, tell us about the color contrast function. Someone say color contrast? The color contrast function was in the color level 5 spec. But due to some concerns with the Wicked2 algorithm and changes, it has been moved to color level 6. So for now, since it's not stable and Adam's been working on a couple of adjustments to it, we'll just share with you the high level features that this is going for, so you can know that it's on the horizon. In fact, you can try out an early version of this function in Safari Tech Preview by enabling flags in Safari TP. And Adam's made a few demos with it, which we will include as links in the show notes. So color contrast wants to help authors meet accessibility criteria without having to analyze every single color decision themselves. It does that for you. And this could be around text legibility, like ensuring double A or triple A contrast ratios are met. And there are even more contrast algorithms that it could potentially adapt to. But it's also helping interfaces adapt to user preferences or just create color schemes with appropriate contrast more easily. And usage will look something like this. This isn't the final syntax, but it's just the general intent. So it might look like contrast color or color contrast. We've been discussing what the name would be. So say it's contrast color and then in parentheses, you would have a color value versus a color list. So that might be white versus blue, comma dark blue, comma light blue. And now you're specifying what you're contrasting against. So that first color would be the parameter and it could be like a background. Depending on where you're using this, you might be using it on text, you might be using it on a background. You state the color value and then the color list. It is also in the spec right now an option to include the contrast ratio. So you could set the actual ratio that you wanna contrast it by, that might change, there might be auto values. Again, this is very much a work in progress, a lot of discussion about it right now, but the intent is for the browser to really give you the user an easier way to set contrast ratios, to set accessible colors and to build your interfaces to be accessible by default. Yep, and it has, it's gone through a few phases and I think it's super cool and I can't wait for it, but I appreciate the amount of churn that's happening on it right now. But it has a couple of features to figure out before it's ready to prototype with again. And one feature is there's a WCAG3 color contrast requirement that's getting worked on. Maybe you've heard a bit before. And so there's competing more modern methods for what is color contrast. Like for example, WCAG2 doesn't do anything with opacity. You can pass in and compare two colors that are 0.1 opaque. So they're like hardly visible colors and the color contrast of WCAG2.0 just compares those colors as if they had no opacity. So it's not necessarily trustworthy in those scenarios. And it's unlikely, but maybe this function could work with gradients too. Like if you pass a gradient as the background color, could it find what color passes the target ratio on top of that gradient? So we have like contrast strategies. We have opacity and we have gradients and probably a couple other little things in there to work out before this function really is hardened and ready for production. Yeah, that was a lot of color talk, but thank you for sticking with us. It is some really exciting stuff coming down the pipeline on the horizon for CSS. And I'm really excited about it. We will keep you informed as things change and as things land. Absolutely, I'm stoked on it too. And if you have any questions about color or color functions, we'd love to hear what they are and answer them on the show. Just tweet us with the hashtag, CSS podcast. Follow us online for more about color as things are changing, more info, more demos, more landings. You can find me at yuna at UNA on the Twitters. I'm on Twitter at argilink, A-R-G-Y-L-E-I-N-K. Your question, it could help a lot of people. And if you liked this show, follow along. Give us a review on whatever podcast app you're using or share our podcast with a friend or coworker. That is the best way to help other people discover our show, which means that we feel validated and we can spend more time making sure that you're in the know on the features that are landing in CSS land. Motivation for more content. Thanks, y'all. We look forward to your questions. And we'll see you next time. Bye, y'all.