CSS Tutorial for Beginners - 13 - Web Colors Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 13th tutorial on
beginning CSS today we're going to look
at web colors and so this is a very
important subject adding color to your
website now there are three primary ways
to add colors the first is to use the 16
primary colors the second way is to use
RGB values and the third way is to use
hex codes but first let's talk about the
16 primary colors and we've been using
those right for our text we made some of
our text blue we made some of our text
purple and the nice thing about these is
you can just call them by name and you
get exactly what you would expect to get
and so let's go ahead and use a primary
color again and I'll introduce a new
property too as well and that is
background - color and if you put that
in the body section that will actually
give us a background color for our
entire webpage so let's do that
and let's pick line so we'll pick one of
the primary colors line and again we
always close with a semicolon let's save
our stylesheet let's open up our page
and there you can see we've got lime as
a background now so let's close this out
and so that's pretty self-explanatory
how to use the primary colors now let's
take a look at RGB values now RGB values
are always a mix between red green and
blue those are the three primary colors
and all other colors in the spectrum are
a mixture of those three colors so in
order to get yellow there's a mix of
green and there's a mix of red in order
to get pink it's a mixture between red
and blue but these are just the basic
combinations now if I added a lot more
red than blue you would get another
color here and so that's where you use
the RGB values and so let's go ahead and
use that in our CSS code now and so
let's go ahead and open up Microsoft
Paint or any paint application that you
have they all will give you your RGB
values and then let's hit edit colors
and let's go to let's just find a custom
color here and we'll drag this over here
to this pink and then we'll move this
slide bar up here and
these are the RGB values right here
we've got 244 red these are numeric
values we've got 28 for green and 235
for blue and of course that corresponds
to over here to these mixtures in
between here that would be this is a
mixture that we're going to get so we're
going to get some sort of pink but you
can see we've got mostly red less green
and a little bit less blue so that's the
mixture so let's go back to our CSS code
and I'm just going to copy and paste
this into here so you specify RGB and
then here are the three values the first
value that goes in here is the red value
the second is for green and the third is
for blue so let's go ahead and add those
now so we had 244 red and was it 28 for
green and 235 for blue and let's go
ahead and save this and you can see
we've got our pink background so what
this does using the RGB value system you
get access to millions of colors and so
that's going to give you a lot more
flexibility in terms of the color
combinations than just the 16 primary
colors final way is to use hex code and
that's actually what I prefer to use the
hex codes rather than the RGB they kind
of do the same thing they give you
access to millions of colors I just
think it's easier to use hex codes and
actually I have an extra semicolon there
for some reason
okay okay let's close that out now how
do you get a hex code well one of the
things you can do we're not going to and
you can do this yourself you can go out
to Google and take these values and
there are converters out there that will
convert it to the hexa code and then you
get the hexa code so all we do is put in
the pound sign and then this is one I
just remember because I've used it
before my websites and I really like it
phox phox CF 79 and let's go ahead and
save this and let's open this up and
there you can see I've actually used
this color on my websites many times and
I really like it as a background color
so let's actually keep that as our
background color for
our web page but again this represents
an RGB value that was that I had
converted into hex code and you see how
much easier it is to put this hex code
here it's a lot easier now what I
recommend you do is this is how I do it
to remember these hex codes because
let's say you find a you know color out
of the 16 million colors that are out
there or whatever and you forget it well
good luck trying to find that again so
what you want to do is write these down
and actually what I do is I usually
paste the color in Windows paint and
then right below it I'll actually put
this in text right below it and so then
that way I can remember that color that
specific color that I wanted that
specific hex code okay that is going to
do it for web colors I will see you guys
in the next video