Colors

[00:00:00]
>> Alongside responsive design colors are probably the most popular use of custom properties. Let's look at an example here. So we have two accent colors. One of them is this blue accent color and one of them is red, but it just happens to be red, it could be anything else.

[00:00:23]
And we've used them here both for the heading colors and also for these buttons. And we've used them in a variety of places. However, there is a problem with using colors that way. And this problem becomes apparent as designs evolve over time and CSS code changes by multiple developers often.

[00:00:47]
So let's say we've designed this, the website that uses the these things and later on we want to redesign and lovely custom properties make it easy to do that. We can just go here and change our second accent color to use this kind of green. Let's make it a little bit less saturated.

[00:01:15]
Okay, and we quickly look at things and we're like, this looks fine. However, the problem is that we have used the second accent color variable as just accent color two, when we actually wanted to ascribe meaning to it. We had these cancel buttons and these delete button that didn't just need the second accent color.

[00:01:41]
They actually needed red. And we had taken advantage of the fact that our second accent color just happened to be red, and we just said, okay, we have this variable, we're just gonna use this variable. It looks fine, it's red. It conveys what we want to convey. But the intent that we specified in our code was not our actual intent.

[00:02:01]
Our actual intent was to convey that this action is dangerous. This button will cancel what you're doing, will delete what you're doing. Colors have meanings, they're not just decoration. So then when we change the second accent color, this violated our intent and now it actually looks like you should be pressing the cancel button because it's green.

[00:02:24]
So what can we do? There are many schools of thought here. Some people name their colors after after the main hue they say color red, color green, color blue, that would prevent this. But also in other cases we do just want whatever the first accent color is. So what do we do then?.

[00:02:43]
We don't actually have to choose. We can just alias colors to whatever we want. When we had red here, we could have also said color red, var accent color two. And then when the redesign came along and we wanted to change this to be green, whoever did the redesign would look at this and say wait a second this is not true anymore.

[00:03:14]
I need to specify a separate red for whatever actually needs red. And then we would have still had a red there. And obviously we would need to actually use that here. But we wouldn't be using it in the heading. Because the heading actually needs the second accent color, we actually wanted to just use the second accent color, whatever that was in the heading.

[00:03:43]
So one thing is that I think it makes a lot of sense to use hue based aliases of accent colors to make content clear. You don't need to decide whether you're gonna use like primary and secondary and color one and color red, you can just use all of them.

[00:04:03]
Now the main thing that most people want from colors is creating variations of them. Right now we can use custom properties to specify entire colors, like primary color, secondary color, and so on. But, what happens when we want a darker primary color? I mean, surely we could do something like this and people do often specify these, like primary color darker, whatever.

[00:04:35]
But then we need to change. We need to change these colors in multiple places. Here we've applied a variety of hacks that people often do to create variations of existing colors. We have a semi transparent white to create a lighter primary color, and we've applied the brightness filter to make a darker secondary color.

[00:04:59]
How can we use custom properties to actually create these variations without these hacks? So we're first going to see Tte most verbose but flexible way, so what we could do is, we could create variables for each individual component. It's very, very verbose. But it works. And then here, we just use them.

[00:05:47]
And we don't need fullbacks here because they're all defined in the same rule. So we know they have a value. There it is. And we could do the same thing with the secondary color. I know it's very tedious. 40% here, and another 40% and then I'm just gonna copy this.

[00:06:32]
And now we have all we know that we actually need to create variations. It's not gonna look pretty, but it's it does make it possible. So here for example in this link, instead of using this brightness hack, we can go here and instead of specifying the secondary color directly, we can specify a variation of it with a smaller lightness, something like this or even something relative.

[00:07:12]
Like we could multiply the lightness by 0.6, which is closer to what we were doing with the filter. And now let's go here. We are specifying the semi transparent white background. What we actually want is a lighter primary color. This is primarily a proof of concept because in this case I actually think the semi transparent white is fine but let's do it a variation.

[00:07:56]
And we could either multiply it by a factor or we could add 50% for example, it depends on what kind of variation you actually want. Some variations make more sense as additions others as multiplications. You could even use clump to make sure that the result is always readable.

[00:08:17]
Like let's say you want the resulting brightness to be between 80% and 95%. Whoops, this should be inside the clump. And now, no matter what we do in the math here, we cannot actually go above 95% and we cannot actually go below 80%. So we can not screw up the accessibility of our website by doing incorrect math here or by having colors outside the range of colors we expected.

[00:08:55]
So, the first way we've seen to do color variations is to specify each color component via separate variables and just do math with it. And that works. It's very, very verbose. It's painful to look at, but it works and this is what a lot of code does today, and then as an aside we can use clamp to to ensure readability.

[00:09:22]
There is a second, there is a slight improvement that we could make over this. So usually when we want to create these variations, we just want to change the lightness and sometimes the alpha but we don't usually want to change the hue and the saturation because the hue and the saturation is what basically makes our color what it is.

[00:09:44]
It's the essence of our color. So what we can do is we can store these in the same variable. We can have HHS instead of H and S. And then at least that reduces the number of variables we need to use for each color by a third, which is something.

[00:10:12]
Let's see and I need to change them here as well and here too. Yes and that works fine. So the second takeaway around colors is that we can store multiple color components in the same variable. Now what happens if we want to create further variations within the same component?

[00:10:39]
Let's say we want to make the links. The links later on hover. Let's try to do that. So if we add a hover rule here and we want to apply a different lightness, we would have actually need to copy this entire unwieldy thing and. Change the lightness. It works but it's not great.

[00:11:07]
So what can we do? We can use a variation of this technique within this CSS rule. So you know how we have separate likenesses and hues and saturations in the main rule. We can do text color L and you can also do hue and saturation if you need it but here we just knew we just need L and use that.

[00:11:37]
And that also makes our code slightly easier to read I find. So all right we need we calc as well, okay? And- There we are. And then here, instead of having to repeat the entire color, all we need to do is override just the lightness. And it works.

[00:12:13]
So another strategy is using background color star, text color star. It could be even like box shadow, whatever lightness, whatever you need for independent tweaking of color components for specific elements.