CSS5 Color Functions

CSD.

Welcome to Syntax on this Monday. Hasty treat. We're gonna be talking about CSS 5 color functions.

It's before everyone freaks out. It's not actually CSS 5. I just put that in there to get people riled up.

CSS has departed from doing major versions, And it is like CSS

level fire color level 5. That's the the actual spec, but I put it in there just Well, I heard some trigger when people like people just declared that Web 3 was Web 3. I think we can just start adding numbers on the thing. I think that's I think it's completely jumped the shark. It does not matter.

I there was something the other day. Jack Dorsey's pitching web 5. What happened to web 4? We're just jumping number, man. I don't care. Yeah. CSS, I guess, maybe 4 is stable, and then it's like node We're like the the odd versions are. Release.

Yeah. LTS.

Who are we sponsored by today, Scott? We're sponsored by Linode,

the perfect place to host your,

application. Wes, do you wanna talk About Linode? I do. Linode, cloud computing developers trust. You've got an application. You need to put your images somewhere. You need to run a whole bunch of processes.

Guess who has the boxes for that? Linode has the boxes for that.

They've got products for literally everything you want. It. Probably the most common one is I've got a Node. Js app. I wanna host that thing somewhere. Well, you can go ahead and get a Linux server. You can get them preconfigured with Node already on it, or you can go the route of installing Node yourself. They've got lots of really good documentation for that. And then if you need anything else past that, they've they've got it. High memory, high GPU, DDoS protection, block and object storage, backup, my they got MongoDB, MySQL, Postgres. You name it. They got it. And they're gonna give you $100 in credit. So go to linode.comforce.syntax to get that $100. Thank you, Linode, for sponsoring.

Alright. Let's talk about, I went down this this rabbit hole the other day where I was like, I Want to I have a color Mhmm. And I wanna make it transparent.

I wanna I wanna take this this specific blue and make it 50% transparent or whatever. You know what I mean? So I was like, okay. Like like, we had that in Sass, like, 26 years ago. Can we have that in CSS now? And I knew that, like, it was it was sort of been working on, but I never, like, really looked it up.

And so I sort of went down that rabbit hole since being like, hey. Look, where where are we at with this color functions In CSS, I just want to be able to take a color and make it transparent.

And I asked on Twitter and people are like, well, just use RGB. And the the problem with that is that If you have any color, of course, you can figure out the color and and make a transparent. But if you want to programmatically take A name, a hex, an RGB, an HSL, an LCH. You wanna take literally any color that you have, and not worry about it, And then perform operations on that color. Make it darker, make it lighter, make it somewhat transparent. Figure out a good contrast in color.

Those things are now coming to to CSS.

Let there's sort of, like, 3 things in this color module level 5 CSS 5 colors.

It. And we're gonna sort of go through those in this tasty treat today. Are you ready for this, Scott? Oh, I'm ready for it, but I'm not ready for it. It's Wes' spelling of the word color in our documentation here. What Wes wrote show notes, and he spelled color with a u

the correct way. The right way. Yeah. The way the rest of the world does it. It's funny, actually, I have that's one thing I'm very proud of is I can no problem switch From if I'm just if I'm writing the word color, I I put a u in it. And if I'm coding the word color, I don't put a u in it. And I have an immaculate ability Just switch between the 2 and never ever goof it up. You don't use the CSS Canadian CSS post CSS plug in? Yeah. That would be great. Just transpile it. It exists. It it it is real. It really does. Yeah. I I had it one of my, I did a talk on post CSS at one point, and there's, like, a whole preset for Canadians where you can do things like like we spell gray differently as well. Yeah.

Okay. So okay. Let's let's, where do where do you wanna start? Do you wanna start with this,

color mix? Yeah. Then where we wanna start, the color mix function. So this is something that, can be fairly popular as you have 2 colors And you want to be able to mix them together, there is a new CSS color mix function, where you it takes a a couple things. 1st, it takes the color space.

A color space is kind of interesting to me. So I went down a little bit of a rabbit hole in this and I thought, like, Okay. Like, as developers, we know about RGB, and we know about, like, hex colors. And and past that, I was always just like, like, why do we need more of them? Well, You can't describe every single color in just RGB.

There are more colors than can possibly be described by the permutation of what is it? 255 reds, 255 greens, and 255 blues.

So there is Adding to the browser, we're adding all these different color space.

Big, most popular ones being, lab, l a b, Okay. Lab x y z sRGB, sRGB linear. And from what I understand, Probably the one of the most popular ones in LCH as well.

