CSS Color Functions

Different

Head

color spaces and how they look,

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

Ace.

LMS, linear RGB, sRGB,

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

like dark the darker color function. But now you're literally just mixing them together, which could make even nicer pink, and they have And this is the

which is shorter, longer, increasing, decreasing.

So it's starting to come specifically the output, essentially. Yeah. Well, you should be able to wrap it twice then, like if you want

I I should do an example of, like, mixing them I don't even know if what is color color module 5 is still an editor's draft.

method, 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 and color contrast has been bumped to CSS color level designers are not out or not, unfortunately, but

triadic and patriotic HSL, figure out, mix 2 colors together. All those stuff that we could do in SaaS, like, 8 years ago or 15 years ago.

colors at the end of the day. We need some math people in here. Yeah, there's you can also pass the hue interpolation is 10% at a time into white versus making them 10% lighter do they look similar or not. But, of my swatch.

It's funny. I had to even to learn what, Automatically all your gradients are are looking much better. Yeah. Yeah. But maybe I should just learn how to specify color H, S and L, in RGB, you can mix white into specific colors. I don't know.

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, convert them to the new color spaces, and they look nicer. There's, like, more colors available to you 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 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 explaining those sort of new color spaces and how

the whole

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

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, 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 then you can pass it an array of additional colors. You say black verse

6, so we probably won't see it as soon, which is a bit of a bummer.

relative relative colors part of CSS level 5 CSS color level 5 that's Give me the best contrast out of these 3. But at a minimum, I need

And then I passed it the lighter version and the darker version. And I said, just give me the one that has Safari leading the pack here if you if your text is similar to the,

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 a while ago. Is that can you programmatically So there is another function that is going to be coming. It's called color contrast.

Boss, and Scott

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,

In this 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? with okay. Lab. You know what? When when we got HSL, I was, like, finally, a a color space I can manipulate by hand, 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,

Welcome to Syntax.

Monday. Monday. Monday.

You just have to go to when you're in Safari, 180 degrees and that will just flip it on the color wheel.

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 which would be your lab representation of it.

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, 30% and you get lighter or darker values. Or you can tack an alpha I know they just sell to you better about. Yeah. So what is let's look at it. What Pretty excited about the CSS color functions. Yeah. Like Like you said, we talked about it

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

So give me this color in Is that the output? Yeah, Yeah, in HSL,

Like, my example is okay, but at a certain point,

And then you would have a 2nd variable,

the,

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

stick it in a variable, 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 So the way that it works, I'm going to use HSL as an example. You say, background So if you want it to channel onto that as well. So you could say, Okay, well, give me this color, but At a certain point, your text is unreadable

Or what you could do is for you. So I gave it the background Over time and see So the way that this works RGB, and scroll around the color wheel and then everything else is calculated based on that. And this is something I asked and then you pass it you are going to specify a color and you can specify it in any color space you want in But what this will allow us to do is you can pass it a color

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

LA and b values, color mix is currently already in Chrome.

which you then have to from pink, you would say lab from pink, more colors,

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,

functional color CSS

Yes. That's what I'm talking about. So along with relative color is the possibility that,

so that you could

scoop all of this stuff up and say, hey. Put it into 1.

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

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

website You subtract and add 120 degrees.

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

create nice colors? your

and then you say from And you pass it a color, and that color can be anything. So you could say HSL from dynamically. You could yeah. I just made a little TikTok tweet tip, And I made an entire

and you can pass them to calc. So the color space you choose is the function.

minus in HSL because that's what you're comfortable in, on the background, right, because they're too close to each other.

55.

And that's the dream. It's amazing. That's the dream right there. Yeah, I love it. And then you can also

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

pound BADA But it's it's nice because you can mix like, we're almost there, you know, like, I probably start to see color mix.

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,

of color mix all the time?

in the color mix Okay Lab? Like, you just end up having big functions

Well, you would you go to develop,

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,

add opacity, mixing and color get some some pretty neat ones.

Now We should be able to do it dynamically.

and rolling based on 1 hex code, literally 1 input. And then you can click on that input and then it will give you the and make it darker, lighter, 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 and it will give you each of the channels for those. Then you can

to work with color functions. And man, I've been waiting for this for so long. Being able to take a color 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 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.

I figured out there are

and different color spaces give you way less banding.

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

which is 90 degrees. Basically, if you picture a square There are tetriatic, which is it gives you 3 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

All of those and put them into 1 website, and then you scroll around

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, most likely you could take the L, which is the lightness of your HSL, and you could say plus 20% is HSL, And that's the dream there is that you can calculate everything but you

inLab or LCH

what's happening, my man?

What's what's the other one? whatever the accessibility minimum contrast value actually is.

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, Okay. There's lab, OKC,

Oh, HSL.

No. I said that one. Yeah.

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

I had a link to a better color tools.

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, key.

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.

you know that you might not accidentally

It's fully featured?

Yeah, fully featured. It works great.

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.

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

a few color values. Yeah. Right now,

The the benefit of it being dynamic is that you can have full systems of color based on make it unreadable somebody. Wow. Yeah. And it looks like this is,

let's talk about the benefit of that dynamicness.

This is dynamically.

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

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, And it will mix them accordingly. So Instead of giving instead of saying HSL So it's it's kind of funny that it's it's in all the browsers, 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

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

the accessibility 50% opacity. Right.

So you could say, Okay,

The best contrast based on how this has been calculated. It's calculated all the way down, or you could use a supports OkayLab.

in LCH, And the answer to that is kind of, yeah, but most of it is subjective. So unfortunately, do all your calculations wrap it in a lab function. So instead come back to this color a specific color, And it's behind a flag in Firefox, behind a flag in Safari.

plum and 80% colors work. I do a little bit of research into color theory. But it's pretty interesting art class. Yeah.

2 colors, and it will mix those colors together. You can also tell it I want it to be 20% color checker. But I looked into the spec, and apparently there is a proposal to also pass a minimum contrast.

on a show and that was just kind of reading the spec as to like what is going to be coming.