CSS colors - CSS Tutorial

- [Instructor] In this chapter, we will examine CSS graphic design styles that apply specifically to an elements background. In this video, I'm going to examine how colors are defined in CSS, using color names and color values. In the next video, I'll demonstrate how these colors can be applied to the background of page elements in your web pages. The easiest approach is to simply name the color. All browsers support a standard list of 140 color names, ranging from very common names, such red, green, and gold, to more obscure names, such as sea green or deep pink. One problem with color names is that they can be very inexact. For example, how would you describe a color that is a mixture of light red, dark green, and medium blue? To be more specific in describing the color, we have to use color values. But how would you represent a color in terms of a number? There are two approaches. One are RGB color values, in which the color is indicated by the letters rgb, followed by a set of three numbers separated by commas. The first number represents the intensity of red, the second number represents the intensity of green, and the third number of blue. Intensities are measured on a zero to 255 scale, where zero measures the highest intensity of the color. So, in this case, we have a box, which is red, as highest intensity, or 255. However, there are no elements of the green light or blue light in this box. If we reduce the intensity of red down from 255 to zero, the color gets progressively darker and darker as we get to the absence of all colors. On the other hand, if we represent the color with red and green at its highest intensities, we go through different shades of orange up to the color yellow, which is a mixture of red and green at the highest intensities, with no trace of blue. And then, if we increase the intensity of blue up to 255, we get all three colors mixed at their highest intensity, which creates the color white. In this fashion, by changing the intensities, we can go through the whole spectrum of colors. In fact, the RGB color value system creates more colors than the human eye can distinguish. We can augment the RGB color value with a value called alpha that measures the transparency of the color. Now, we replace RGB with RGBA and add a fourth component, which is the transparency of the color. Measure on a scale from zero to one, where zero represents color that is completely transparent and one represents a color that's completely opaque. Now, as we change the value of alpha, we see more and more of the color of the underlying square. So that the intersection point here is a shade of purple, representing the mixture of the underlying red and the blue color that's on top of it. The other type of color value is the HSL value, which, once again, is a mixture of three different components. In this case, the components are hue, saturation, and lightness. Hue is simply the color itself, measured on the color wheel, where zero degrees represents red, 120 degrees represents green, 240 degrees represents blue, and 360 degrees represents red again. Saturation indicates the presence or absence of the color. It's represented on a scale that goes from 0% up to 100%, where 100% represents the complete presence of the color and 0% represents the complete absence of the color, or, in this case, gray. The third component, lightness, is also measured on a zero to 100% scale, where 100% indicates a color that is completely light, which, in this case, would be white, no matter what the hue of the color is. And 0% would be completely dark, or black. And then other colors, once again, are represented by mixtures of these different components. As with the RGB color value, the HSL color value can also be augmented with an alpha value that indicates transparency. So that by increasing the alpha value, we create something that is more opaque, and decreasing the alpha value creates a color that's more transparent.