And from what I understand, you can more accurately describe Colors. And where this will be very helpful to the everyday developer is gradients. So if you have a gradient and you want to be able to Gradient from green to darker green.

You know, sometimes when you have a very, like a big gradient And you start to see color banding in between them. Have you seen that before where you have, like, a gradient or maybe it goes from yellow to green and you CSC. Like

weird distortion or weird Yeah. Stops in the color. Sometimes it gets less saturated at at certain points in the the gradient or sometimes the gradient just straight up looks bad because of it's not, like, blending the color correctly. Exactly. And,

especially, Scott, You have the Apple monitor. Right? And that thing is able to to display all of these colors. Like, before that, we're like, it's Not a big deal. Literally, no displays can display all these possible colors. But now as displays start to get better and better, You're starting to see companies being like, can we be able to use these colors in the monitor? And that is going to be allow us to do it. So Using LCH or HSL, you can have much more vivid I don't know if vivid is the best word for it. But you can hit all those stops, And your gradients are gonna look like butter once you're able to do these types of things. And not only that, but there's also just a better looking,

like, So so I asked actually on Twitter a month or 2 ago about people's color systems and CSS variables. Just like what I was expecting was, it. Like, physically, how they're defining their variables, what they're naming them and stuff. But what that's not what I got. I ended up getting a ton of really good unrelated advice On, color systems in general and how, let's see. Let me pull up some of these these it. These tweets here, there there are some really amazing, resources that were shared that shows the difference if you're, stepping between colors and lightness And why, why HSL kind of stinks, which is unfortunately. Because, like, HSL From a developer perspective, being able to define lightness and saturation as just single values is really handy. It. But at the end of the day, it it kind of produces some of the worst looking worst looking colors if you were to just say minus this by 10, Minus this 1 by 10, minus this 1 by 10, whatever. So let me I'll have to dig through this to see because there's a lot of responses here. And, some there were some really amazing stuff that shows just truly how, how good the some of these, like, OkayLab and whatever Can make your your color systems look comparatively.

You know, we need to get Lea Veru on this podcast because whenever I do any Googling of CSS colors or gradients or anything, all of her work pops up. So, maybe we'll I'll I'll shoot her a DM or whatever because she has done she has an LCH color picker Online as well.

But, anyways, we're talking about color mix. What does it do? It mixes 2 colors. So first, you specify the color space you wish to mix it in, And then you give it 2 colors in the amount that which you wish to mix them together. So, this is probably not something you need to use every single day, but if you wish to Take 2 colors and and mix them together at a certain percentage.

I don't know. Make this a maybe it's good for clients.

I like it, but make it a little bluer.

Well, now you can programmatically make it a little bluer. And I I often think make it sunnier.

Make it sunny. I don't know if it will do that just yet, but I often wonder myself, like, can you programmatically make nice design? That's One thing I ask myself over and over again is if you were to take a, like a light mode, could you programmatically make a blue mode from that, you know, and, like, make it look good? Like, is Picking colors, something that can be done with math, or is it something that is an art? And, that's a question I'll leave I'll Send out to the ether there, and I don't know the answers to that, but this color mix will bring us 1 step closer to being able to actually do that. It. Have a really good blog post for you then, Wes. It's called color for the color challenged, and it's basically talking about the mathematical

kind of, like, what makes color look good, but also, like, kind of the math behind it.

Okay. How how things all fit and what makes a palette actually visibly good, and there's a lot of graphs involved. There's a lot of charts. There's a lot of, curves involved. So Yeah. Yeah. It's a really it's really fascinating article. It's a long read. If you're the type of person who wants to geek out on color, this thing will teach you everything you maybe didn't want to know about color, but at the same time, will totally blow your mind in terms of all of the different color faces and and what makes color look good. Okay. This is massive.

So what's the answer? Can you programmatically

Make nice colors? The answer is kind of.

Like, you can't do it with, you can't do it with with HSL. You can't do it, basically, with any of Tools that we have in the browser right now today. K. Maybe with some of these new tools, but that that's part of the problem we are trying to solve. And and the answer I got At the end of the day, it was you're probably better off using right now today. You're probably better best off using hex and then Putting the hacks through functions in SAS. There's a a a newer function in SAS that actually does it in a better job.

Yep. Or one of these online ones with OkayLab that will, like, generate the OkayLab colors for you with hex values.

A little self plug here.

I am a big fan of Benjamin Moore, and Benjamin Moore is a paint company. And they have my wife Scott.

