Original subtitles

1 1

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.