CSS Color Functions

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott

key.

Welcome to Syntax.

In this functional color CSS episode of syntax. We're gonna be talking about CSS color functions.

We we've talked about these before. We've had a few episodes talking about color functions, but this is going to be straight up practical stuff. With me, as always, is Wes Bos. Wes, what's happening, my man?

Pretty excited about the CSS color functions. Yeah. Like Like you said, we talked about it on a show and that was just kind of reading the spec as to like what is going to be coming.

And you can go back and listen to the episode. We talked about all the new color profiles and what that means. But now we are in a spot where it's starting to come specifically Safari leading the pack here and rolling a lot of these things out. So we're going to go through kind of 3 things that you yourself are going to be able to use very soon in your CSS to work with color functions. And man, I've been waiting for this for so long. Being able to take a color and make it darker, lighter, add opacity, figure out, mix 2 colors together. All those stuff that we could do in SaaS, like, 8 years ago or 15 years ago.

Now We should be able to do it dynamically.

Exactly. And that. It's not like, oh, finally, we are at par with SaaS.

This is dynamically.

So let's go through them and we'll provide some examples here. The first and probably the most exciting one. Sorry. Before you get going with that,

let's talk about the benefit of that dynamicness.

The the benefit of it being dynamic is that you can have full systems of color based on a few color values. Yeah. Right now, SaaS wise or whatever you're preprocessing that all that out or what most people opt to do is just to hand code. Now you have all these hex values because hex is like, a decent color space so you have all the hex values for, you know, black 1, black 2, black 3, black 4, whatever. Right? But now you can have all of these things based off of the color automatically,

dynamically. You could yeah. I just made a little TikTok tweet tip, And I made an entire website based on 1 hex code, literally 1 input. And then you can click on that input and scroll around the color wheel and then everything else is calculated based on that. And this is something I asked a while ago. Is that can you programmatically create nice colors? And the answer to that is kind of, yeah, but most of it is subjective. So unfortunately, designers are not out or not, unfortunately, but

not out of a job just yet. Unfortunately, we haven't kicked those designers to the curb. Exactly.

So let's talk about the first one, which is the relative color syntax.

So the way that this works is you are going to specify a color and you can specify it in any color space you want in RGB, HSL, OkayLab.

What's what's the other one?

Oh, HSL.

No. I said that one. Yeah.

Okay. There's lab, OKC, okay lab. There's a bunch of different color. Yeah.

Which is really cool, because now that those new color profiles are in chrome, you can just take your like existing gradients, convert them to the new color spaces, and they look nicer. There's, like, more colors available to you

inside of those color spaces, and your gradients just look a little better. There's less color banding. Yes. Very nice color banding. Yeah. It's when a gradient you can sort of, like, see the steps in the gradient, and different color spaces give you way less banding.

So the way that it works, I'm going to use HSL as an example. You say, background is HSL, and then you say from And you pass it a color, and that color can be anything. So you could say HSL from pound BADA 55.

And that's a hex code and you what it will do is it will take that hex code and convert it into 3 variables H, S and L, and it will give you each of the channels for those. Then you can give it back those variables. So you can say, like from this hex code HSL, and that basically just converted it to HSL. Didn't do anything, but the power of it is that you can then pass those HSL values and you can pass them to calc. So most likely you could take the L, which is the lightness of your HSL, and you could say plus 20% minus 30% and you get lighter or darker values. Or you can tack an alpha channel onto that as well. So you could say, Okay, well, give me this color, but 50% opacity. Right.

And that's the dream. It's amazing. That's the dream right there. Yeah, I love it. And then you can also I figured out there are 3 different ways to create nice looking colors based on what you have. There's complementary color, which will does it look just to pull the 1 on the other side of the color wheel? Exactly. You take the hue and you add 180 degrees and that will just flip it on the color wheel.

But there's also triadic colors, which is Yep.

You subtract and add 120 degrees.

There are tetriatic, which is it gives you 3 more colors, which is 90 degrees. Basically, if you picture a square Over top of the color wheel, you take your 1st color and then you fill in the other 4 points of that. So I basically made All of those and put them into 1 website, and then you scroll around on the color wheel, and it just populates all the colors and they look really good. Like it's kind of cool. Like you can go lighter and get all the Easter colors. You go darker and get some some pretty neat ones.

So that's gonna be a game changer. Being able to use relative color based on one value. Now we just need functions

so that you could scoop all of this stuff up and say, hey. Put it into 1.

To a saturation function or a d I guess we already have 2 saturation filter, but you know what I mean. Yeah. You know, like, you want to be able to actually parse the value and not just tell the browser to Apply a filter on top of it once it's rendered, right? Correct.

Yes. That's what I'm talking about. So along with relative color is the possibility that, Like, my example is okay, but at a certain point, if you if your text is a specific color, At a certain point, your text is unreadable on the background, right, because they're too close to each other.

So there is another function that is going to be coming. It's called color contrast.

And this is the relative relative colors part of CSS level 5 CSS color level 5 and color contrast has been bumped to CSS color level 6, so we probably won't see it as soon, which is a bit of a bummer.

But what this will allow us to do is you can pass it a color and then you can pass it an array of additional colors. You say black verse and then you give it an array of colors. And what the browser will do is it will pick the one that has the highest contrast for you. So I gave it the background of my swatch.

And then I passed it the lighter version and the darker version. And I said, just give me the one that has The best contrast based on how this has been calculated. It's calculated all the way down, and that worked surprisingly very well. At certain points. It started to get a little bit blurry. And I said, for sure that that won't pass the accessibility color checker. But I looked into the spec, and apparently there is a proposal to also pass a minimum contrast.