My wife recently got the paint decks like it, like a fan deck of literally every single color that they sell. Kids love that stuff and so, so nice to look at. And I was like, I want this in CSS.

So I I made a website. It's at bm.westboss.com, and I I took Did you do that on purpose? Yeah. Yeah. Absolutely.

You know I did.

So if you go to b if you go to bm.westboss.com, you'll see that I took every there's, like, 4,500, Benjamin Moore colors and the the claret rose hugs and kisses winter melon, York Herbert yellow straw. And I turned them all into CSS variables and you can just click and copy them into CSS variables. And that was a very fun project. I scraped the Benjamin Moore API to do it.

But we're not talking about that. We're talking about the next one, which is color contrast function. This is something where you can give it, Two different colors and you can you basically say versus and then you say what color it will go against and it will return to you the one that has the better contrast. And this is going to be huge for accessibility sake is you don't have to like right now, for my bm.westboss.com, I had a programmatically on top of the color, be either black on light colors or white on dark colors. And this color contrast function will do exactly that for you. It will tell you, okay. Well, I'll I'll pick it for you,

and that's gonna be great for accessibility sake. I gotta tell you. This is like, I'm designing right now my my whole color theme where we're we've mentioned this a couple times. We're redesigning level up tutorials, And I really have, like, a fascination with designing systems to be themable. Right? In the last version of LevelUp tutorials, we had, like, it. Ten different themes the user could pick, including, like, a muddy ducks mode and stuff and a Wave Race 64 theme. I mean, we had a lot of fun themes on there. And CS. The biggest the single biggest issue we had in our theming system was when you have a dark and light mix, dark and light theme kind of mix where you want the the font color to change based on the background. Yes. And in Anytime I hit bugs, a visibility bugs, it had to do with that. And it would be so much nicer just to say jump ball, which one's good, whoever Whoever is the best congress, take it.

Yeah. Yeah. Yeah. That's exactly what what this will do. I I love it. I tried programmatically flipping the color, Like on a on the color space, it looked awful because, like, you would have a purple and then it would flip to this ugly green. So I ended up just doing either light or dark. And then I put, like, a 80% opacity on it so that it it at least a little bit of the color from it Would would sort of bleed through.

But let's go to the next one, and this is this is the big one. This is being able to programmatically Alter colors, the way that you are used to doing with Sass. If you want to lighten, darken, opacity, what what were the other things you could do or blacken whiten.

So what shade? Tint shade. Exactly. Like you want to do any. You want to take a color and you want to tilt it Anywhere you want programmatically, and you're going to be able to do this with CSS with the from keyword. So the way that it works is that you make a variable or you say background red and you say RGB.

And normally with RGB or or and this will work for HSL. It will work for LCH. I'm I'm just gonna say RGB here and imagine you can do this with any color space. So RGB, you say from, like, let's say from Dash dash level up purple. And I take the level up purple, and I wanna be able to, change it from there. What it will do is it will basically explode that level of purple and give me 3 values, an r, a g, and a b. And they're essentially just variables Inside of CSS, not the regular dash dash variables, but just the you can use the letter r. So from that, you can return an RGB value, And you can say, okay, take the red and increase it by 20%.

So our CSS has Math in it. You can use calc, right? So calc are times decimal 2, and then you take the G and you increase it by 20%. So g times 1.2 and then you take the b and you say, okay, I want to keep the b the same. So you just put b and then you say, oh, wow, it's RGBA.

You can put an a value. So most likely for me, I always wanna say, just take this whatever color it is, if it's a hex or a name or whatever. So you say r g b a from blue, and then you you give it your r, your g, your b, and then you have your alpha channel. And that's where you can Make the color actually transparent. So if you think about, HSLA, the h is a hue. The s is the saturation, and the l is the lightness. If you want to make a color lighter or darker, you simply just say from blue And then you get the h, the s, and the l values, and you can increase those up or down however you want with calc functions. And then, of course, you can You can set an alpha value if if you need it as well. So that is unreal. That's kind of what we've been waiting for in the browser, and, we are almost there. It's not supported in any browsers.

The spec is currently in draft mode, But things are looking good. There was like a whole another spec that was partially implemented in the browser with color mix. They scrap that, and now we're we're looking at this from variable or, sorry, the from keyword in CSS, and I think this is gonna go through. Yeah. And you might be wondering why not just use HSLA to do this or HSL to do this, and you're bumping up the

saturation, whatever. Like we mentioned, you'll want to look at some of these links that I I posted. I'll I'll try to make sure I have all of them in the show notes here, But they'll show you directly all of the different types of color profiles and the, and how that affects What that lightness actually looks like, and it's unfortunately just not a good profile for that type of thing.

