Up next in 10
CSS Tutorial For Beginners 47 - Color
129K views
Feb 7, 2024
In this CSS tutorial video designed for beginners, the fundamental concept of color in web development is explained. The tutorial likely covers various ways to specify colors in CSS, including hexadecimal notation, RGB values, color names, and RGBA for transparency. Viewers can expect to learn how to apply colors to text, backgrounds, borders, and other elements using CSS properties like `color`, `background-color`, and `border-color`. Practical examples and tips for choosing effective color schemes may also be included, making this tutorial a valuable resource for beginners looking to understand and manipulate colors in their CSS stylesheets.
View Video Transcript
0:00
Yo what's going on guys, you're watching CSS for Beginners lesson 47, and in this
0:11
video we're going to take a look at color. Alright then, so I'm back here in
0:15
the code, and we've still got this div IDF banner right here. I've stripped out
0:20
all of those background properties, and we're just going to focus on the background color in this lesson. So the background color property we know is
0:28
background-color. Alright then, and we're going to start out with hexadecimal code, or short hex code. And hex code is a series of six numbers, or
0:40
six letters, or a combination of both, that make up a color. And it's made from
0:44
three channels, okay. The first two numbers in the series control the red
0:49
colors, the second two control the green colors, and the final two control the
0:56
blue colors. So we'd start it with a hash symbol always, that's how hex code works
1:02
And then we put our six numbers, or six letters, and they range from 0 all the
1:07
way up to 9, and then after 9 they go from A to F. F being the lightest, and 0
1:14
being the darkest. So if 0 is the darkest, and we put 00 for our red
1:21
channel, if we put 00 for our green channel, and 00 for our blue channel, then
1:29
what do you think that will be? Well it's the darkest of all channels, that I would
1:33
say would be black. But let's just double check, oops, in a browser, let's refresh
1:39
this, yeah, black. And that's because all the channels are zero, there's no color
1:44
in them, okay. Now if we shift up the first channel, say, and take that to 5, 5
1:49
or even it could be 5, 0, or what, 5, 2, can be anything what you want, and save
1:54
that, that is the red channel that we're putting brighter color into. The green
1:59
and blue channels still have zero color, so we'll give that a whirl and see what
2:04
color is in the browser. Refresh this, yeah, now we're starting to get a red
2:10
color. And the same would be true if we were to pop digits in the other ones
2:14
instead. Let's put 50 there, this is the green channel, in fact I'm not going to
2:19
view it in a browser, brackets is being cool, and it's just showing me that color there in a little thumbnail box. So you can see that's a green one, and it would
2:25
be the same for the blue, let's put that at 5, there we go, blue comes up. And the
2:31
higher the number, I've changed it to 90, the lighter the color. I'll change that
2:35
to F, then we're getting a light blue, yeah, you see the point. And obviously if
2:40
0, 0, 0, 0, 0, 0 is black, then the other end of the spectrum would be FF, this is
2:46
the brightest, FF, FF. Now what do you think that would be? You've guessed it
2:52
white, there it is, brackets is showing me. So we can mess around with these and give
2:56
different channels different values, so I'll change these to A, that's going to
3:01
bring down some color in the green channel, I'll bring down the red to 44
3:07
see what happens there, yeah, that's giving us a pale blue. So we can mess around with these, and we can use a color picker such as the one on Photoshop to
3:15
generate these codes for us. I'll just show you quickly the one on Photoshop
3:21
it's right here, and we can put this little color picker anywhere we want
3:27
Right now, this is the hex code here, it's black, and it's 0, 0, 0, but if we want to
3:32
say go up here and get this kind of maroony color, then it gives us the hex
3:36
code for that. If we want to change it to a greeny color, we can go here, make it a
3:40
bit darker, gives us the hex code. Alright, so that is the hex code in a
3:46
nutshell. Now, there is another method we can use, RGB format, and it's similar in
3:54
that it takes three values. First of all, we write RGB to specify we're using RGB
4:00
format, then we open and close our parentheses, and then within here, we
4:04
specify our three values, and they range from 0, 0, we're going to give this to all
4:09
of them, oops, so we're saying 0, 0 for the red, 0 for the green, and 0 for the
4:14
blue, separated by commas each time, that's important, and same again, this is
4:19
going to give us a black color, because we're saying in each channel, you want zero color. Now, that's showing up on brackets again, perfect, that it's black
4:26
and they range all the way up to 255, so we can take this to 255, that was the red
4:33
channel, the green channel, and 255, that's the blue channel. Now, this should be
4:38
white, because now we're maxing out all of those, and we can have any combination
4:42
of colors in between, for example, we could drop down the red channel to 100
4:46
and this gives us a more kind of light blue color. Same again, we can go to any
4:51
kind of color picker, like in Photoshop, which I'll do now for you, and we can
4:57
check out these values here. At the minute, it says 13, 108, and 58, but if we want to
5:04
get an orange color, say like this here, then we use these values, that's 251, I'm
5:11
going to change this to something I can remember, 250, 150, and 60. 250, 150, and 60
5:20
so that's the red channel, 250, green channel, 150, blue channel, 60. So let's
5:25
put those values in, in here. So we said 250, oops, 250, 150, and 60, and that
5:39
should give us the orangey color. Yep, there we go, perfect. So that's it
5:44
my friends, we've got hex code and we've got RGB colors, so we can use any of these
5:49
that we want to. I normally use hex code, but feel free to use RGB if you like
5:54
it's especially useful when you come to work with background opacity, we're going to talk about that in an up and coming video. But for this video
6:01
that's about it. If you have any questions, feel free to comment down below, I'll answer all of those. Otherwise, if you enjoy these videos
6:06
please like, subscribe, or share, and I'll see you guys in the next one, where we're going to look at gradients
#Design
#Painting
#Programming
#Software
#Technical Reference