So you could say, Okay, Give me the best contrast out of these 3. But at a minimum, I need whatever the accessibility minimum contrast value actually is.

And that's the dream there is that you can calculate everything but you you know that you might not accidentally

make it unreadable somebody. Wow. Yeah. And it looks like this is, it's in Safari behind a flag right now. I don't know to what degree that API is in Safari. I'm sure you've maybe looked a little bit into more of that.

It's fully featured?

Yeah, fully featured. It works great.

You just have to go to when you're in Safari, you go to develop, and then there's a dropdown that says experimental features And you could just check it and it turns it on. Obviously, you can't use it in applications or unfortunately can't use it in production just yet. But If you're playing around with the relative color stuff, you probably also want to use the color contrast function. Man, this is something that like,

You know how much JavaScript this is gonna save some people? This is amazing. Yeah.

It's a really, like, how how CSS should be. I think every new feature in CSS should be you know how much JavaScript this is gonna save us?

Oh, man. The next one we have here is color mix, And you pass it a number of things. 1st thing you pass it is which color space you want it to be in.

So give me this color in Is that the output? Yeah, Yeah, in HSL, in RGB, in LCH, and then you pass it your 2 colors, and it will mix those colors together. You can also tell it I want it to be 20% plum and 80% pink, And it will mix them accordingly. So that's similar to the, like dark the darker color function. But now you're literally just mixing them together, which could make even nicer colors at the end of the day. We need some math people in here. Yeah, there's you can also pass the hue interpolation method, which is shorter, longer, increasing, decreasing.

It's funny. I had to even to learn what, triadic and patriotic colors work. I do a little bit of research into color theory. But it's pretty interesting art class. Yeah.

But it's it's nice because you can mix you can mix white into specific colors. I don't know.

I I should do an example of, like, mixing them 10% at a time into white versus making them 10% lighter Over time and see do they look similar or not. But, color mix is currently already in Chrome.

And it's behind a flag in Firefox, behind a flag in Safari.

So like, we're almost there, you know, like, I probably start to see color mix.

I don't even know if what is color color module 5 is still an editor's draft.

So it's it's kind of funny that it's it's in all the browsers, and they have come back to this color mixing and color relative a few times, but I think we've got the final spec. It looks like it. Now we're starting to see it in all the browsers. So probably 6 months from now, we'll start to be able to use it. Yeah. I can't wait to use some of these things that will really, like, blow up the,

the whole themes via CSS variables, functions, and everything that I'm doing right now. It's gonna make so much of that stuff easier. I'm wondering, Wes, with this, either relative color stuff and the color space things.

Did can you pass in For the relative color stuff, the color space, did we did we talk about that? Well,

the color space you choose is the function.

So if you want it to

be in so that's just the output. I guess I'm wondering is, like, because sometimes the the colors that are easy to author or to manipulate about such as HSL. Right? HSL, huge saturation lightness. We know and are changing that, saturation or lightness value exactly what those are doing. Right? Those are really easy to author, but the color space output isn't as good as something like Okay Lab. So, like, do you just end up wrapping all your stuff in, in the color mix Okay Lab? Like, you just end up having big functions of color mix all the time?

Well, you would wrap it in a lab function. So instead

of giving yourself. You would wrap it in a lab function.

Instead of giving instead of saying HSL from pink, you would say lab from pink, and then it will give you the LA and b values, which you then have to I know they just sell to you better about. Yeah. So what is let's look at it. What

is lab colors? I guess what I want is I want the authoring of a color to be separated from the,

the output, essentially. Yeah. Well, you should be able to wrap it twice then, like if you want Or what you could do is stick it in a variable, do all your calculations in HSL because that's what you're comfortable in, And then you would have a 2nd variable, which would be your lab representation of it.

And basically you pass in the color and simply just return the LAB values without touching them. And that will then convert it from the 1 color space to the 2nd, which is not a bad idea, because then Automatically all your gradients are are looking much better. Yeah. Yeah. But maybe I should just learn how to specify color

with okay. Lab. You know what? When when we got HSL, I was, like, finally, a a color space I can manipulate by hand, and have it like know exactly what I'm gonna do. But then the end result is it's like the worst color space in terms of actual output quality. So

Bummer on that one. Yeah. Yeah, you're right. And also, why can't the browser do that for us? Maybe because maybe because people don't want that, you know. Maybe people do want Right. Yeah. The other color space. People want to be able to control their color space, But I don't want that. I wanted the browser to pick the one that looks the prettiest. A l c h. There's so many. It's it's worth diving into. Maybe we'll do another show just explaining those sort of new color spaces and how to define them because, yeah, you get such better gradients. It's not it's only in Chrome right now, so you would have to specify it first in HSL and then inLab or LCH or you could use a supports

query to check if it does support a specific color space, then apply it. Yeah. And I'm gonna you know, last time we did an episode on these color functions, I had a link to a better color tools.

I'm gonna link this again just in case you haven't seen this better color tools. It's a way that you can really see exactly the difference between these Mhmm.

Different color spaces and how they look, LMS, linear RGB, sRGB, o okay. LCH. Yeah. Interesting. Alright. That's it for today. Anything else to add, or should we wrap it up? Let's wrap it up. I'm once again, I'm excited for this stuff, and I I can't wait for all this feature CSS to drop. And, I'm sure we will let you know when it does.

Ace.

Head on over to syntax .fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.