HTML & CSS for Beginners Part 19: Colors with CSS – hex, rgba, and hsla

beige hex This is a topic that many people are looking for. star-trek-voyager.net is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, star-trek-voyager.net would like to introduce to you HTML & CSS for Beginners Part 19: Colors with CSS – hex, rgba, and hsla. Following along are instructions in the video below:

“Guys today. We re going to be looking at colors in css. We have a a few different ones hex rgb. A hsl and how we can do some transparencies well so in the last video.

We set up this little thing and i m not gonna worry about the layout. So much if you re curious how i got all these boxes like this go look at the previous one where we are looking at floats and clears. But for today. We re gonna be looking at colors.

We have a whole bunch of colors here so it works out really well now there s three are actually four different types of ways of doing colors. So let s jump over here you would have seen in the last video that i used color names to put in my colors. I find doing demos using color names is really nice and handy cuz you just put in a color. You don t have to sort of figure out what it is and the color shows up so pink red firebrick.

This is a little less obvious. But it s just a color. I know now you might be wondering where can i find all these color values and or color names. I should say and like in so many cases.

The w3schools does have a nice resource for it just flick up this is html color names. Css color names and they ll give you the name and they ll give you you know i ll show you an example and you ll notice a few of them or repetitive gray. They ve done it with both types of spelling for example gray again dark slate. Gray deep.

You know dim gray. They have lots and lots. And you can go and find your favorite in there. I don t really like using these for actual design purposes.

Though it s handy for just doing things faster. When you don t want to have to think about what color you want but when you don t need actual precision because if i want to pink. It s not really the thing i want and well i don t want hot pink. I don t want pink don t want light pink.

I have a very specific color. I need and i can t get to that color when i m using these color names here so another way we can and i ve done this a lot in my demos is using hexadecimal so ff0000 now hexadecimal that should keep exactly the same and it does hexadecimal is a system effectively what it is is you put the hash tag and then a red red green green blue blue values. So the first two are corresponding to read the second two are corresponding to green. The next two are corresponding to blue for my rgb.

And it s a scale of 0 to f. And that s a little strange of a scale. So that s why i have letters and numbers mixed in there so basically you go 0. Up to 9.

And then the we can t really do a 10 because that s two digits..


So then we jump to a and then from a we can go all the way up to f. And the way. This is working. If i look here.

It s f f. So f f. Is the highest possible. So i m maxing out my red and then i have no green and no blue.

So i just get a pure red. If i were to come in here. And do an f f. On my green.

I get yellow green plus red will give me yellow. Obviously i just did that and whoops. Not d d f. F.

And i can get a pink that way right. There let s bring that back to zero zero. So if it s all zeros. I get black and if it s all fs it save whoa save the wrong file save and will be white so in general the lower if you see a lots of numbers in here will be very dark.

If you see lots of letters in there it will be brighter and you can take rough guesses at colors you re gonna get but in general. I m gonna use a color picker and you might remember i used this color picker back in the day back in the day in a previous video. And we just have to do a google search for color picker don t write anything else. And you will get this kind of annoying that it won t go away there we go a nice color picker and in here it will just give me you know i picked the exact color.

I want i take that hex code and i m good to go you don t have to memorize how this works. It s really not that big of a deal you ll also see that they give me an rgb value so originally we could only use hex and at one point. They added in rgb. So let s just take this green here.

And i ll put that as my first box whoops. Copy paste and i m gonna take this rgb down here it s my second value so i ll copy that and i ll paste it in there and hit save and they re both exactly the same color. So this 8f corresponds to 143 my db. Here corresponds to 219.

And my 83 here corresponds to the 131 and it ends up being the exact same color. So the rgb scale is from 0 to 256 not 5655 sorry so if i put this at 0 0. 0. And i ll delete that so don t get an error i get black and if i have 255 255 255.

I get white and if i have full red 0..


And 0. I will get red now where this becomes a lot more interesting. Though is that i can do in rgb eh. This stands for red green blue and alpha alpha is pretty much transparency.

If you re coming. You know. It s an alpha mask and the alpha value. Though is from 0.

To 1. So i m just going to put another comma put another space and put in 05. So it s from 0 to 1. So if i put in point.

5. Its semi transparent and let s actually change my background. Okay so what i ve done is i ve put in a background and i ve made these boxes bigger because i want to illustrate a little bit more on how this is actually working so this box here is transparent. But we can t really see what s happening because it s on a light grey background.

