In this lesson, you are going to learn a bit more about CSS. In the last lesson you learned the basics of CSS, its syntax, as well as how you can name styles with classes and IDs. In this lesson you're going to learn a bit more about colors in CSS. In particular, you will learn that you can specify them not only by name, but also by numeric values. An instance of an important concept that you will learn in the next lesson that everything is a number for a computer. Remember from last time that you learned to style the h1 tags to be blue and centered. We use blue as the value for the property color to achieve this styling. What if you wanted to use another color? We saw green in another example. So you could guess that you might be able to use a variety of basic colors such as red and yellow, and you would be right. But you might want to design a webpage with more sophisticated color choices. CSS supports a much wider variety of color names. Giving you the ability to choose some nice shades of different colors, here's a few of my favorites. BlueViolet is a nice shade of purple, gold is of course gold colored. Light Blue Steel is a nice bluish-gray, and Fire Brick is a deep red. In fact there are 140 standard color names giving you a wide selection of colors to choose from by name. How could you remember them all? As with many other things nobody memorizes these sorts of things. Instead what's important is knowing how to look up what you need. You can find websites, such as this one, which will show you the various colors, as well as their names. However, even 140 colors is not a lot. What if you wanted some other shade of a color that does not have a standard name? It seems like we might want more colors, but how many would we need? Humans can perceive literally millions of colors. For example, we have here 12 very suddenly different shades of blue, ranging from very dark on the left, to a medium light blue on the right. These are just a few shades of blue, and one of them is a very important shade of blue. This bar in the middle is Duke Blue. Of course, there's many more shades of blue, and many more shades of other colors, too. So how could we handle millions of colors? Giving them all names would be somewhat unmanageable. One problem is that someone would have to come up with millions of color names, and standardize them. Another problem is that you would have to look through millions of names to find the color that you want. Limiting the selection of available colors is not a very appealing option. If you really want a particular color, such as exactly Duke Blue, you would be unhappy if you could not get it. Another option would be to give each color a number which is what is actually done. In fact as you would learn later, for a computer, everything is a number so this choice is actually a natural way to handle millions of colors. The way that colors work as numbers is that they are specified by a combination of how much red, green, and blue they have. With each component taking a value between zero and 255. This scheme is sufficient to specify about 16 million colors, which is more than humans can distinguish. in CSS you can specify color by specifying it's red, green, and blue components. By writing rgb and then in open parentheses followed by the numerical value for red, green, and blue each separated by a comma, then a closed parentheses. This syntax takes the red, green, and blue numbers and then combines them into a single numerical value for you. Each of the colors we saw before has their rgb values written on top of them here. You could also specify a color by its entire numerical value by writing a pound side valued by six hexadecimal digits. Hexadecimal means base 16, so each digit has a value from zero to 15. Hexadecimal is convenient to write rgb values since each color has 256 possible values, meaning exactly two hexadecimal digits. The left two digits, here, specify the red. The middle two digits specify the green, and the right two digits specify the blue. You do not need to be able to convert to and from hexadecimal, but for those who are curious we will take a closer look. Your use to base 10 numbers where each place is 10 times the previous. You have the 1's, the 10's and 100's places and so on. In hexadecimal each place is 16 times the previous. So you have the 1's, the 16's, 256's, place and so on. If we look at the two digits for each color we have the ones and 16's places. The red of this color is 8A, which is 8 in the 16's place plus A, which is 10 in the 1's place, that makes 138. For the green you get 2 in the 16's place. Plus B, which is 11 in the 1's place, which makes 43. For blue you have E which is 14 in the 16's place, and two in the 1's place, which makes 226. Many people find it easier to choose colors graphically and let a tool give them the number. Let us see an example of this with Mozilla's color picker. This is the color picker tool available from Mozilla. You can see the URL of this tool at the top of the web browser here. But you can also find the link to it and the reading that goes with this lesson. As we look down at the main part of this tool, you will see it has a colored box and a colored slider. Moving the slider around, adjusts the hue of the color. You can see red, yellow, green, blue, purple, and red. Maybe you want a shade of say purple. You can then adjust the specific shade in the box on the left. You can get grayer, or brighter, or lighter, or darker, I'm going to pick this color. Once you find the color you want, this tool displays the numeric information to the right. For this shade of purple, the red is 232, the green is 73, and the blue is 227. You can also read the entire hexidecimal number from the box on the bottom. It's E849E3. There's some more advanced features, such as alpha, which lets you adjust transparency in case you are layering objects. If you wanted to use that, this other slider would let you change the transparency. The tool also shows HSL, which is just a different way to represent colors as numbers, but we wont worry about that. So if you want to pick a specific color graphically, a tool like this can be really great. That concludes our lesson on colors and CSS. You have learned that there are many standard names, which you can look up when you need them. And that you can specify millions of color by numerical values, either by writing rgb and the red, green, and blue values that you want. Or by writing a pound sign and the hexidecimal value of the color's number. We also saw a color picker tool, which lets you look for the color you want to use. And then gives you the numerical values for that color to write in your CSS.
