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.