CSS5 Color Functions

Benjamin Moore colors and the the claret rose hugs and kisses winter melon, yeah. Just visually Want to I have a color Mhmm. And I wanna make it

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.

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

like a big gradient And you start to see color banding So I I made a website. It's at bm.westboss.com,

the tastiest web development treats coming again hot. Here is Wes, Barracuda,

So next level of color stuff coming to the browser.

that level of purple and give me 3 values, an r, a g, and a b. And they're essentially just variables can say, okay, take the red and increase it by 20%.

Is in my expertise in JavaScript Is there a, I

that actually does it in a better job.

kind of,

Okay. Lab x y z sRGB, 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, little tool

the craziest,

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

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

and the,

you can have much more vivid Audio or 3 d space or color spaces work, and you have to sort of 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.

to do it.

and how that affects I think it's just a a Drew Drew Powers 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,

to get that $100. Thank you, Linode, for sponsoring.

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

Make nice colors? The answer is kind of.

And don't forget to subscribe in your podcast player like,

can be fairly popular as you have 2 colors color mix? Yeah. Then where we wanna start, the color mix function. So this is something that, 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 like any color Probably the one of the most popular ones in LCH as well.

CSS has departed from doing major versions, You know I did.

Repoam. So I'll ping him and see. This is a this is a great Inside of CSS,

it. These tweets here, there there are some really amazing,

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

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, Oh, yeah. I'll ping,

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 blue, You know, we need to get Lea Veru on this podcast because whenever I do any Googling of from blue, 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.

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, 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 on the end. Yep. And it does it. And this will get us pretty close to that. Now I have to translate chroma and hue.

Anywhere you want programmatically, and you're going to be able to do this with CSS black You can't describe every single color in just RGB.

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

the way that you are used to doing with Sass. If you want to lighten, darken,

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.

make it somewhat transparent. Figure out a good contrast in color.

Big, most popular ones being, and then you take the G and you increase it by 20%. So And you want to be able to mix them together, there is a new CSS color mix function, maybe we'll I'll I'll shoot her a DM or whatever because she has done she has an LCH color picker flipping the color, Like on a on the color space,

hex hex code again in my head. Alright. F f. Okay. It's CS. The biggest the single biggest issue we had in our theming system

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

Okay. Then go to the color scale

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.

Math in it. You can use calc, right? So calc

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

You're starting to see companies being like, can we be able to use these colors in the monitor? You know, sometimes when you have a very, 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 I I often think make it sunnier.

and not worry about it, And then perform operations on that color. Make it darker, make it lighter, contrast. And this is going to be huge for accessibility it takes a a couple things. 1st, it takes the color space.

to take a color and make it transparent.

this thing will teach you everything you maybe didn't want to know about color, but at the same time,

something that can be done with math, or is it something that is an art?

or drop a review if you like this show.

describe And especially without having to and that they just look so much more appealing I don't know. Make this a maybe it's good for clients.

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.

Oh, But let's go to the next one, and this is this is the big one. This is being able to programmatically Yeah. LTS.

and I I took Did you do that on purpose? Yeah. Yeah. Absolutely.

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, There are more colors than can possibly be described by the permutation of whiten.

this is like whenever I get into 3 d or audio or something in the browser 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.

opacity, what what were the other things you could do And it is like CSS 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.

sake is you don't have to like right now, for my bm.westboss.com, 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, lighter or darker, you simply just say from blue reds, 255 greens, and 255

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

just to say jump ball, which one's good, whoever Whoever is the best congress, take it.

at compile time, not in the in the actual browser, which would make color themes kind of stuff. Yeah. Yeah.

So if you go to b if you go to bm.westboss.com, The so your the gradients are gonna be unreal once this lands in the browser.

take A name, a hex, an RGB, an HSL, an LCH. You wanna take literally any color that you have,

100 into,

on top of the color, be either

make a difference. Yeah. Because

Dash dash level up purple. And I take the level up purple, and I wanna be able to, Alter colors, 0.5 I there was something the other day. Jack Dorsey's pitching web 5. What happened to web 4? 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, blue, 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 Let there's sort of, like, 3 things in this color module level 5 CSS 5 colors.

