Hasty Treat - Neat Things in CSS Color - Current and Coming!

from memory, from hand, or whatever and know what I'm doing. Oh, yeah. But I can't necessarily for HSLA, Insanity. I almost said Sentry Insanity.

So Oh, a shade and a tint. I'm referring to paint or RGB. Okay. A shade is not In any browsers, but what this will allow us to do is to You can do the space notation, so 0 space 0 space 0 for black, and then forward slash A person.

uniform.

A colorspace is an organization of colors. And in coordination Right now, like, think about this. We have a color function, correctly,

With color profiling, which is how the monitor displays the color, it's supported by various physical devices. It supports reproducible So controlling colors as via hex value Like this. No. Thank you. I'd rather do HSLA or one of those other ones. I have transparent being a color. I think that's that's pretty well known. If not, if you need something to be

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.

Head on over to syntaxdot

that's pretty cool. I think and they've rolled out conditional selecting the one with the highest contrast from the list.

Then everyone else or, like, what is the catalyst here that has brought these things, and and when are we gonna see them elsewhere? It'd be very, very interesting to me. But the lab Lab does look nice, although, Lee said old habits die hard. It is going to be difficult to get my brain off of. I can give you just about any color From RGB function, like, I can get there. Not, like, any color exactly, but, like, I can write RGBA

and I definitely can't for lab. That might be a little bit of a slowdown, and it could be a good space for AVS Code plug in to come in there and swoop them all up and change it for you or something.

The definition would be a perceptually uniform color space ensures that the difference between 2 colors to the Euclidean as perceived by the human eye is proportional

Now what's perceptually uniform? but it's our r g g b b. And then we're we're going to be getting the the 2 additions of a a for the alpha channel, and those values are also going to be hex.

the LCH color picker, it looks really, really nice. I like to pick my color profiles based on how nice the color picker looks. Yeah. Yeah. I'm into that. Cool. So that is I think that is all the pieces of CSS color, Both current and coming. Well, we should actually mention about it, LCH

within the given color space. Okay. Honestly, it to me, it just seems like these are accurate colors, And they're going to be accurate, and that's that's what's interesting about them. You know what? I would love to have Adam Argyle back on here just to, like, School us on colors. Let's get schooled on colors. There's a really good blog post from Leah Veru about why we need these, and, Apparently, LCH and lab

Okay. Okay. Because sorry. I understand. I just read the definition of Perceptually distance Yeah. This I didn't even know this existed until Oh, really? Today. Oh, wow. Today is the 1st time I have seen this, and I don't honestly, I don't see myself using this still. I just thought this was interesting.

It does that too, but it it wants you to use a CSS variable. So if somebody's trying to author some value somewhere, we say, no. No. No. No. We only use variables on this site. Yeah. Use a variable. Otherwise,

saturated and lightened variables in in CSS that way. Yes, please. Give me that. Give me that. Give me that.

So I'm interested in in that aspect too, especially because we talked about color Profiles off the jump being implemented in a certain way in Safari.

So, like, is Apple just more concerned with the color spaces

uniform.

representations of color. Now the reason why Lab is interesting at all is because it's perceptually Where I've used that in the past, where if you hover and you wanna change the border color on hover, but there is no border color on the normal state. If you add a border on hover, it increases the box sizing, and it It makes a shift in your layout. So often, what I'll do is I'll just do a transparent background, and then you don't have to worry about the background color of what it's on because it's just transparent. Yep. Totally. And, likewise, border is one of the biggest ones because adding a border shifts the layout. I use it oftentimes when you wanna use a border for, like, an underline on a link. Yeah. You wanna have that border there. Maybe you're not using, like, an after or something. So, yeah, border for that. Good use case of transparent. You can also transition to and from transparent, so that makes it nice. You get CSS transitions there. Okay. Next 1 is from the other color functions here that we have to get us into other color spaces, l c h l a

or lab. These color spaces, it looks like they exist as functions in Safari right now and nowhere else.

5 years from now, you're gonna have 14 different purples in your thing. And You're gonna have 1 color that doesn't respond to the rest of the changes on the whole site. Yeah. Color drift is real in your applications, and being aggressive with that type of thing is really good idea. Lock it down. Alright. I think that's it for today. Anything else to add, or should we wrap it up? No. I don't think so. I think, you know, I think, obviously, the the most exciting thing here for me is color mix. I wanna be mixing colors. I wanna be getting that live With variables and having generated You can keep track of