Oh, yeah. But you You can do it with HSL if you want.

But the the thing is, is that if you define all of your colors up front, Then, of course, you can make, like, a 50% or, like, a lighter version or darker version. But if you wanna, on the fly, take a hex value And make it lighter or darker. That's what that's where this is going to be very, very helpful.

Yeah. But even even the HSL version of it

Isn't very good. Oh, yes. Isn't you don't have full control over it. And that's what this LCH is apparently going to be better at. What a lightness, chroma and hue.

And this is like whenever I get into 3 d or audio or something in the browser Is in my expertise in JavaScript is now I'm going outside of my lane and trying to understand how Audio or 3 d space or color spaces work, and you have to sort of

expand your your, your reach and learn a little bit more about how these things work. Here's what you wanna do, Wes. You go to this better color tools. The it's in the it's the 4th one that I posted Then the they're showing better color tools .pages.dev.

Okay. Then go to the color scale tab. Oh, there we go. Color scale. Alright. I'm seeing it. Scale. Go ahead and select the color, and then just look at the different color profiles and how it affects,

that color scale is broken in Firefox. Oh, hold on. I wanna see this. You can go to color the color mix this one I'm seeing works fine. Maybe maybe it's not the color scale is not doing anything for me. Mix. Go to mix. Oh, yeah. Yeah.

Oh, yeah. Just visually seeing the differences.

Yeah. So if you're if you're having trouble visualizing what the difference is between many of these different things, which obviously you would, It's an audio podcast.

Go ahead and and take a look at this this link here.

This thing's really neat, and it'll show you how color profiles make a difference. Yeah. Because

I'm going from blue to green.

And in RB, it's basically like blue, blue, blue, blue, Turquoise green, green, green, green. Like, that was pretty much just like one. Like, alright, we're we're going from but if you look at it in, LCH, It's totally different. Or Okay Lab and that they just look so much more appealing than The so your the gradients are gonna be unreal once this lands in the browser.

It's all math too. I mean and and, hopefully, See, whatever that is going on with the color scale tab of this is fixed because it was working just fine.

So whatever, you know, hopefully, the color scale one because that one's really, Really interesting too because it shows you lightness to darkness of any color.

Oh, yeah. I'll ping, I think it's just a a Drew Drew Powers

Repoam. So I'll ping him and see. This is a this is a great little tool that shows you all the this is something Toptal needs to acquire.

It. Yeah. Yeah. And he he has a, this is this is from a JavaScript library called Better Color Tools, where you can do better dot from. And If you want to do this stuff in JavaScript right now, this is, like, a good way to do it, but it's in JavaScript. So yeah. The well, now I'm wondering,

Is there a, a post CSS plug in for this type of thing? There's Sass plug ins. Yeah. It's it the The I guess you could just throw it in Sass. I'm sure there's a post CSS plug in for it, but it can't be done programmatically because obviously it has to be computed at compile time, not in the in the actual browser, which would make color themes kind of stuff. Yeah. Yeah.

So next level of color stuff coming to the browser.

Kind of fun to talk about it. I'm I'm betting we're probably at least a year away from seeing this all be implemented in the browser.

And then even then, you have to have a decent screen to be able to to actually appreciate the differences between all these. But I don't know. I'm on a I guess, I'm on a pretty nice screen here as well. I'm curious if I were to I don't think the screen makes that big of a difference if we're being honest. But maybe maybe if you have, like, a crappy screen. Maybe they're great. I'm like, almost like every screen that's coming on any modern laptop or phone is very good. It's gonna be able to yeah. You're right. Hit those hit those specific colors.

Cool. Well, we'll be sure to keep you up to date once this thing actually lands. But for now, you sit on your hands and know that soon you'll be able to take a hex value and give it opacity programmatically, especially without having to put, like, those, like, hex values on the, you know, like, you can do a hex code 6 characters and then you can put the 7th and 8th. Oh, yeah. As a like opacity value. Who'd want to do that? I know you can't, but who get it? I just want I just want to you, like, like any color 0.5 on the end. Yep. And it does it. And this will get us pretty close to that. Now I have to translate

what you know, 0 to 100 into, hex hex code again in my head. Alright. F f. Okay. It's

e e. Okay. Whatever. Yeah. I'm out. Beautiful. Alright. Thanks, everybody, for tuning in. We'll catch you on Wednesday. Peace. Peace.

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.