OK.
So in this lesson we're going to discuss a lot of the different ways of describing and representing
colors in C Ss and up until now if we go to the assess that we've been writing We've just been using
simple elementary school colors like red and green and purple and obviously those work OK but they're
not particularly nice shades not nice colors.
In my opinion and you'd probably never use them because most designers and most people making websites
have a very specific color palette.
Whether it's something that you know is following the brand's color like a very specific shade of green
for a brand or if it's a color palette.
I'm a designer or someone has created almost nobody uses just the plain default red or green or purple
.
With that said there are quite a few built in colors and CSSA that have names.
And in fact there's probably more than you would think.
And there are way more than most people ever remember.
So there's things like cornflower blue or dark orchid and there's I think 147 different colors.
And this site here which I've actually really never used.
I just want to show it to you it's a way to visualize all the different named colors and see assess
.
And of course the problem with using these is still it's only 147 colors and you might want a color
that just like this gold color but slightly lighter or slightly darker or slightly redder and there's
not going to be a perfect option for you.
And then the other problem is that it's just hard to remember these names like light slate gray.
Nobody remembers that.
So I really only use named colors like red orange purple just for very quick debugging purposes to make
sure something's working.
I'll just turn it red and see if that works.
And also just for educational purposes but most people would never use these colors.
So CSS provides a few different color systems that we can work with.
And these are color systems by the way that exist outside of the SS.
So if you have some familiarity with photography or printing and you've worked with colors before you
may have encountered some of these.
So the first one is something called hexadecimal and before we talk about why it's called hexadecimal
and what that means let's just take a look at a few examples.
So over here the first thing we're doing is selecting all H-1 and changing their text color to be black
.
The next thing we're doing is selecting all the tattoos changing the color to be a shade of purple and
then selecting all age threes and teaching them to be a shade of pink.
So what you'll notice is that rather than having a word like red or purple We now have this hash symbol
and it's technically called an octave Thorpe followed by six digits.
So to get black it's six zeros to get purple.
You'll notice it's numbers but there's also a letter B in there.
And lastly to get this pinkish color it's again numbers and letters this time letter F..
So what's happening here.
I'm going to go ahead and open up some notes that I have.
And we're going to do a really short math lesson is this more just for something I think is interesting
but it's also informative and will help understand how hexadecimal works.
So if you go back to middle school when I was in school at least we talked a lot about the decimal system
and how let's suppose I wanted to create a three digit number.
We have our once place the 10th place in the hundreds place.
So if I wanted a number the largest three digit number I can create is nine hundred ninety nine the
smallest three digit number technically is 111 or 0 0 or 1.
But the idea is that each place in our regular base 10 which is what this means base 10 decimal number
system I have 10 choices for every slot I can do 0 through 9.
So that's base 10 that's what we're used to working with our digits are 0 1 2 3 4 5 6 7 8 9.
But there are other number systems.
So you may have heard of binary before and that's based two.
And so that means we only have 0 and 1 as our options.
So if I wanted to build a three digit binary number the largest one I can build is 1 1 1.
That is not the same as one hundred and eleven.
So this is not really the time to really go over how binary works but you may see things like this in
like CSI shows or any sort of show where they're trying to show you what hacking looks like and they're
totally wrong.
But it is true that binary is a really really important part of how computers work.
So that's based too.
So we just have two choices zero or one.
So hexadecimal is base 16.
So that means that we have 16 choices and those choices go from zero to nine and then rather than going
to 10 11 12 13 14 15.
Those are two digit number two digit numbers which is problematic X more and that includes letters.
So we have 0 through 9 and then ABC DCF.
So the largest hexadecimal number three digit number would be F F F and the smallest 0 0 0.
So it's just like any other number system except we have 16 choices.
And the reason that hexadecimal is used rather than using just decimal to name a color is that it gives
us a lot more choices while keeping the names of recolors relatively short.
So basically has hexadecimal is just taking colors and giving them numeric names.
And if we use base 10 we only have 10 choices per digit.
So we need to use more digits if we use binary and we'd need to use a ton of digits to represent colors
.
Hundreds and hundreds of thousands of digits.
So hexadecimal numbers are six digits long start's than Octa Thorpe.
And then one digit two three four five six.
And the way that it works it's not just random numbers.
There's actually a little bit of a system.
So the first two numbers correspond to how much red is in the color the next to correspond to how much
green and in the last two correspond to how much blue is in the color.
So I'm going to go ahead and switch over to our See assess and show you what I mean.
So let's just work with our H-1 here.
We have three H ones and must style them.
So to use hexadecimal all we do is taper Octa Thorpe and then six digits.
So let's start by defining a red color and remember the first two are red.
So our first two digits if we wanted full red would be f f because that's the highest number.
And then everything else can be zero.
So this is going to save turn red all the way up.
No green and no blue.
And if we do that.
Let's go ahead and open up our file you'll see that are h ones are bright red.
So let's go back and let's play with this a little bit and now to introduce a little bit of green.
So let's give it eight and you'll see we get this slight orange and you might be wondering how is green
red orange.
And the answer is that this is not the same color system that you're used to be mixing paints for instance
RG B works slightly different.
And again that's something for another video.
But essentially if we added up red green and blue all the way up so full red full green and full blue
the resulting color is not like a brown or black like you might expect.
It's actually white and this is actually how light works in the real world.
If you could take to leave the lights or three LCD lights a red green and blue and combine them and
shine them together.
You would actually get white light.
So that's how this color works.
OK.
So most of the time you're actually not coming up with these colors from scratch.
So it's not really.
I mean it's a nice skill but you don't have to be able to identify this color
as some sort of you know shade of purple or green or whatever it is that's not really the scope what
you most often will do is have a color picker.
And so let's say I want like a dark purple shade.
There's all sorts of color pictures.
There's some that are on your machine depending on if you have a Mac or PC you can download one.
Some of them are included but we can also just go online and if I want like a dark purple shade I can
just find this purple.
Let's say
this color here.
And then I can just copy.
I think that copied it.
No you just copy.
There it is this color
and use that refresh and we get a dark purple.
So this is most often what you'll do you'll have a color picker.
Initially you'll pick your colors and then you just refer back to them.
So it's not the most intuitive.
It is nicer if it said something like dark eggplant but then of course that's not going to be as precise
.
That is just one shade of dark purple.
And if I want to change it I'm out of luck.
So that's hexadecimal.
The next color system we're going to talk about is R.G. b so RGV works very similarly except the syntax
is slightly different.
So R.G. B there are three channels just like with hexadecimal.
There's red green and blue.
And what's different is that RGV is still in base 10.
So what we do we have three different channels red green blue and the syntax is color colon and then
the word are the letters R.G. B parentheses and then the value of our read the value of our green and
the value of our blue.
And those range from zero to 255.
So in this case we're saying all age ones are R.G. be where Red is zero green is all the way up in blue
is zero.
And we get this bright green and this one we're setting all age twos to be R.G. be where Red is about
halfway up.
Green is completely gone.
And Blue is about halfway up and we get a nice purple and then this one we're setting all age threes
to be mainly blue with a little green and even less red and we get this shade of blue.
So let's do a few examples.
Let's go for a let's do a purple again.
So we just text the word our G-B parentheses and then we need our channels.
So the first one if we want a purple or want some red let's do 60.
I don't know 68 red.
Zero green and this will be a blue or purple then than a red or purple so we'll do a hundred blue and
we save it.
And of course it doesn't look like much of a change but it did change slightly.
So let's go ahead and now turn up the read quite a bit 240 and you can see we get a pinkish purple.
And if I introduce some green
and if I turn everything all the way up
just like before with hexadecimal full red green and blue actually gives us white and to get black.
You want zero for all three channels.
So our B is very similar to the decimal.
The only difference is the syntax.
So rather than writing out something like this where we have two channels or two digits for red to for
green and two for blue instead we have three slots and we just go from zero to 255.
So just another syntax and one other syntax I want to talk about is our GPA.
So R-GA works just like R.G. B except there's one small twist which is there's a fourth channel called
Alpha which is how you can make colors transparent.
So R.G. V-A is great if you want to have one color that you are making more or less transparent.
So the way that it works it's the same exact syntax except we write R.G. be a and then we have four
channels that we need to fill out.
And the first three just like before.
They range from zero to 255 but the last chant on the alpha channel ranges from zero to 1.
So I'll give you a few examples here.
Here we're setting all three to be the exact same color as far as the RG and B channels are concerned
.
So 11 red.
Ninety nine green 950 blue.
And then the fourth channel we're changing the alpha or changing the transparency.
So with four Alpha with all everything all up no transparency at all.
We end up with this flu.
When we said Alpha to be point six we get this much lighter and and more transparent blue.
And then we set it to be Point two we get this which is barely there.
So let's do another example let's do Archie B-A and this time let's do a green.
So 200 or so green and a little bit of blue and then we need our alpha and let's just start with one
.
Refresh the page and we get this green.
So now let's do the same thing but make it slightly paler So let's do point eight.
I'm going to refresh and you can see it got a little bit paler.
Now let's be more drastic down 2.2 and you can see it gets a lot more transparent.
So to summarize we have the built in colors which most people don't use.
We have hexadecimal.
We have R.G. B then.
RG B.A where the A stand for Alpha