1 00:00:01,809 --> 00:00:05,559 Let's talk about colors in CSS. 2 00:00:06,481 --> 00:00:09,916 In CSS, colors are displayed combining red, 3 00:00:09,916 --> 00:00:12,412 green, and blue light. 4 00:00:12,412 --> 00:00:14,245 This is the RGB model. 5 00:00:15,111 --> 00:00:17,903 In the RGB model, each color is defined 6 00:00:17,903 --> 00:00:19,641 by a combination of red, 7 00:00:19,641 --> 00:00:23,391 green, and blue using a hexadecimal notation. 8 00:00:25,207 --> 00:00:27,949 The lowest value for each color is zero, 9 00:00:27,949 --> 00:00:30,855 which is zero in hexadecimal, 10 00:00:30,855 --> 00:00:33,722 and the highest value is 255, 11 00:00:33,722 --> 00:00:35,972 which is ff in hexadecimal. 12 00:00:37,404 --> 00:00:39,412 So, for instance, 13 00:00:39,412 --> 00:00:41,664 the complete red has ff, 14 00:00:41,664 --> 00:00:45,102 which is the highest value in the red channel, 15 00:00:45,102 --> 00:00:48,540 and zero in the green and the blue channel. 16 00:00:48,540 --> 00:00:51,980 Yellow is a mixture of red and green, 17 00:00:51,980 --> 00:00:55,739 so it has ff in the red and in the green channel, 18 00:00:55,739 --> 00:00:57,990 but zero in the blue channel. 19 00:00:57,990 --> 00:01:00,072 You get the idea, right? 20 00:01:00,072 --> 00:01:01,750 You can just pause the video 21 00:01:01,750 --> 00:01:03,550 and look at the RGB model 22 00:01:03,550 --> 00:01:06,883 if you want to analyze all colors there. 23 00:01:08,128 --> 00:01:11,039 So by mixing red, green, and blue together 24 00:01:11,039 --> 00:01:14,723 using different values between zero and 255, 25 00:01:14,723 --> 00:01:17,806 we can obtain over 16 million colors. 26 00:01:19,683 --> 00:01:23,195 For instance, this nice green is represented 27 00:01:23,195 --> 00:01:26,028 with this hexadecimal code 1da717. 28 00:01:28,921 --> 00:01:31,869 So we have 1d for red, a7 for green, 29 00:01:31,869 --> 00:01:33,202 and 17 for blue. 30 00:01:34,119 --> 00:01:37,761 Mixing these together makes this nice green. 31 00:01:37,761 --> 00:01:39,988 But don't worry so much about these numbers 32 00:01:39,988 --> 00:01:42,190 because picking our colors in Brackets 33 00:01:42,190 --> 00:01:43,690 will be very easy. 34 00:01:45,423 --> 00:01:47,798 And for gray colors, just make red, 35 00:01:47,798 --> 00:01:50,744 green, and blue take the same value. 36 00:01:50,744 --> 00:01:52,411 For instance, 8b8b8b 37 00:01:54,389 --> 00:01:57,705 gives us that first shade of gray we see here. 38 00:01:57,705 --> 00:02:01,025 If all six values in a hex code are the same, 39 00:02:01,025 --> 00:02:02,025 like 555555, 40 00:02:04,382 --> 00:02:06,049 we simply write 555. 41 00:02:08,558 --> 00:02:10,642 Now one last thing, 42 00:02:10,642 --> 00:02:14,575 CSS colors can also have transparencies. 43 00:02:14,575 --> 00:02:17,071 If we want colors for transparencies, 44 00:02:17,071 --> 00:02:19,856 we do not use the hexadecimal notation. 45 00:02:19,856 --> 00:02:22,391 Instead, we write them like you can see 46 00:02:22,391 --> 00:02:24,313 on the green square. 47 00:02:24,313 --> 00:02:26,935 This gives us the same green we saw before, 48 00:02:26,935 --> 00:02:29,518 but with 75% transparency. 49 00:02:31,565 --> 00:02:32,640 So, I will now show you 50 00:02:32,640 --> 00:02:35,473 how all of this works in Brackets. 51 00:02:36,834 --> 00:02:39,370 Back to the CSS file of our project, 52 00:02:39,370 --> 00:02:40,254 let's try to change 53 00:02:40,254 --> 00:02:41,971 that green color of the headings 54 00:02:41,971 --> 00:02:43,651 we defined before, 55 00:02:43,651 --> 00:02:45,205 because we will actually never use 56 00:02:45,205 --> 00:02:46,924 color names like green, 57 00:02:46,924 --> 00:02:49,424 as we did in the last lecture. 58 00:02:50,817 --> 00:02:53,683 So put the cursor here on this color, 59 00:02:53,683 --> 00:02:55,812 and then hit Command + E, 60 00:02:55,812 --> 00:02:59,175 just as we did before in the HTML file. 61 00:02:59,175 --> 00:03:00,157 But this time 62 00:03:00,157 --> 00:03:03,349 it's not a CSS editor which comes up, 63 00:03:03,349 --> 00:03:05,599 but this nice color picker. 64 00:03:07,524 --> 00:03:10,716 So this is a pretty powerful color picker. 65 00:03:10,716 --> 00:03:13,951 You can click everywhere around here 66 00:03:13,951 --> 00:03:15,618 to choose the color. 67 00:03:17,073 --> 00:03:18,714 And you actually can see 68 00:03:18,714 --> 00:03:21,631 the color changing in our web page. 69 00:03:24,484 --> 00:03:26,817 We can also use these sliders here 70 00:03:26,817 --> 00:03:30,234 to change the color hue and transparency. 71 00:03:32,054 --> 00:03:34,102 So here I can change the color, 72 00:03:34,102 --> 00:03:36,716 if you wanted a yellow color, 73 00:03:36,716 --> 00:03:39,211 blue color, I don't know. 74 00:03:39,211 --> 00:03:42,294 So we can choose anything right here. 75 00:03:43,388 --> 00:03:44,823 And with this slider, 76 00:03:44,823 --> 00:03:47,544 we can adjust the transparency. 77 00:03:47,544 --> 00:03:49,754 As we saw before, 78 00:03:49,754 --> 00:03:52,421 this now has this RGBA notation, 79 00:03:53,605 --> 00:03:56,874 and here we have the transparency value. 80 00:03:56,874 --> 00:04:00,624 Now I will just put this back up to 100% 81 00:04:02,157 --> 00:04:05,104 and change to the hexadecimal notation 82 00:04:05,104 --> 00:04:07,187 that I showed you before. 83 00:04:09,727 --> 00:04:10,996 So you can play around 84 00:04:10,996 --> 00:04:13,453 with these colors as you wish, 85 00:04:13,453 --> 00:04:16,084 I will just choose some 86 00:04:16,084 --> 00:04:18,417 nice green for our headings. 87 00:04:20,024 --> 00:04:22,030 Maybe this one. 88 00:04:22,030 --> 00:04:24,030 So now I will close this 89 00:04:24,896 --> 00:04:28,371 and now we have a beautiful green color 90 00:04:28,371 --> 00:04:30,383 for all our headings. 91 00:04:30,383 --> 00:04:31,569 Another thing, 92 00:04:31,569 --> 00:04:34,069 I will go to the picker again. 93 00:04:35,131 --> 00:04:39,305 Now if we push this all the way to this side, 94 00:04:39,305 --> 00:04:42,252 we have actually all the shades of gray, 95 00:04:42,252 --> 00:04:45,036 from complete white, which is fff, 96 00:04:45,036 --> 00:04:48,369 all the way down to black, which is 000. 97 00:04:49,538 --> 00:04:51,871 So if we move up and down here, 98 00:04:51,871 --> 00:04:54,121 we can choose a gray color. 99 00:04:56,575 --> 00:05:00,380 But as I said, what I want is a green color. 100 00:05:00,380 --> 00:05:02,715 So just put it here. 101 00:05:02,715 --> 00:05:04,799 And here Bracket even shows us 102 00:05:04,799 --> 00:05:07,297 the colors we use the most in our design. 103 00:05:07,297 --> 00:05:09,097 This can be pretty useful 104 00:05:09,097 --> 00:05:11,347 if you use multiple colors. 105 00:05:12,900 --> 00:05:13,733 All right, 106 00:05:13,733 --> 00:05:16,137 so let me close this color picker, 107 00:05:16,137 --> 00:05:19,499 and I think that's it for now with colors. 108 00:05:19,499 --> 00:05:23,761 So now you know how to work with colors in CSS. 109 00:05:23,761 --> 00:05:26,094 See you in the next lecture.