uniform. So if you look at the what I just said.

But so if you just look visually at the layout of these 2 colors,

b h w b notation. Now these to me this is getting into a whole bit of color science that I think at the top of this show, we've we've proven that we we really don't have the expertise in. But from what I understand,

hex values

Hidden but still there. You could add it to be transparent.

Versus code themes because if you are coding a Versus code theme Yeah. You often have to not just specify a hard color for something because you want it you want it to show through of whatever is behind it. So you have to do our r g g b b a

0, in this case, would be fully opaque, Wes and I are both doing, like, a standoff right now to see who who can, like, talk, Who's supposed to be talking right now?

but I just don't just use I would love to be able to do have these color functions inside of a Versus code theme because that's That's where they're they would be super handy. Yeah. And and to be honest, if I'm using alpha, I'm pretty much never gonna use RGBA

even though this is I don't know who's like, Man, that's gonna be my preferred way of doing controlling

everywhere in between is a hex value. So What I have to usually do and, specifically, I use this in when you take something so niche, which is How do you specify the color of something in CSS, a different version of that color on the white

and f f would be fully transparent. Correct? Yeah. And then

absolutely Who will pick it up? That combined with video latency equals lots of lots of On pause. So in this episode, we're gonna be talking all about the neat things in CSS color current incoming,

Where each to value

And I have to just look it up every single time because I cannot remember. You can remember, like, common ones, like Like, 30, 50, 75%.

Like, come on. I don't know how you would do that with a JSON file. Right? Like, some kind of variable system there would be would be nice. Yeah. That's a weird thing about Versus code themes, but you can. The answer to that is you could just compile the JSON file. So you could write it in JavaScript and have it Spit out the compiled JSON at the end of the day, that once this hits, I'm gonna dig deeper into generating colors,

white or 4% black, and you could programmatically

if you know why

But what there's other ways to have color spaces? Yeah. I think lab the lab one is its own color space.

I bet that this is has something to do with, like, people who are doing 3 d or some really Which makes me think that

they only added this because they specifically needed it for something that they were doing. Right? Yeah. They wanted to have some fancy thing on the Apple home page, and we're like, we gotta rush at this, but we're not gonna add any of those other things that people are asking for.

Is it's like the gamut of available colors that are available to you. Is that does that sound accurate? I think so. This is not again, I'm mostly coming from a print, and web background. So as far as my understanding of color spaces, there's really just RGB and c m c m y k. K y. C m y k. Yeah. You're You're thinking of c k y. C k y. It literally was. I was just thinking how sick that was.

but Seems like you have to specify different color spaces too. Like, they it's required. Yeah. Specify RGB or HSL or there's a couple other ones we'll talk about in a second. I think where this would be really helpful is are perceptually

If you are programmatically

Projector work or something, like, weird stuff where it's like this is not just for regular websites

Apple has implemented this And nobody else, let us know. Yeah. I wonder you know who Adam Argo might be a great person to ask about that. Yeah. Yeah. He has, like, a swath of I always try to remember, like, a silly Mnemonic.

Now color spaces are a whole thing, And, West, I don't know how much about color spaces, you know. I I took things in college that would have taught me a little bit about color spaces, but to be honest, my understanding of color spaces Did you know in college, I had to take sewing? I had to take dance. I had to take painting glasses. I had to take fabrics,

And then you would really only need to change 1 variable.

really make a a big difference, I think, in how we author our CSS.

Teal, Hence Who will pick it up?

cream, figure out nice colors. Right? But and have the the last value there, but it is kinda nice to type 50%

white, you could say, alright. The text on here is blue, but the underline needs to be

property that you may have seen, and this one's a little bit more usable today, and this is the accent

So you could say, alright. I've got this black,

It seems like from every direction,

there has been, like, an assault on the rigidity of some CSS in the means of, like, you now have, Like, flexible ways of doing dynamic

or just whatever the browser determines. But now with the accent color, you can at least choose the color of them to give it brand colors or an identity.

of tan, 4%

Now this thing exists in Edge.

