Hello, in this CSS Crash Course video, we're going to be looking at Advanced colors. So now we've just looked at sample for RGB colors, or RGB. Now to specify a color name like black, gray, because CSS has a few built in color, named avoid, it actually has quite a few hexadecimal is always best to ensure maximum compatibility. It's a great way of reinforcing what black is what gray is that sort of stuff. So when you are developing websites, and basically when you're looking at code days in your can, you can literally start looking at a hexadecimal value and be like, Okay, I think it that color. But some really cool ideas allow you to sort of hover up the hexadecimal I'll show you the actual color, cooler color, which is fantastic.

So with advanced combos, there's three different things we're going to be looking at. First one is alpha. It's pretty self explanatory. So what we're going to do is get rid of all this correct With an ID of alpha, and what the hell happened there, alpha, and inside here, I'm just gonna put alpha text. I'm gonna save that go to index dot CSS, and I'm gonna get rid of all of this text. And I'm going to put asterik.

Everything is just going to be affected by this font size to VM, because we're just going to be using text to illustrate the different advanced color techniques. But you could use it with background colors, any sort of thing that has color values associated with it. So what we're going to do is now do hash alpha. So we are do saying we want to affect this particular element. Let me zoom in a bit so it's easier to see. And instead of just doing color, RGB, we're going to RGB, we're going to put RGB BA which is red green blue alpha.

So if I put values of 24500 and alpha 0.2. So the first three values should be pretty obvious. This random between zero and one, and this is the red value. This is the green value and blue value, each range between zero and 255, aka 256 different increments, instead of starting at 1225602, to five, like, okay, it's pretty simple stuff. And this is one of those IDs I was talking about. That shows you a representation of what that color looks like.

The final value ranges between zero and one, zero being translucent and one being opaque. So we put 0.2 so it's pretty translucent, you can still see the color. Now if we save that, go back to our web browser refresh. As you can see, we've got some text that is quite light, and I'm going to show you what would happen If I were to just get rid of this, actually no. Is that a game? Wait, I'll pull one.

So you can see that one is fully pay for the polite 0.01 died very hard to see less, less to 0.1 still visible, but as you can see getting night a 4.06 should be a lot darker now for something in between. I think it is getting lighter. Now, though, that alpha, there's something called haters owl, which is hue, saturation and lightness. So what we're going to do is go to here, let me zoom in and do another diff and have an ID of H SL. And inside here, we're simply going to put HSL text. If I save that, go to the index dot CSS file.

Now we're gonna do how HSL color HSL open bracket and these values or the first value Actually, I'll show you something. So you a great little people that are fans. So this is the human, the human you can essentially think of as the color saturation. You can think of like different blends of that color, like a light red or darker. The value is basically the lightness how dark or light it is. So what we're going to do first of all is put 78 then the next value ranges is actually a percentage.

So we're going to put 100% so the saturation is 100%. And for the lightness, we're gonna put 40% let's see what sort of result we get. So yeah, h s. l 78 is sort of a greeny color. We got 100% in terms of this saturation, but which book 30% 40%. On the other hand, as you can see Scott and sort of a darker color, I would put 100 and put a 100 with this. As you can see it is just too bright.

So what you need is you need to have a validate the low low so you can actually see it. And this is also a great way if you're into hue saturation, then night value to be able to use this and the one final technique was to blend both of these together. You can guess what it is, is div id equals HS LA. So hue saturation, lightness alpha. And this is HSL a text, not an SLA Ah, save that go to index dot CSS. And to save some time I'm actually just going to copy and paste this A at the end.

And finally, for a value that range between zero and one and 0.3. So sorry, I should also put a here because otherwise it doesn't know what to do with this. It's not a correct method. Now go back to it. As you can see we've got the same color, but it is now not as opaque. It is really translucent.

So that's it for advanced colors. Very, very simple stuff. If you have any questions, feel free to post them on my education platform. So no learning Dakota, UK or in the comments or feel free to reach out however you feel comfortable. If you have any sort of like queries, like I said, feel free to reach out. And as usual, actually forgot to mention one thing, the there'll be a link in the description as a resource, which will take you to the source code from this video and the source code Every video in this Crash Course series, and as usual, thanks for watching and I hope I hope you have a good great day.