Voiceover: Let's talk about colors in CSS. 2 2
In CSS, colors are displayed combining red, 3 3
green, and blue light. 4 4
This is the RGB model. 5 5
In the RGB model, each color is defined 6 6
by a combination of red, 7 7
green, and blue using a hexadecimal notation. 8 8
The lowest value for each color is zero, 9 9
which is zero in hexadecimal, 10 10
and the highest value is 255, 11 11
which is ff in hexadecimal. 12 12
So, for instance, 13 13
the complete red has ff, 14 14
which is the highest value in the red channel, 15 15
and zero in the green and the blue channel. 16 16
Yellow is a mixture of red and green, 17 17
so it has ff in the red and in the green channel, 18 18
but zero in the blue channel. 19 19
You get the idea, right? 20 20
You can just pause the video 21 21
and look at the RGB model 22 22
if you want to analyze all colors there. 23 23
So by mixing red, green, and blue together 24 24
using different values between zero and 255, 25 25
we can obtain over 16 million colors. 26 26
For instance, this nice green is represented 27 27
with this hexadecimal code 1da717. 28 28
So we have 1d for red, a7 for green, 29 29
and 17 for blue. 30 30
Mixing these together makes this nice green. 31 31
But don't worry so much about these numbers 32 32
because picking our colors in Brackets 33 33
will be very easy. 34 34
And for gray colors, just make red, 35 35
green, and blue take the same value. 36 36
For instance, 8b8b8b 37 37
gives us that first shade of gray we see here. 38 38
If all six values in a hex code are the same, 39 39
like 555555, 40 40
we simply write 555. 41 41
Now one last thing, 42 42
CSS colors can also have transparencies. 43 43
If we want colors for transparencies, 44 44
we do not use the hexadecimal notation. 45 45
Instead, we write them like you can see 46 46
on the green square. 47 47
This gives us the same green we saw before, 48 48
but with 75% transparency. 49 49
So, I will now show you 50 50
how all of this works in Brackets. 51 51
Back to the CSS file of our project, 52 52
let's try to change 53 53
that green color of the headings 54 54
we defined before, 55 55
because we will actually never use 56 56
color names like green, 57 57
as we did in the last lecture. 58 58
So put the cursor here on this color, 59 59
and then hit Command + E, 60 60
just as we did before in the HTML file. 61 61
But this time 62 62
it's not a CSS editor which comes up, 63 63
but this nice color picker. 64 64
So this is a pretty powerful color picker. 65 65
You can click everywhere around here 66 66
to choose the color. 67 67
And you actually can see 68 68
the color changing in our web page. 69 69
We can also use these sliders here 70 70
to change the color hue and transparency. 71 71
So here I can change the color, 72 72
if you wanted a yellow color, 73 73
blue color, I don't know. 74 74
So we can choose anything right here. 75 75
And with this slider, 76 76
we can adjust the transparency. 77 77
As we saw before, 78 78
this now has this RGBA notation, 79 79
and here we have the transparency value. 80 80
Now I will just put this back up to 100% 81 81
and change to the hexadecimal notation 82 82
that I showed you before. 83 83
So you can play around 84 84
with these colors as you wish, 85 85
I will just choose some 86 86
nice green for our headings. 87 87
Maybe this one. 88 88
So now I will close this 89 89
and now we have a beautiful green color 90 90
for all our headings. 91 91
Another thing, 92 92
I will go to the picker again. 93 93
Now if we push this all the way to this side, 94 94
we have actually all the shades of gray, 95 95
from complete white, which is fff, 96 96
all the way down to black, which is 000. 97 97
So if we move up and down here, 98 98
we can choose a gray color. 99 99
But as I said, what I want is a green color. 100 100
So just put it here. 101 101
And here Bracket even shows us 102 102
the colors we use the most in our design. 103 103
This can be pretty useful 104 104
if you use multiple colors. 105 105
All right, 106 106
so let me close this color picker, 107 107
and I think that's it for now with colors. 108 108
So now you know how to work with colors in CSS. 109 109
See you in the next lecture.