or whatever, and then it will then return to you the one that has the highest CSS knowledge with this kind of thing. Especially color stuff too. Yeah. Next one we have here is the color mix function. This one, again, this is a proposal. It's currently And what that will do is it will take the color value from that selector or the color value that is currently being applied fields. If you wanna hide or show a field based on some previous data

styling for things, and color contrast is one of those that's greatly needed. How many times have You've seen bad contrast on something in day or night mode or something. They'll give us a lot more options here. Next one here that I have is Now Sentry is the perfect place to track all of your errors and exceptions, and that's Sentry dot I o is the website. They have a awesome interface. You can catalog. You can send things to GitHub.

your React app or into your Gatsby app or into your Next. Js so you can They have so many integrations with every single library framework and solution out there. You know it will just work. One kinda cool thing that they launched recently is

Scott Talinsky, the lab function is the SealLab colorspace, aka the lab colorspace.

you simply just Add a hidden function to that specific field. It's kinda cool because when you say what fields are in a data type, You just code that in a JavaScript file. And if you wanna hide or show that thing, there is just a hidden function in there. I love it because Instead of having some sort of UI checkbox

takes in a color value and compares it to a list of other possible color values, maybe I'll just wait for LCH to come out because Even if you just look at the is that you can

Welcome to Syntax.

all the possible options and and things that are coming down the pipe. So we'll kick it off 1st, and this is a color contrast function. This is a proposal at the moment, part of CSS gamut, and a tint is 2 colors together.

inputs,

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

UI that you use to edit and update your stuff, it's totally customizable.

tasty treat, all lowercase, all one word, you'll get 2 months for free. Let me tell you. Those 2 months are gonna turn into 3 months and then 4 months. Why? Because their tools are just they're so fantastic, you're gonna stick around. Trust me. So check it out, century.i0.

soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda,

I'm your host,

Studio, which is the React based sort of CMS

Sick. Alright. Let's get into it. This is, an idea I had for a show, which is just Talking about some of the neat things related to CSS color. Some of the stuff is and then I want it to be on a background Alright. Thanks for tuning in. We'll catch you on Wednesday. Peace. Peace.

Wes Bosch. Hey. Hey, everybody.

who had what error, how many times that error came about, What operating system, the user data, any of that stuff that you want to have when debugging an error, or let's just say there's a pesky error that comes about. There's a browser thing you can't do anything about. You Go go to hey. You know what? I wanna ignore this, Aaron. I never wanna I never never wanna think about it again. So you have all those options and more. There's also performance tracking metrics and new stuff All the time. I feel like every time I go to Century's

Boss, and Scott, El Toro Loco,

new to CSS color. Some of the stuff is Possibly coming to CSS color in the future, but it's really always interesting to me at least Behind that is the next one here

We are also sponsored by Sanity at sanity.i0.

bunch of rules, they just say, just give it. You have a function, Current color is actually all lowercase, not camel case or anything like that. In current color, what that will do is you could say Background or text decoration color or literally anything that accepts a color, you just use the word current color.

dashboard, there's something new nowadays, and I absolutely love it. New charts, new graphs, new features, And I am here for it. So thank you so much for Century for sponsoring. If you sign up with the coupon code

Tolinski.

It's gonna get you double the free usage tier. Thank you, Sanity, for sponsoring.

and a lot of future options, things that I'm personally really looking forward to, tools that we've had in CSS preprocessors that have been here and Things that could be coming to the browser, new color spaces, all that and more.

Conditional fields. So they have this thing called Sanity That blue plus and you can Return true or false from that thing whether that thing is hidden. It's pretty cool. So check it out for your next project, sanity.i0forward/syntax.

You run the code yourself,

So this episode is sponsored by 2 of our favorite s named companies, Sentry

and we're just gonna be talking about CSS color stuff because, You know what? There's a lot of options in CSS Wes, what's the difference between a shade and a tint? Go.

Sentry Insanity.

level 5. So we can we're gonna call it CSS 5 even though that's not the real name of it. And the color contrast function Like, the beginning of Internet Explorer 3. So this is setting something some color to the word

and my well, I'm your cohost, Scott Talinsky. And with me, as always, is my cohost, with black added to it. A

in one of the previous

Monday. Monday. Monday.

On this Monday episode of syntax. We're gonna be talking about the neat things of CSS.

They are a structured content CMS For your app or for your website, they hold all your data, and you can pull it into

