 In this section of this session, we are going to talk about color theory for web designers. And we're going to start with the question, how do humans see color? And the answer is in a lot of different ways. Most people probably perceive the colors in this pile of crayons much in the same way that I do. But those who are impacted by a variety of the different types of color blindness that one could have could see them in lots of different ways. Most of the time, when we think about color blindness, we think it looks like this. We think it's just variants of gray. And for most people who have a variant of color blindness, that's not true. It's usually representative of one of the other examples that was shown earlier. But this allows us to have a frame for how color is not a physical property of objects. And I'm going to repeat that because when I say this to people, usually they look at me and go, no, it is. No, it's not. Color is not a physical property of objects. Color is a psychophysical property. What does that mean? Well, when we see something in the world, light hits the object, wavelengths of that light are absorbed by the object, and some of them are reflected by the object. Those rays of light go through our eyes. They hit our retina. And our retina has rods and cones on it. And those rods and cones interpret what they're seeing and send that information to our brain, which allows us to perceive color and light and other things. Okay, so rods. Rods only contain one photopigment. It's called rodipsin. And all rods have the same sensitivity to wavelengths, which means that rods have absolutely nothing to do with color. But their power is enabling us to see in low light levels. So if you are looking at what would otherwise be a red apple in a dark room, that otherwise red apple will look like it is dark gray. And that's because of your rods. Cones, humans have three different kinds of these. Short, medium, and long wavelengths, which roughly correspond to blue, green, and red portions of the visual light spectrum. Which leads us to trichromatic color theory, which is the basis of human color theory perception. Our visual system is defined by numbers that correspond to the proportional outputs of those three cone types. So we're going to talk about that more in a second. But the overarching theory here is that all of us see differently. And many animals see differently. Dogs are what are called dichromats. That means that they have two different types of cones in their eyes. So they can see color, but they see it differently than we do. They see parts of the blue spectrum and parts of the yellow spectrum. Bees are also trichromats, but they cannot see the red part of the color spectrum. They see blue, green, and ultraviolet, which we can't see at all. This finch is, and many birds, are tetra-chromats. And they see four. They see red, green, blue, and ultraviolet parts. Butterflies and a lot of other insects are really, really interesting. There is a lot of research on this. And there are some butterflies that can see up to 15 different types of ranges in the photopigments in their eyes. So unimaginable to us. Okay. But the point here is we all see color differently. And we all see the color in our physical world differently. When we look at an opaque object, those opaque objects are reflecting all or part of the light that they receive. This is called subtractive synthesis because it is subtracting what it absorbs from the light that you receive in your eyes. So if an object absorbs all light, it will be perceived as black. If it reflects all light, it will be perceived as white. If it absorbs blue and green wavelengths but reflects red, we will see it as red. When we are mixing paint colors, we are mixing opaque pigments. So I'm talking about literal physical art class paint. We are mixing pigments, not light. And this is what our color model for that looks like. It's a little different than what we learned in school. But the primary colors here are cyan, magenta, and yellow. Secondaries are red, green, and blue. That cyan, magenta, and yellow grouping should seem familiar when you think about the color of ink that you buy for your printer. When you combine these, you can get all possible other colors. The reason they sell black ink is because it's a lot easier to just mix it all together first. Okay, when we're mixing light colors, we are combining wavelengths of light. This is additive synthesis. So we have the opposite. The primary colors in this situation are red, green, and blue. Secondaries are cyan, magenta, and yellow. Mixing those pigment colors and light colors have opposite effects, and we can see that here. Okay, so humans, we're all human in this room. There's probably some little tiny bugs elsewhere. Okay, but humans tend to think in subtractive color palettes because these mirror the natural world that we live in. But computers are different. Computer screens are generating color using additive systems. The pixels on our screen are generated with light. So not all screen colors can be printed, and not all print colors can be displayed on a screen. Here is a diagram that is super complicated. It is of different color spaces that are describing systems that humans have created to physically represent color. And so you've got CMYK in there. You've got RGB in there, different types of RGB. And the key here is that these color spaces don't always overlap. So this is one of the reasons why there are some neon colors that you can generate on a screen, but you can't print. When we are talking about the code that we're writing and the CSS that we're writing, there are four ways to identify color values in that code. The first way is through keywords, and the oldest way we are familiar with keywords is through WebSafe colors. WebSafe colors were identified as safe, because at the time, in early, early monitor days, computer monitors were limited to 256 colors. This is because of the number of bits in the monitors themselves, and the reason that 216 were considered safe is because of the politics of those who produced those monitors, not agreeing on what the remaining 40 should be. Okay. Hex colors. A lot of us are more familiar with these. There is a direct correlation between the hex colors that we use and the way we perceive light in our eyes. The red channel, green channel, and blue channel here, those two digit sections of the hex colors, each of those sections is identifying which part of that channel is being displayed on the screen. Each digit ranges from zero at the lowest to F at the highest. There are 16.7 million potential combinations here. Here I have a progression from nothing in that blue channel to the highest value you can have in that blue channel, and you can see that there is just an even progression as we bump that number up. Many of us are also familiar with RGB colors. These work exactly the same way, in the sense that each value that we are defining corresponds to a channel in the color space. Each digit is ranging from zero at the lowest to 255 at the highest, also for 16.7 million potential combinations. Our GB is really cool because we also have an alpha channel, which allows us to add transparency to our color values in one CSS statement. Here we have this chart again, and we're showing from zero in that blue color space all the way up to 255 and even increments. This looks exactly the same as the hex example did, and there's a reason for that. These are actually identical colors. The last way we can identify color in our CSS is through HSL. This is the one no one has ever heard of, and it is using a different color model than the RGB color models that we've been talking about. It's based on hue, which is depicted in a degree from zero to 360, saturation, which is from zero, fully desaturated to 100, and lightness, which is from black to white. HSLA colors, it also supports an alpha channel, which respects values between zero, fully transparent, and one, opaque. Here's a visual representation of that. On the left, you've got the color wheel with the different hue values that you can have. On the right, we're using the blue to demonstrate saturation and then lightness on the bottom right. This is an altogether visualization of how that would work. A lot of in-the-wild uses of HSL in computer systems are in things like color pickers, but you've got to be careful. This is one from Photoshop. You have an HSB value here, and you might think, oh, I can just use that and write an HSL. No, HSB is not the same color space. It stands for hue, saturation, and brightness, and it's not the same as HSL. So watch out for that. This is the last example of the progression, and it works exactly the same way as the others. The first value is hue. It stays at 240 throughout. That's for blue. Saturation stays at 100. And lightness ranges from zero to, in this case, 50%. Because you can change that single value in HSL to go all the way up to full white as well. So as we are writing our CSS and building our websites, there's a few things to think about. Color is a psychophysical, not physical property. Trichromatic color theory describes how humans see and how screens generate color. Mixing pigment colors is the opposite of mixing light colors. Screens cannot display all possible colors of physical objects. And finally, we can use any of these things, keywords, HEX, RGBA, or HSLA to identify our color values. Thank you very much.