all of the different types of color profiles

transparent.

Using LCH or HSL,

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

And you

What that lightness actually looks like, and it's unfortunately just not a good profile for that type of thing.

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 Guess who has the boxes for that? Linode has the boxes for that.

sRGB linear. And from what I understand,

and how,

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 h RGB, You can do it with HSL if you want.

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, So what shade? Tint shade. Exactly. Like you want to do any. You want to take a color and you want to tilt it

This thing's really neat, and it'll show you how color profiles

to darker green.

Boss, and Scott

And from what I understand, you can more accurately I am a big fan of Benjamin Moore, and Benjamin Moore is a paint company. And they have my wife Scott.

or blacken lab, l a b, Those things are now coming to to CSS.

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.

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 you'll see that I took every And that is going to be allow us to do it. So

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.

resources that were shared that shows the difference if you're,

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, LCH, 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 self plug here.

transparent. So if you think about, HSLA, Who are we sponsored by today, Scott? We're sponsored by Linode, 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, especially, Scott, You have the Apple monitor. Right? And that thing is able to to Take 2 colors and and mix them together at a certain percentage.

display is gradients. So if you have a gradient and you want to be able to Gradient from

was when you have a dark and light mix, CSD.

Online as well.

saturation, whatever. Like we mentioned, you'll want to look at some of these

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,

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.

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.

we are almost there. It's not supported in any browsers.

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 stepping between colors and lightness

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.

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,

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

And so I sort of went down that rabbit hole since being like, hey. Look, where where are we at with this color functions

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

that color scale is broken in Firefox. Oh, is a hue. The s is the saturation, and the l is the lightness. If you want to make a color 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 And then you get the h, the s, and the l 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,

let's see. Let me pull up some of these these it had to do with that. And it would be so much nicer Yep. Or one of these online ones with OkayLab that will, like, generate the OkayLab colors for you with hex values.

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 I'm going from blue to green.

is apparently going to be better at. What a lightness,

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, why HSL Head on over to syntax.fm

Alright. Let's talk about, I went down this this rabbit hole the other day where I was like, I like it, but make it a little bluer.

A little

for a full archive of all of our shows,

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, So CSS plug in for it, but it can't be done programmatically because obviously it has to be computed

Monday. Monday. Monday.

what is it? 255

the perfect place to host your, Yeah. But even even the HSL version of it

has 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 The spec is currently in draft mode,

how good the some of these, like, OkayLab and whatever Can make your your color systems look comparatively.

seeing the differences.

Yeah. Yeah. Yeah. That's exactly what what this will do. I I love it. I tried programmatically So our CSS

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,

I wanna I wanna take this this specific blue and make it 50% And in RB, it's basically like blue, In CSS, I just want to be able Oh, yeah. But you 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 green e e. Okay. Whatever. Yeah. I'm out. Beautiful. Alright. Thanks, everybody, for tuning in. We'll catch you on Wednesday. Peace. Peace.

Would would sort of bleed through.

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,

blues.

values, and you can increase those change it from there. What it will do is it will basically explode is now I'm going outside of my lane and trying to understand how preset for Canadians where you can do things like like we spell gray differently as well. Yeah.

Isn't very good. Oh, yes. Isn't you don't have full control over it. And that's what this LCH

kind of stinks, which is unfortunately. Because, like, HSL From a developer perspective, being able to define lightness and 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 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, a Well, now you can programmatically make it a little bluer. And

dark and light theme kind of mix where you want the the font color to change based on the background. Yes. And in

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 g times 1.2 there's, like, 4,500,

what you know, 0 to

transparent or whatever. You know what I mean?

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 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 are times decimal 2,

Anytime I hit bugs, a visibility bugs,

than Colors. And where this will be very helpful to the everyday developer So what's the answer? Can you programmatically CSS colors or gradients or anything, all of her work pops up. So, that shows you all the this is something Toptal needs to acquire.

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.

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,

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

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, It's totally different. Or Okay Lab And then even then, you have to have a decent 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

And I really have, like, a fascination with designing systems to be themable. Right? In the last version of LevelUp tutorials, we had, like, like, what makes color look good, but also, like, kind of the math behind it.

where you