Voiceover: Let's talk about colors in CSS.
In CSS, colors are displayed combining red,
green, and blue light.
This is the RGB model.
In the RGB model, each color is defined
by a combination of red,
green, and blue using a hexadecimal notation.
The lowest value for each color is zero,
which is zero in hexadecimal,
and the highest value is 255,
which is ff in hexadecimal.
So, for instance,
the complete red has ff,
which is the highest value in the red channel,
and zero in the green and the blue channel.
Yellow is a mixture of red and green,
so it has ff in the red and in the green channel,
but zero in the blue channel.
You get the idea, right?
You can just pause the video
and look at the RGB model
if you want to analyze all colors there.
So by mixing red, green, and blue together
using different values between zero and 255,
we can obtain over 16 million colors.
For instance, this nice green is represented
with this hexadecimal code 1da717.
So we have 1d for red, a7 for green,
and 17 for blue.
Mixing these together makes this nice green.
But don't worry so much about these numbers
because picking our colors in Brackets
will be very easy.
And for gray colors, just make red,
green, and blue take the same value.
For instance, 8b8b8b
gives us that first shade of gray we see here.
If all six values in a hex code are the same,
like 555555,
we simply write 555.
Now one last thing,
CSS colors can also have transparencies.
If we want colors for transparencies,
we do not use the hexadecimal notation.
Instead, we write them like you can see
on the green square.
This gives us the same green we saw before,
but with 75% transparency.
So, I will now show you
how all of this works in Brackets.
Back to the CSS file of our project,
let's try to change
that green color of the headings
we defined before,
because we will actually never use
color names like green,
as we did in the last lecture.
So put the cursor here on this color,
and then hit Command + E,
just as we did before in the HTML file.
But this time
it's not a CSS editor which comes up,
but this nice color picker.
So this is a pretty powerful color picker.
You can click everywhere around here
to choose the color.
And you actually can see
the color changing in our web page.
We can also use these sliders here
to change the color hue and transparency.
So here I can change the color,
if you wanted a yellow color,
blue color, I don't know.
So we can choose anything right here.
And with this slider,
we can adjust the transparency.
As we saw before,
this now has this RGBA notation,
and here we have the transparency value.
Now I will just put this back up to 100%
and change to the hexadecimal notation
that I showed you before.
So you can play around
with these colors as you wish,
I will just choose some
nice green for our headings.
Maybe this one.
So now I will close this
and now we have a beautiful green color
for all our headings.
Another thing,
I will go to the picker again.
Now if we push this all the way to this side,
we have actually all the shades of gray,
from complete white, which is fff,
all the way down to black, which is 000.
So if we move up and down here,
we can choose a gray color.
But as I said, what I want is a green color.
So just put it here.
And here Bracket even shows us
the colors we use the most in our design.
This can be pretty useful
if you use multiple colors.
All right,
so let me close this color picker,
and I think that's it for now with colors.
So now you know how to work with colors in CSS.
See you in the next lecture.