Hi. In today's lecture, we're going to be talking about colors. Before I really jump in, though, I just want to remind you that I'm a computer scientist, and art and design are not necessarily my core background. In fact, I'm pretty bad at it. So what I'm gonna be talking to you about today when I'm talking about colors is the best way to code up colors. Instead, when you're really looking for advice on what the best color schemes are going to be. I'm gonna direct you to different places online and let you use your own expertise to kind of figure out what goes best with each other. But let's begin with how we use colors on your web page. We talk about the three different basic color conventions, the main ones that people use. Conventions is just another word for suggestions. It's not a rule. You don't have to follow the rules I'm going to give you. It's just the way that most programmers program so that they can understand what you're trying to do, when they look at your code. One way that you cn add color is to just simply use the English word. Blue, red, yellow, etc. These work, and they'll show up fine on your page. The problem is, is that it's not consistent across the pages. What's yellow to one browser is not the exact same shade of yellow to another browser. So in general, we avoid color names when your final project is coming up. When you're just coding and hacking away, you just want to pop something up on the screen. No problem. Use blue or red or yellow but then later what you're going to want to do. It changed when these other two conventions I'm going to talk about. The first one is called hexadecimal. Hexadecimal you might recognize the decimal part, that's how we count from zero to nine. Hexadecimal just means they have sixteen digits instead of ten. So you can use zero to nine, but then also A, B, C, D, E, and F. And F is kind of like the strongest, most powerful number you can use. When you do hexadecimal, it's always set up the same, where you have a pound sign followed by either three or six digits. The examples I have here for you are six digits. And the way it works is that you have a red, green, and blue value, and the bigger the number you put in there, the more red, green, or blue you'll see. So here's my example. I have an example of blue, red, but also yellow because depending on how much of these different values you put in, it's can change the color that's gonna show up on your screen. Now hexadecimal is probably the most common way of doing colors when you look at a lot of people's pages, but another way that's coming up a lot is the RGB. Again, it's the same idea that we have red, green, and blue, but instead of using these kind of strange hexadecimal numbers, the zero to F, instead you're using numbers between zero and one. So here I've done the same thing, I've just done one, one, and one, one. I could have just as easily put 0.5, 0.8, 0.6, and that would change the strength of the color. So here I have rgb (0,0,1). One of the reasons that people have been switching over to rgb is that there's another option called rgba. And for the longest time I really had to think about what that a meant and what it stands for is alpha transparency. So you have a fourth value on the end that says, you know what? I want to use this blue color, but I wanna kind of make it a little bit see through. So when it comes up, if I were to actually make it zero it would be completely see through. If I were to give it a final value of one, it would look just like the regular rgb value. Now one of the interesting things to note is that, if you're watching this video right now and there's someone next to you watching the video on their screen. It's absolutely possible that if you look over, It looks different. You need to remember that different monitors can display colors in different ways, all right? So I want to show you an example really quick on the web of how you can see some of these different colors and how they're working. What I brought up here is my course webpage and it's okay if you can't see it. I know it's kind of small. What I want to show you is me using something called Inspect Element to really kind of look at my page, and look at the colors, and a really quick way for me to see how I can make it look different. So I have my mouse, right here. I'm gonna right-click, and i'm gonna go down to Inspect Element. Now for some of you, this part may pop over to the side or underneath. You can move it around by clicking on this button over here. But as you can see I'm gonna highlight my h1 and go down here to the span. And you can be like oh, there's the color I'm using. I'm gonna go ahead and click on this, and as you can see I can actually in real time, kind of play with which different colors I want. I kind of like that one better than the blue and you can see that it is changing the hexadecimal value for me down there. So if I wanted to, I could find the perfect color, this green is not the perfect color. I could find the perfect color, grab that hexadecimal value and put into my style sheet. They also give you the option of the RGBA value as well so you can do it either way you want. I love using expect element to kind of play with the colors because it's so much easier when you can see what's happening as you're designing it. If you want to check something else I can even go down here, each thing as you highlight you can add colors, do different things along the same line. So I wouldn't suggest this, but I'm gonna add a background color. And as you can see, they have the actual names. Because it's very unlikely that if you were to scroll through the different hexadecimal values you have any idea what it's talking about. And instead of actually using the word beige, once again I can click on that box. It'll pop up the hexadecimal value for me. So this is where it can get really fun and really bad, because you can just start falling down this rabbit hole. And you're like, oh I like this color. No this color's better. You're beginning, you're starting off, just pick a color, play with it, and keep going with it. But let's go back. One of the things that happens when people are using color is there's this really natural tendency to want to use color to emphasize something, or explain how important something is. You may have seen when you filled out forms that it says make sure to fill out everything that's in red. Well, this can be a real problem when it comes to accessibility. And I want you to make sure that you're trying to think about the most appropriate way to use your color when you're designing your page. And one of the things you need to think about is that it's not enough to think, oh someone can use the screen reader. I'm gonna use HTML tags to really make sure that they can pick up the semantics from the page. No, there are a lot of people reviewing your site who aren't legally blind. Instead, they're visually impaired or they're just color blind. They're, many more people are color blind than you would ever really get. So you wanna make sure that when you're using your page, you're thinking about whether the colors are conveying meaning or just style. So think about your color contrast and what color contrast it that when you look at a page is the text on a good color for the background? Most of us intuitively know when something has really poor color contrast. We're squinting at it. But to be honest, very few of us know what the really exact level is of where you need to go. So what you can do is you can use different tools to help you quantify the contrast between text and its background color. I've put in two links here. The wave.waveaim.org, and the Wave contrast checker. And I'm gonna show you just a quick example of how you can use these to check a page. So I go over here, and I've got the wave.webbing.org. And you can go ahead and you can type in any URL you want right here. I'm gonna go ahead and put in my own personal web page from UMISH, which may change by the time this comes up. And, as you can see, you can go over here and it'll check your styles, it'll check your different HTML. But if you check where my mouse is, you can also check on the contrast. And it'll go in and it'll say, nope, this looks good. There were no color contrast issues detected. You'll be surprised how much, though, you will get examples. They can be extremely picky and if it's really something that you feel strongly that you can see, absolutely, stick with it. But you wanna take their suggestions with a grain of salt. The one thing I really wanted to talk to you about again, is just this whole idea of don’t use color alone to convey meaning. This is a typical kind of bar graph for people to use colors to say, hey this is how much share is Apple iPhone, the Pre Palm, different things along that line. So let's look at that same graph but in grayscale. And suddenly you can see it's pretty much useless to anybody who's really trying to pick out these parts in the middle where the colors are extremely similar. Instead, if you're going to use a graph like this, I'm not saying you can't, I'm saying make sure you're providing alternatives. Make sure you've got alternate text or you've got a caption or someplace else where people can link to to get this information. All right, so I know I didn't talk a lot about the different colors that you can use, or the different colors that go together, again, because that's not really something I need to lecture you about. It's something that you can go off on your own and learn. What I did want you to understand is how those different color conventions work. How that you know you can use hexadecimal or RGB, RGBA, or even the words themselves, but you want to kind of get away from that. Finally when you're done, when you've got your colors going, don't get too attached to them. Because you're gonna be surprised at how often, when you check your site using a contrast checker, that what you thought looks really great really isn't something that's accessible to everybody. So have fun with the colors. Use inspect element. Everyone loves to play with these different design elements of your page. And I hope that you've learned something here that's useful as you continue programming, and keep styling your site.