box shadow or something like that. Yep. It it definitely beats hard hard coding a color value for anything. Next one here is profiled color values, and this is a color function. Now the color function But other than that, I always have to look up what those values are. Yeah. And at the end of the day, You know what that could make that way easier would be variables.

have a specific color space rather than sRGB.

And use that. So if you need to set a border or an underline color or anything, you can just use the variable current color, And it's not even a variable. It's just the word current color, and it will kinda work like a variable. It's interesting. Yeah. You know, I mean, I'm obviously, I've seen, like, inherent in initial, but I, yeah, I didn't know current Heller was a thing. There you go. I would like to, like, look through my GitHub of a code I've written and see how many times I've actually used that myself, but Can be a little handy thing if you're doing Computationally

You took accounting? Okay. Yeah. While you were crunching Numbers, Wes, I was crunching up fabric to put into some tie dye. That's the way it was going for me in college. What's the next one we A shade Now I'm wondering about this. Like, why? Is it because this breaks some sort of a rule somewhere if you do it with commas and they're trying to make things more standardized, or is it just like a a pure notation thing? I don't know why it was added, but it was.

is any color

figured out based on all these values because color is is a really funny thing. Like, There's a whole bunch of math behind color, and theoretically, you should be able to programmatically Yeah. It's been around, I think, since Chrome 1. Yeah.

to give me lightened versions of things or shades or tints.

Next one here is going to be a space separated

Also, color is just this, like, very subjective thing where you have people who are good at design, and they could just pick out these things, and they know what goes together. Yeah. I've always used, you know, a lot of computational color via CSS preprocessors Interestingly enough, this is only supported on Safari,

functional color notation.

And that's my dream is one day, you could just put 1 variable special

and have this beautiful site Yeah. Definitely. You put a little v s code plug in that Change them and then, like, a linting rule that will stop you from using them that'll sorta get you over that hump of old habits. Yeah. I do have a lot of CSS linting rules for, like, Do not even think about using a hex value. If you use a hex value, it yells at you not to use HSLA.

tint is any color with white added to it. No way. Really? Yep. Today, I learned you are a pro, Scott. I took paint class. Let me Google that. Tint is any color With white added to it. If I Google that, if this is gonna say you're wrong, then let's see. Okay. Here we go. Here we go. Moment of truth. Hue, tint, tone, shade. How to talk color like a pro. Okay. Just give me the give me the the bullet points here. I I figured it out. You want me to to say it? Definition of a shade is any pure color with black added to it, so that was correct.

instead of 0.5.

fied, and I shake my head side to side. That's not And that's how I remember it. That's funny. That's very funny. Yeah. That that's actually how I remember it, but still sometimes I goof it up. Yeah. I don't know how how I remember that one, but I just do. That one never gave me that one never gave me GAF. Alright. Next 1 is gonna be, hex plus alpha values.

alpha values on them, which is interesting. So you can I I wonder if that had something to do with it? It's if you use this new notation And this color will allow you to specify colors in those color spaces.

No. Those are the opposites. But, yes, I know what you mean. I have those as well where I'm just, like, the justify Changing something like 10% in one direction is not as uniform as it is I see. In RGB world as it is in LCH or lab. And then they also says lightness actually means something.

And, you know, this is actually really nice because, you know, there's a lot of hex values out there at CSS. We've been writing hex values for a really long time. Even though we've had other options, hex values Still kinda feel like the majority of people use them. You know, we tend to go HSLA just because I like being able to change the full the lightness and those types of things, but With RGB is any hue or mixture with only white added. Yeah. I was right. I'm on the Wikipedia page here. What is the tone? I have that open. It's like with white and it's Anything with gray added to it. Yeah. White and black. Wow. Today, you learned, Wes.

in coding.

Yeah. Flexbox, that stuff flips me out. Yeah. What else has forward slash? Crown position. If you wanna do background

the shorthand

shorthand You You could just put spaces there, and I cannot, for the life of me, do that. Yeah. I've always just put spaces. To be honest, our commas, I didn't know you could do spaces in modern day, CSF. Oh, code. I didn't know that would work. So It's pretty well supported. I just checked. I think all the modern browsers support it, which is good. I think the reason

Either getting good with these. It's it's funny, like, the amount of times I still use RGB or hex values even though HSL is, I think better. It's better. Yeah. It's better to manipulate. Old habits die hard. Right? And