So it doesn t it just looks like my box is getting a little bit lighter. These two being nice and big. It s gonna let me examine more you know we ll actually be able to see our hamster coming through there. So let s come down to this first one right here this and i ve made them bigger just to make it even more obvious and they ll replace this with my rgb.

So rgb value always works. I just put my r and g. And b. And then i open and close the parentheses.

And i put in my rgb values. So to 5500 should make it. Red and then the a is my. Alpha so i put another comma.

05. Should make it 50 opacity or 50. Transparent. And there we go we can see my hamsters nose poking through there if i make this a smaller.

Number it becomes more transparent and if i bring it up it becomes less transparent. So rgb is pretty awesome. We just have to you know 255. I want a yellowish box.

I can go there and use that remember just use your color picker though i had to get the color you want and then just add the a to here to be able to add your transparency..


If you forget the a and it will just break the whole thing because it doesn t understand this value so it s really important that you add the a in there when you re doing it so let s try and do our little purple box there and our gba and purple. I m not even really sure we probably need some green and blue so 0. 150. 255 and as i start with a 1 so it s there fine well blue is good enough.

And what i want to show is what a lot of people find at first when they re looking to make things. Transparent is they don t use rgb a they get their box looking good and they do a quick google search and they find something called opacity. So opacity is just like my a value here the alpha value my opacity. They work exactly the same way in terms of how to manipulate it so it s a zero to one scale.

So a 1 means that it s exactly the same and if i put this to zero. It becomes. Invisible and so let s bring this up to a point to 525. Save refresh.

And we see my box there. But you ll notice the text is also transparent. So it s taking my whole div and it s making the whole div become transparent as well and that s usually not what we re after there are a few situations where this is something we want to do but in this case. It isn t so let s get rid of that and jump back to this.

Refresh so with this one down to 05. It will make my box more transparent. But my text is the same and to make that even more obvious let s make it more transparent. So my box is becoming more and more transparent.

When my text is still there and still nice and easier to read so that s fantastic. It s what we you know what you ll probably be after most of the time and we have one last one that i haven t explored yet so let s replace this yellow. One here with the last one which is hsl and hsl works sort of like rgb. It has three values the only thing that s different is it s it s kind of weird.

If you re not used to hsl. It sends for hue saturation and lightness. So the hue value of 0 to 360. And think of a color wheel of a wheel.

So you have 360 degrees. And you re picking the degree that you want so newing red. A lot we ll stick with red not 255. I m just rgb 360.

Happens to be red and i m guessing zero does too then input a comma and we have to choose how saturated we want that color so let s start with a hundred percent saturation. We want it to be a really vibrant bright red and the last thing. I want is my lightness and for lightness and i ll start with 50. And we ll explore a little bit how lightness works.

So that s a the red..


We ve been looking at the whole time so again that s well not again. Let s just jump over to our hue and change this to 150. And we ll see that it changes so the hue is where we are on the color wheel. And i sort of like that color.

So we ll stay there this is my saturation so how saturated am. I if you go to zero percent saturation and you will go to gray. And it doesn t matter you put here cuz you re you know whatever you put there if you have 0. Saturation.

You don t have any color. So we ll go back to our green and we have our full color. But if i go that that 50. I m going towards gray.

The lower this number the closer to graham getting or you know and we ll bring that back up to 100 for a second and then lightness instead of adding gray to something so we re taking the colors out of it is we re adding white or black. So 50 were right in the middle. If i make this 75 let s say it s going to get lighter. I m making it lighter a hundred percent.

We ll bring it all the way to white and if i make that zero percent. It will bring me all the way to black and 25 will just be a darker version. So it s not quite the same as going to gray. Which is making it more neutral.

But it s making it either lighter or darker maybe. It s just me and i m used to hex and i m used to rgb. But hls is a little strange for me so i don t really use it too much you ll notice even the color picker. We ve used they don t even give us an hls you won t see hls used too often though.

It is out there and you can t add an 8 hoh sl. I think i was saying ls before and it would work exactly the same point. 5. And it becomes starts becoming transparent.

So let s color in css. How we can control our background colors. You can use all this for your text colors as well which you know it works and anywhere you would be putting on a color. This system works you have any questions put them down in the comments below and until the next video.

” ..

Thank you for watching all the articles on the topic HTML & CSS for Beginners Part 19: Colors with CSS – hex, rgba, and hsla. All shares of star-trek-voyager.net are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
description:

tags:

Leave a Comment