605

April 24th, 2023 × #CSS#Design#Accessibility

CSS Color Functions

This episode covers practical uses of new CSS color functions like relative color, color contrast, and color mixing. Wes and Scott are excited about the possibilities enabled by modifying colors dynamically in CSS.

or
Topic 0 00:00

Transcript

Announcer

Monday. Monday. Monday.

Announcer

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

Scott Tolinski

key.

Scott Tolinski

Welcome to Syntax.

Scott Tolinski

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

Topic 1 00:29

CSS color functions

Scott Tolinski

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?

Topic 2 00:49

Excited about CSS color functions

Wes Bos

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.

Wes Bos

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.

Topic 3 01:01

Background on color profiles and specs

Scott Tolinski

Now We should be able to do it dynamically.

Topic 4 01:42

Dynamic color generation

Wes Bos

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

Wes Bos

This is dynamically.

Wes Bos

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,

Scott Tolinski

let's talk about the benefit of that dynamicness.

Topic 5 02:00

Benefits of dynamic color generation

Scott Tolinski

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,

Topic 6 02:32

Full color systems from variables

Wes Bos

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

Scott Tolinski

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

Wes Bos

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

Topic 7 03:14

Relative color syntax

Wes Bos

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.

Topic 8 03:30

Color spaces like RGB, HSL, LCH

Wes Bos

What's what's the other one?

Scott Tolinski

Oh, HSL.

Wes Bos

No. I said that one. Yeah.

Wes Bos

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

Wes Bos

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

Scott Tolinski

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.

Topic 9 04:09

Make colors lighter, darker, add opacity

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Topic 10 05:41

Complementary and triadic color schemes

Wes Bos

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

Wes Bos

You subtract and add 120 degrees.

Wes Bos

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.

Topic 11 06:24

Game changer for dynamic color gen

Wes Bos

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

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Topic 12 06:51

Ensure text and background contrast

Wes Bos

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

Wes Bos

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.

Topic 13 07:15

Color contrast syntax

Wes Bos

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.

Wes Bos

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.

Topic 14 07:49

Pick highest contrast automatically

Wes Bos

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.

Topic 15 08:17

Minimum contrast accessibility options

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

It's fully featured?

Wes Bos

Yeah, fully featured. It works great.

Topic 16 08:48

Color contrast fully in Safari

Wes Bos

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,

Scott Tolinski

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

Scott Tolinski

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?

Wes Bos

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.

Wes Bos

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.

Topic 17 09:57

Color mix coming soon

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Wes Bos

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

Topic 18 11:07

Color level 5 module status

Wes Bos

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

Wes Bos

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,

Scott Tolinski

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.

Topic 19 11:36

Theming with new color features

Scott Tolinski

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

Wes Bos

the color space you choose is the function.

Topic 20 11:58

Color space input vs output

Wes Bos

So if you want it to

Scott Tolinski

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?

Wes Bos

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

Topic 21 12:37

Wrapping color functions

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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

Wes Bos

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.

Topic 22 13:33

Converting between color spaces

Wes Bos

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

Scott Tolinski

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

Topic 23 14:10

Wanting better color spaces automatically

Wes Bos

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

Topic 24 14:54

Using feature queries

Scott Tolinski

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.

Scott Tolinski

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.

Topic 25 15:17

Color space comparison tools

Scott Tolinski

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.

Scott Tolinski

Ace.

Scott Tolinski

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

Scott Tolinski

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

Share