0:00
Yo, what's going on guys? You're watching CSS for Beginners, Lesson 47
0:11
And in this video we're going to take a look at color. Alright then, so I'm
0:15
back here in the code, and we've still got this div ID of banner right here. I've
0:19
stripped out 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
0:27
is 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 5 2, can be anything what you want, and save that
1:54
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 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 the
2:46
brightest, FF FF. Now what do you think that would be? You've guessed it, white
2:52
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
4:38
be white, because now we're maxing out all of those. And we can have any
4:42
combination of colors in between, for example we could drop down the red
4:45
channel to 100, and this gives us a more kind of light blue color. Same again, we
4:51
can go to any kind of color picker like in Photoshop, which I'll do now for you
4:55
and we can check out these values here. At the minute it says 13, 108, and 58, but if
5:03
we want to say get an orange color, say like this here, then we use these values
5:10
That's 251, I'm going to change this to something I can remember, 250, 150, and 60
5:17
250, 150, and 60. So that's the red channel, 250, green channel, 150, blue
5:24
channel, 60. So let's put those values in, in here. So we said 250, oops, 250, 150
5:35
and 60. And that should give us the orangey color. Yep, there we go, perfect
5:43
So that's it my friends, we've got hex code and we've got RGB colors. So we can use
5:48
any of these that we want to. I normally use hex code, but feel free to use
5:53
RGB if you like, it's especially useful when you come to work with background opacity
5:57
We're going to talk about that in an upcoming video. But for this video, that's about it
6:01
If you have any questions, feel free to comment down below, I'll answer all of those
6:05
Otherwise, if you enjoy these videos, please like, subscribe, or share, and I'll see you guys in the next one, where we're going to look at gradients
