 Hi, and welcome to the CSS Podcast, where we cover all things CSS from accessibility to Z-index. And this season, we're answering your questions and helping you resolve some of those CSS frustrations. And today, we're talking about color, and specifically gradients, which are everywhere on the web right now, so hot right now. But we want our gradients to look just right, to look vibrant and vibing, and not have money or desaturated values in them. We'll help you rejuvenate your gradients, as if you took them to the car wash, cleaned off all that grit, and restored the color back to your car, or your gradients. Nice, I want that car. It's like there's so many gross versions of this, like we'll make it not undead, you know, like we'll take your zombie gradient and we will make it fresh and alive. Yeah, we want you to have shiny cars, right? And hopefully you know what we mean. We want you to have phenomenal color in your apps, right? And sometimes that can be hard to do. So while it's not required for today's episode, it's still a good review to check out some of our previous ones, like episodes six and seven on color, episode number 21 on gradients, and just like all this super deep dive syntax jujitsu you could want. And episode number 55 is a mini episode with Jess Lynn on DevTools of Color. And half we've got a lot of shows. And then 62 on the updates to color functions. So go back to those. If you're a little confused at some of this stuff we say, because we're going to kind of assume that you've at least got a light background on that. But let's get into the workarounds and reasons you might have some dull color. Yeah, and also really good callback to all of those episodes. We've now been doing this for a while. We've got a couple of years of podcasting under our belts and a lot of episodes. So definitely check out those older episodes if you're new to the show because they're just as relevant, especially some of the core concepts. So speaking of relevance, this also applies to color mixing and adjusting colors in general. So if you're creating color themes, that's also relevant. This most commonly appears in design systems too, not just gradients, whether you're either creating an entire multicolored banner component or card or dynamic color system based off of an image or a single color or a user's custom color picker to personalize experiences. This is some handy color info that we're about to get into and that we've discussed in those previous episodes. Ain't no lie, muddy colors, bye, bye, bye. It's like in sync. Our colors are in sync. They're. Oh, nice. Dang, I don't know. Let's just go in somewhere. I'm glad you brought up mixing and just adjusting colors in general because we've got like relative color syntax coming. There's also animation. And really what this all boils down to is interpolation, which is one of my favorite words to use in like a scrabble game with your friends and family. They're like, what do you do at work? I'm like, interpolation and interpolation is a good word. Dang, that's a big word. I'm like, yeah, I can even tell you what it means, which is fun also. Anyway, interpolation is generally the root of like all the color problems. The colors you specify aren't as important as the space that you're moving within, right? You're moving from a space when you're mixing, when you're animating, when you're doing a gradient. So like this is like a fun, heady way to think about it is a mix is a single interpretation or a single interpolation in a color space. So it's like a one moment in the whole interpolation. Like you have blue and white and it's just like one sliver from that. That's what color mix give you. Well, a gradient is a combined sequence of mixing, visualized over time as one moment. It's just nice sounds epic. I don't know. And then even cooler to think about is like how color animation is like a color mix over time or a gradient one shade at a time over time. And all three of these different color coding tasks involve interpolation and can be subject to some issues. So interpolation is often described as something like moving through color, right? You're like, oh, I'm going to move through color like you're swimming. You do the backstroke through your color. And I think this is a good way to talk about it because you kind of do that like you do. That's what interpolation is, you're moving between two spaces. And so it kind of sounds less scary when you say you're swimming through it and moving through it. But it's fun because it's kind of close to how the math works. And we go pretty deep into these topics in these previous episodes. So if you're wondering like some of this stuff, go ahead and jump into those. But I did want to stress the importance on interpolation on the results of a gradient or color mix. Yeah. And if you've heard of the word interpolation before, but not necessarily in the context of color, that's because interpolation is generally the movement from one value to another, so that value could be a color value. It could also be a number value, a percentage value. You could interpolate scale to where you're moving from one thing to another. So this happens all the time, as Adam mentioned, in animations, like all over any interactive piece of UI. If you're going from one value to another, and then we talk about certain values that are interoperable, where they can move from one thing to another, there are certain CSS properties that are not interoperable, which are discrete functions like turning on or off a mixed blend mode. You can't really smoothly interpolate from one value to another. So the thing that you'll see all throughout the UI. So if interpolation is the root of all the mud, knowing features of a color space can help you to pick the right one for the job when you're interpolating color spaces. And the common thing that people feel is innocent enough is mixing white into a color to lighten up. That's something that we see all throughout your eyes mixing a dark shade or a light shade. And while you may have been happy with the results so far, what you might not have tried is doing the same thing in a different color space to see if you like the result better. So we've got a little demo here that Adam made that explores just that. And it's got all of these blue squares. And all those blue squares have they're in a grid and they have a color space label on each of them. And when you hover over each of the blue squares, you see them lined with white by 20 percent. And the results are pretty surprising. If you look at HSL or OKLCH, you see a purple hue or HWB in lab. LCH is more of like a magenta almost. It gets rosy in there. SRGB shows you a little bit of a sort of lightened value. So it be as though you decrease the opacity of this blue, for example. And then SRGB linear is even brighter. And then finally, well, XYZ before I get to OKLAP, XYZ looks like SRGB linear too. Pretty similar. But then OKLAP is this really beautiful like light blue sky blue value. So you can get a sense of where things look unexpected. You would just think that mixing white by 20 percent would be a lighter blue. But in some of these cases, it turns purple, turns more vibrant. You get a different color space that you're interpolating through. And Adam did set this demo up to show some of the worst hue offenders for interpolation, but it's also interesting to note that something like OKLAP, like in this case, might be your best bet in general for color mixing. So the tips that we have here generally for mixing and for gradient color spaces or color mix is to generally use OKLAP but also test OKLCH because you might like the vibrance of OKLCH more than OKLAP. In this case, I think it tends to be a little bit too purple, a little bit too energetic and too vibrant. So I would pick OKLAP in this case. OKLCH can get weird. But definitely test at different color spaces. Now is the time to explore, especially if you're building color systems or gradients. This is it was a tricky demo I set up. I knew what I was doing. There's kind of ways around it. Like if you don't mix exactly with white and you mix with, let's say, HSL, where you say instead of numbers, you put none in there. So hue, none, like the keyword none, saturation, none. And then lightness, you do 100 percent to indicate that it's like a very light color. You do get better mixes, but that's just not what people are going to do. And we're going to fix that. The browser is not done with all the color mixing stuff yet. So just know that some of these are extra quirky and they're kind of quirky because some of the web platform tests could use an update. The spec is going to get an update. We're learning as we go, the super advanced color scenario on the web thing is going to get better. I also remember, I don't know if it's still an issue now, but mixing with transparent ingredients or in other scenarios like with color mix, you could get unexpected results because that transparent value could be a transparent white or a transparent black. So the values in the middle are interpolated through a different color space. Well, not different color space, but a different set of colors to get to transparent because you have to go to essentially alpha zero. But the way that you do that could be a variety of different ways. So it's probably safe to specify the way that you want to move to transparent because transparent is just a CS keyboard. And I remember a while ago, there was interoperability issues across browser, different browsers went through different ranges. Some were transparent black, some were transparent white. I don't know if that's still an issue. They fixed it and it was called a pre-multiplied or like you had to pre-multiply before you do the thingy. I don't know, it went over my head, but they kept saying pre-multiply. I actually remember that was the issue. I don't remember. So I think I think they had to do some sort of calculation up front before they did the thingy and and that fixed it. And it was in the spec to pre-multiply first. So that was nice. But yeah, the stuff's tricky, right? So but the color space does make a difference. And even if the demo is like slightly, you know, skewed in terms of like trying to influence you, it is still an indicator, though, that the color space does change it. And that's not going to change even after the bugs get fixed. OK, so you went over color mixing and interpolation and all that sort of awesome stuff. I'm going to talk a little bit more about gradient specifically and color spaces and some of the issues that you can run into with like a gradient. There's like two main things to be looking out for. There's color distribution and saturation consistency. And these are just words I'm using to describe it, but there's probably better ways. But like color distribution, some color space is packed the darkest of the colors or the lightest of the colors into small areas of the beginning and end of the gradient. And it's and it's just not the distribution you wanted or expected. Like, let's say you went from like black to white and there was a huge chunk of medium gray and then like itty bitty, super dark gray, the one side and super light white. And you're like, hey, I wanted like a smooth distribution. It goes and give you some sort of easing curve on there. You're like, I don't want the easing curve. So that could be like color distribution. And this could be tailored by adjusting the color stop position, right? So you've always got the option to like move the color stop, so move color black to position 25 percent or something like that. Now it will be black all the way up to 25 percent and then it will be dark and you can kind of affect it this way. You can also do that with a color hint. So a color hint specifies how to transition between the two colors. But it's still like the point here is like, start out with a good base. Don't go in there, hacken your perfection against a bad base, build on stop on top of a strong foundation. Then you have to change your color stops based on the interpolation of the color space. And you want it to be more consistent. Absolutely. And so then there's saturation consistency. And this is what we mean by like mud and decay and desaturation and death, flesh and dullness. And this was just where I was like, I'm going to a dark place. Thinking of all the words that you can describe these gradients. But your gradients can suffer from both of these things like this color decay, this this lack of saturation, or it can be the the way that it's distributed. But you can also debug these issues with new color space skills. And so we're going to give you some tools to help you hack around these things. And so for a bummer color distribution, try spaces like X, Y, Z lab or OK lab is they don't tend to overly pack the start and end of the gradient. But let's say you did want that type of gradient packing. You can try SRGB linear. That one is like from my observation in the most extreme of packing at the edges. So it's got this really long middle range, like let's say you wanted the middle range to not have that much of an effect. And then the edges were like, Starchy. You could pick that one intentionally. For bummer, dead zone, suffering gradients consider OKLCH or OK lab, which the most modern space in CSS offers to remedy this particular case of like muddiness and death and decay and morbid morbidity of your color. Now we know where Adam's mind is. And then last year, you can also patch the entire issue and by guiding it so you can add an additional color stop in the middle. So if you went from blue to white and you got purple in the middle, you're like, OK, let me just hold your hand a little bit more. I'll add another color stop in the middle that I manually chose between blue and white and made sure that you didn't go purple. So that way it avoids you can kind of like steer the ship as it's making its trek from one mountain to the other. And it can be a strategic way around the issue. But it is also a patch and it doesn't always work. Sometimes you're like, oh, I have to add another stop. And you're like, oh, I guess I'll add another stop. And then you're all of a sudden you're like, I don't want to be managing all these stops. I just want a color space that does it right. So. Yeah. So those are all actually also very good debugging techniques. If you're using the color mix function, too. I mean, with the exception of the last one, because you can't add additional color stops to to fix it and add a little patch there to fix those parameters. But with color mix, this is a really useful function for mixing two different color values and you have to set the color space here. It's the first parameter. You have to put that into the color mix function. So as I mentioned earlier, OK Lab and OKLCH are usually pretty good places to begin exploring adjustments to your color mix results. OK Lab just tends to be the most consistent with what you want. OKLCH tends to be a little more vibrant. And it's really a good time now to try the stuff out and to get your hands on the color mix function on exploring these color spaces and gradients and explore all of these new features that the web platform has to offer now in 2023. And it's kind of nice that with color mix, you require to pass the color space parameter. You have to think about it. So it's definitely worth experimenting with. And that brings us to the end of the show. There's also some great dev tools that you can use to debug color. You can explore different color spaces and dev tools. You can play with gradients and dev tools. There's a bunch of different things for you to explore there. Adam gave some really great debugging tips for if you're feeling stuck and muddy and stuck in the mud with your gradient and with your color functions. So thanks for joining us on this show. Hopefully we helped you to explore interpolation of colors and figure out how you can remedy a dying muddy gradient or color mix. We'll have a bunch of links in the show notes as well to explore further and to play with that demo that I mentioned in the show. Good call. Thanks for joining us. Yeah, thank you all. And if you have any questions, we'd love to answer on the show. Just tweet us with the hashtag CSS podcast. Hashtag I'm at you know that's at you and a I'm at our guy link ARG YLE INK and your question could help a lot of people. Yes. And if you like the show, please give us a review on whatever podcast app you're using or share this with a friend or a co-worker. Because those reviews are how people find the show. And that means that we can help more people debug their muddy gradients. Nice. And now I'm just thinking about pulling bugs out the mud. And then I'm like, maybe I'll go make a muddy gradient. That sounds like a fun thing to do. You got to make a demo with like little bugs in the middle of the gradient. Real mud in the in the real world. I'll just go with my kids make a muddy gradient with some bugs in it. All right, we'll see you all next time.