50% Contrast in the list of possible values. And that's really cool for accessibility sake because you can programmatically They figure out these things and just have the browser choose out of your supplied list which one would be the best bet. Yeah. I've been waiting for stuff like this for a long time. And these CSS color functions are gonna really, add and remove these colors.

for doing every background property in shorthand is my hero because I've never been able to remember that. I never do the shorthand for those. I always do the long long way for that just because I don't even remember the names of the properties or even what they do. Like, contain, cover, whatever, those all mean the same thing to me as far as I'm concerned. I just have to try them on until I'm like, oh, yeah. This is this is the one I'm looking for that does the The filling or whatever. Yeah. It is funny. My entire dev career, I use those all the time, and I still have to experiment with them to pick the right one. And I have no idea why that is. Cover just covers the entire thing. Contain contains the entire thing, so it shows it. Just one of those things just your mind will never If it covers the whole thing, it's also containing it. I don't know.

and align. Oh, yeah. I just have to try them both.

without spaces, you can just add it. I honestly I still prefer, I think, just to use You can just use RGB and HSL.

That is a small little thing if that's the reason why. I like my alpha values explicit, dyes, and stuff. Is what a weird program. It was so cool. This was in the school of music, by the way. You're a creative guy. I'll I took accounting.

with background position cover or whatever the cover one is, Then you can do the forward slash. But whoever It's makes up on you. Can remember

I always try to think

It trips.

or 0.5, and those will both give you 50%

and I like to see that a there Because that lets me know that there's gonna be an alpha value there. No. I I honestly don't know. I'm I'm interested to hear any color pros out there who have a very, very, very good use case for this. Would love to know Specifically, why this syntax exists is, like, what does this do that the other one can't do besides giving you the percentage keyword? The forward slash is always Interesting Allows you to 255 comma 255, color property. Wes, have you seen accent color? I'm sure you have. I have. Yeah. I'm really excited to see this because the frustrating part of form inputs is that they are ugly. Form inputs are ugly. And, honestly, Some people have been saying, you know, woah. With accent colors, form inputs are no longer ugly. Not necessarily, And a Tint

RGBA, Then you could. Or maybe, like, iPad screens are a little bit different. So And anytime I post any screenshot of me coding, you get some guy coming along and be like, you know you don't need the commas.

But, normally, it updates with the operating system. You know, it still might be a little while before normal Safari gets it or Safari that people actually use get it. But it does work on Android browser. It works on Chrome for Android, Firefox for Android, but, of course, none of the iOS browsers. So that's a huge bummer as well and does not work for IE. Of course, it will not work for IE. That's not not a thing anymore. You know what won't work for IE anymore? Me. I won't work for IE either. I'm just glad I won't do it. Next one we have here is this one's been around

Forever. Probably, and you just get into the nitty gritty of that are are using monitors. But if you do are doing specific work,

It exists in Chrome as a version 93

I would say let's let's take a little quick look when

And I bet you can guess it does not exist in Safari yet. I think it's in the technical preview of Safari, but, you know, since Safari doesn't update, but they can still look A little bit better. And what this does is it allows you to change the styling of form inputs, things like the checkbox that have kind of been historically blue is a base hexes base what is that called? The base? 16. 16? Yeah. So That's why you go from 0 to 1 a through f, right, because it's base 16, this is actually very funny. I wanted to do a whole blog post on hex values because we often just memorize hex values as, like, f f f f. Okay. That's white for some reason. Right? 6 f? Yeah. But it makes sense if you know what's going on with hex values. With hex values, it's an RGB

of Chrome.

It exists in Firefox as a version 92.

formats you can do, which is if you have RGB or HSL and you wanna add an alpha value to it, You don't necessarily have to use RGBA or HSLA.

and that gives you white. Right? And and you do RGBA,

and it's 255 comma

there's, like, the regular notation where it's your red, green, blue, alpha, And you do the commas. Right? But there are other take 2 colors and mix them together given an amount. And so you could say, like, Take this black and add a little bit of blue, but only 10% more blue. You can specify different color spaces in there as well, Which is kinda interesting,

However, this new notation would allow you to just have it Separated by a space rather than a comma.

0 zero zero, whatever gives you black, but they're all separated by commas.