1 00:00:08,607 --> 00:00:09,530 Hi. 2 00:00:09,530 --> 00:00:12,330 In today's lecture, we're going to be talking about colors. 3 00:00:12,330 --> 00:00:15,280 Before I really jump in, though, I just want to remind you that I'm 4 00:00:15,280 --> 00:00:19,640 a computer scientist, and art and design are not necessarily my core background. 5 00:00:19,640 --> 00:00:21,440 In fact, I'm pretty bad at it. 6 00:00:21,440 --> 00:00:24,480 So what I'm gonna be talking to you about today when I'm talking about colors 7 00:00:24,480 --> 00:00:26,950 is the best way to code up colors. 8 00:00:26,950 --> 00:00:28,660 Instead, when you're really looking for 9 00:00:28,660 --> 00:00:31,300 advice on what the best color schemes are going to be. 10 00:00:31,300 --> 00:00:33,610 I'm gonna direct you to different places online and 11 00:00:33,610 --> 00:00:37,600 let you use your own expertise to kind of figure out what goes best with each other. 12 00:00:37,600 --> 00:00:40,160 But let's begin with how we use colors on your web page. 13 00:00:41,640 --> 00:00:44,540 We talk about the three different basic color conventions, 14 00:00:44,540 --> 00:00:46,260 the main ones that people use. 15 00:00:46,260 --> 00:00:49,500 Conventions is just another word for suggestions. 16 00:00:49,500 --> 00:00:50,350 It's not a rule. 17 00:00:50,350 --> 00:00:52,420 You don't have to follow the rules I'm going to give you. 18 00:00:52,420 --> 00:00:54,770 It's just the way that most programmers program so 19 00:00:54,770 --> 00:00:58,820 that they can understand what you're trying to do, when they look at your code. 20 00:00:58,820 --> 00:01:02,710 One way that you cn add color is to just simply use the English word. 21 00:01:02,710 --> 00:01:04,770 Blue, red, yellow, etc. 22 00:01:04,770 --> 00:01:07,580 These work, and they'll show up fine on your page. 23 00:01:07,580 --> 00:01:11,440 The problem is, is that it's not consistent across the pages. 24 00:01:11,440 --> 00:01:14,360 What's yellow to one browser is not the exact same shade 25 00:01:14,360 --> 00:01:16,040 of yellow to another browser. 26 00:01:16,040 --> 00:01:20,320 So in general, we avoid color names when your final project is coming up. 27 00:01:20,320 --> 00:01:21,940 When you're just coding and hacking away, 28 00:01:21,940 --> 00:01:24,110 you just want to pop something up on the screen. 29 00:01:24,110 --> 00:01:24,870 No problem. 30 00:01:24,870 --> 00:01:28,750 Use blue or red or yellow but then later what you're going to want to do. 31 00:01:28,750 --> 00:01:32,260 It changed when these other two conventions I'm going to talk about. 32 00:01:32,260 --> 00:01:34,820 The first one is called hexadecimal. 33 00:01:34,820 --> 00:01:37,650 Hexadecimal you might recognize the decimal part, 34 00:01:37,650 --> 00:01:39,990 that's how we count from zero to nine. 35 00:01:39,990 --> 00:01:43,610 Hexadecimal just means they have sixteen digits instead of ten. 36 00:01:43,610 --> 00:01:48,023 So you can use zero to nine, but then also A, B, C, D, E, and F. 37 00:01:48,023 --> 00:01:52,060 And F is kind of like the strongest, most powerful number you can use. 38 00:01:52,060 --> 00:01:54,630 When you do hexadecimal, it's always set up the same, 39 00:01:54,630 --> 00:01:58,740 where you have a pound sign followed by either three or six digits. 40 00:01:58,740 --> 00:02:01,136 The examples I have here for you are six digits. 41 00:02:01,136 --> 00:02:05,207 And the way it works is that you have a red, green, and blue value, and 42 00:02:05,207 --> 00:02:10,510 the bigger the number you put in there, the more red, green, or blue you'll see. 43 00:02:10,510 --> 00:02:11,970 So here's my example. 44 00:02:11,970 --> 00:02:13,980 I have an example of blue, red, but 45 00:02:13,980 --> 00:02:17,800 also yellow because depending on how much of these different values you put in, 46 00:02:17,800 --> 00:02:20,990 it's can change the color that's gonna show up on your screen. 47 00:02:20,990 --> 00:02:25,930 Now hexadecimal is probably the most common way of doing colors when you look 48 00:02:25,930 --> 00:02:31,390 at a lot of people's pages, but another way that's coming up a lot is the RGB. 49 00:02:31,390 --> 00:02:34,746 Again, it's the same idea that we have red, green, and blue, 50 00:02:34,746 --> 00:02:38,913 but instead of using these kind of strange hexadecimal numbers, the zero to F, 51 00:02:38,913 --> 00:02:41,737 instead you're using numbers between zero and one. 52 00:02:41,737 --> 00:02:46,102 So here I've done the same thing, I've just done one, one, and one, one. 53 00:02:46,102 --> 00:02:49,767 I could have just as easily put 0.5, 0.8, 0.6, and 54 00:02:49,767 --> 00:02:53,390 that would change the strength of the color. 55 00:02:53,390 --> 00:02:56,359 So here I have rgb (0,0,1). 56 00:02:56,359 --> 00:03:00,791 One of the reasons that people have been switching over to rgb is that there's 57 00:03:00,791 --> 00:03:02,508 another option called rgba. 58 00:03:02,508 --> 00:03:06,548 And for the longest time I really had to think about what that a meant and 59 00:03:06,548 --> 00:03:09,510 what it stands for is alpha transparency. 60 00:03:09,510 --> 00:03:12,920 So you have a fourth value on the end that says, you know what? 61 00:03:12,920 --> 00:03:17,670 I want to use this blue color, but I wanna kind of make it a little bit see through. 62 00:03:17,670 --> 00:03:18,970 So when it comes up, 63 00:03:18,970 --> 00:03:22,180 if I were to actually make it zero it would be completely see through. 64 00:03:22,180 --> 00:03:24,325 If I were to give it a final value of one, 65 00:03:24,325 --> 00:03:26,871 it would look just like the regular rgb value. 66 00:03:26,871 --> 00:03:30,458 Now one of the interesting things to note is that, if you're watching this video 67 00:03:30,458 --> 00:03:33,960 right now and there's someone next to you watching the video on their screen. 68 00:03:33,960 --> 00:03:38,240 It's absolutely possible that if you look over, It looks different. 69 00:03:38,240 --> 00:03:41,200 You need to remember that different monitors can display colors in 70 00:03:41,200 --> 00:03:42,730 different ways, all right? 71 00:03:42,730 --> 00:03:45,620 So I want to show you an example really quick on the web 72 00:03:45,620 --> 00:03:48,830 of how you can see some of these different colors and how they're working. 73 00:03:48,830 --> 00:03:52,140 What I brought up here is my course webpage and it's okay if you can't see it. 74 00:03:52,140 --> 00:03:53,520 I know it's kind of small. 75 00:03:53,520 --> 00:03:57,550 What I want to show you is me using something called Inspect Element 76 00:03:57,550 --> 00:03:59,780 to really kind of look at my page, and look at the colors, 77 00:03:59,780 --> 00:04:03,450 and a really quick way for me to see how I can make it look different. 78 00:04:03,450 --> 00:04:05,128 So I have my mouse, right here. 79 00:04:05,128 --> 00:04:08,710 I'm gonna right-click, and i'm gonna go down to Inspect Element. 80 00:04:10,710 --> 00:04:14,350 Now for some of you, this part may pop over to the side or underneath. 81 00:04:14,350 --> 00:04:17,212 You can move it around by clicking on this button over here. 82 00:04:17,212 --> 00:04:21,903 But as you can see I'm gonna highlight my h1 and go down here to the span. 83 00:04:21,903 --> 00:04:24,919 And you can be like oh, there's the color I'm using. 84 00:04:24,919 --> 00:04:28,122 I'm gonna go ahead and click on this, and as you can see 85 00:04:28,122 --> 00:04:32,663 I can actually in real time, kind of play with which different colors I want. 86 00:04:32,663 --> 00:04:35,362 I kind of like that one better than the blue and 87 00:04:35,362 --> 00:04:39,970 you can see that it is changing the hexadecimal value for me down there. 88 00:04:39,970 --> 00:04:40,880 So if I wanted to, 89 00:04:40,880 --> 00:04:44,730 I could find the perfect color, this green is not the perfect color. 90 00:04:44,730 --> 00:04:47,890 I could find the perfect color, grab that hexadecimal value and 91 00:04:47,890 --> 00:04:49,720 put into my style sheet. 92 00:04:49,720 --> 00:04:52,900 They also give you the option of the RGBA value as well so 93 00:04:52,900 --> 00:04:55,210 you can do it either way you want. 94 00:04:55,210 --> 00:04:59,370 I love using expect element to kind of play with the colors because it's so 95 00:04:59,370 --> 00:05:03,370 much easier when you can see what's happening as you're designing it. 96 00:05:03,370 --> 00:05:07,179 If you want to check something else I can even go down here, each thing as you 97 00:05:07,179 --> 00:05:10,880 highlight you can add colors, do different things along the same line. 98 00:05:10,880 --> 00:05:13,735 So I wouldn't suggest this, but I'm gonna add a background color. 99 00:05:13,735 --> 00:05:16,610 And as you can see, they have the actual names. 100 00:05:16,610 --> 00:05:19,891 Because it's very unlikely that if you were to scroll through the different 101 00:05:19,891 --> 00:05:22,670 hexadecimal values you have any idea what it's talking about. 102 00:05:23,680 --> 00:05:27,250 And instead of actually using the word beige, once again I can click on that box. 103 00:05:27,250 --> 00:05:29,590 It'll pop up the hexadecimal value for me. 104 00:05:29,590 --> 00:05:33,000 So this is where it can get really fun and really bad, 105 00:05:33,000 --> 00:05:35,550 because you can just start falling down this rabbit hole. 106 00:05:35,550 --> 00:05:36,483 And you're like, oh I like this color. 107 00:05:36,483 --> 00:05:37,559 No this color's better. 108 00:05:37,559 --> 00:05:41,320 You're beginning, you're starting off, just pick a color, play with it, and 109 00:05:41,320 --> 00:05:42,255 keep going with it. 110 00:05:42,255 --> 00:05:42,980 But let's go back. 111 00:05:44,550 --> 00:05:47,910 One of the things that happens when people are using color is there's this 112 00:05:47,910 --> 00:05:52,550 really natural tendency to want to use color to emphasize something, or 113 00:05:52,550 --> 00:05:54,450 explain how important something is. 114 00:05:54,450 --> 00:05:56,990 You may have seen when you filled out forms that it says 115 00:05:56,990 --> 00:05:59,570 make sure to fill out everything that's in red. 116 00:05:59,570 --> 00:06:03,120 Well, this can be a real problem when it comes to accessibility. 117 00:06:03,120 --> 00:06:06,707 And I want you to make sure that you're trying to think about the most appropriate 118 00:06:06,707 --> 00:06:09,200 way to use your color when you're designing your page. 119 00:06:09,200 --> 00:06:12,645 And one of the things you need to think about is that it's not enough to think, 120 00:06:12,645 --> 00:06:14,425 oh someone can use the screen reader. 121 00:06:14,425 --> 00:06:17,335 I'm gonna use HTML tags to really make sure 122 00:06:17,335 --> 00:06:20,105 that they can pick up the semantics from the page. 123 00:06:20,105 --> 00:06:24,095 No, there are a lot of people reviewing your site who aren't legally blind. 124 00:06:24,095 --> 00:06:26,975 Instead, they're visually impaired or they're just color blind. 125 00:06:26,975 --> 00:06:30,490 They're, many more people are color blind than you would ever really get. 126 00:06:30,490 --> 00:06:32,810 So you wanna make sure that when you're using your page, 127 00:06:32,810 --> 00:06:36,900 you're thinking about whether the colors are conveying meaning or just style. 128 00:06:38,150 --> 00:06:43,010 So think about your color contrast and what color contrast it that 129 00:06:43,010 --> 00:06:47,570 when you look at a page is the text on a good color for the background? 130 00:06:47,570 --> 00:06:51,880 Most of us intuitively know when something has really poor color contrast. 131 00:06:51,880 --> 00:06:53,410 We're squinting at it. 132 00:06:53,410 --> 00:06:54,200 But to be honest, 133 00:06:54,200 --> 00:06:58,490 very few of us know what the really exact level is of where you need to go. 134 00:06:58,490 --> 00:07:01,440 So what you can do is you can use different tools 135 00:07:01,440 --> 00:07:05,420 to help you quantify the contrast between text and its background color. 136 00:07:05,420 --> 00:07:06,780 I've put in two links here. 137 00:07:06,780 --> 00:07:10,160 The wave.waveaim.org, and the Wave contrast checker. 138 00:07:10,160 --> 00:07:13,520 And I'm gonna show you just a quick example of how you can use these 139 00:07:13,520 --> 00:07:14,190 to check a page. 140 00:07:14,190 --> 00:07:19,327 So I go over here, and I've got the wave.webbing.org. 141 00:07:19,327 --> 00:07:22,390 And you can go ahead and you can type in any URL you want right here. 142 00:07:22,390 --> 00:07:27,580 I'm gonna go ahead and put in my own personal web page from UMISH, 143 00:07:27,580 --> 00:07:29,870 which may change by the time this comes up. 144 00:07:29,870 --> 00:07:32,390 And, as you can see, you can go over here and it'll check your styles, 145 00:07:32,390 --> 00:07:33,664 it'll check your different HTML. 146 00:07:33,664 --> 00:07:37,420 But if you check where my mouse is, you can also check on the contrast. 147 00:07:37,420 --> 00:07:39,860 And it'll go in and it'll say, nope, this looks good. 148 00:07:39,860 --> 00:07:42,530 There were no color contrast issues detected. 149 00:07:42,530 --> 00:07:46,320 You'll be surprised how much, though, you will get examples. 150 00:07:46,320 --> 00:07:50,360 They can be extremely picky and if it's really something that you feel strongly 151 00:07:50,360 --> 00:07:52,530 that you can see, absolutely, stick with it. 152 00:07:52,530 --> 00:07:56,320 But you wanna take their suggestions with a grain of salt. 153 00:07:56,320 --> 00:07:58,350 The one thing I really wanted to talk to you about again, 154 00:07:58,350 --> 00:08:02,380 is just this whole idea of don’t use color alone to convey meaning. 155 00:08:02,380 --> 00:08:06,440 This is a typical kind of bar graph for people to use colors to say, hey this is 156 00:08:06,440 --> 00:08:10,800 how much share is Apple iPhone, the Pre Palm, different things along that line. 157 00:08:10,800 --> 00:08:13,540 So let's look at that same graph but in grayscale. 158 00:08:13,540 --> 00:08:17,240 And suddenly you can see it's pretty much useless to anybody who's really trying to 159 00:08:17,240 --> 00:08:22,170 pick out these parts in the middle where the colors are extremely similar. 160 00:08:22,170 --> 00:08:24,320 Instead, if you're going to use a graph like this, 161 00:08:24,320 --> 00:08:27,460 I'm not saying you can't, I'm saying make sure you're providing alternatives. 162 00:08:27,460 --> 00:08:30,180 Make sure you've got alternate text or you've got a caption or 163 00:08:30,180 --> 00:08:33,120 someplace else where people can link to to get this information. 164 00:08:34,480 --> 00:08:38,137 All right, so I know I didn't talk a lot about the different colors that you can 165 00:08:38,137 --> 00:08:40,799 use, or the different colors that go together, again, 166 00:08:40,799 --> 00:08:43,923 because that's not really something I need to lecture you about. 167 00:08:43,923 --> 00:08:45,930 It's something that you can go off on your own and learn. 168 00:08:45,930 --> 00:08:50,920 What I did want you to understand is how those different color conventions work. 169 00:08:50,920 --> 00:08:55,110 How that you know you can use hexadecimal or RGB, RGBA, or 170 00:08:55,110 --> 00:08:58,720 even the words themselves, but you want to kind of get away from that. 171 00:08:58,720 --> 00:08:59,730 Finally when you're done, 172 00:08:59,730 --> 00:09:02,720 when you've got your colors going, don't get too attached to them. 173 00:09:02,720 --> 00:09:04,950 Because you're gonna be surprised at how often, 174 00:09:04,950 --> 00:09:08,110 when you check your site using a contrast checker, that what you thought looks 175 00:09:08,110 --> 00:09:12,390 really great really isn't something that's accessible to everybody. 176 00:09:12,390 --> 00:09:14,150 So have fun with the colors. 177 00:09:14,150 --> 00:09:15,850 Use inspect element. 178 00:09:15,850 --> 00:09:19,040 Everyone loves to play with these different design elements of your page. 179 00:09:19,040 --> 00:09:22,280 And I hope that you've learned something here that's useful as you continue 180 00:09:22,280 --> 00:09:23,850 programming, and keep styling your site.