The color is specified in CSS in the ways just demonstrated because of both how display technologies produce color and how humans perceive it. In display screen technologies, such as computer, mobile, tablet, and TV screens, color is produced by mixing differently colored lights. As first mentioned in Chapter 6 in relation to the color of images, the display area of a screen is essentially made up of thousands of tiny pixels. Each of these pixels contains red, green, and blue components, sometimes called subpixels. By illuminating specific pixels, it is possible to produce a pattern on the screen that we see as text or image. The color of each pixel at any point in time is determined by the mixture of the lights from its red, green, and blue components, whose light intensity can vary, as specified. This method of producing color is known as an additive color method, since it involves adding different colors together to produce the required one. The red, green, and blue colors are known as additive primary colors, and the colors produced in this way are known as RGB colors. The concept of mixing red, green, and blue colors is known as RGB color model. Figure 9.5 illustrates the concept.
FIGURE 9.5 An illustration of the RGB color method.
The RGB model is capable of producing most of the colors visible to humans, and when each color is represented with 8 bits (i.e., 24 bits for all
red, green, and blue together), up to 16,777,216 (i.e., 224) different colors can be produced. Representing red, green, and blue, each with 8 bits, means that 256 (i.e., 28) different shades of each can be produced and specified on a 0-255 scale. Recall from Chapter 6 that the number of bits used to represent a color is bit depth or color depth.
There are also other color models, such as YUV used by camcorders for encoding video and CMYK used by printers, but RGB is the only one relevant to CSS. The RGB model is the most important color model in computer application development, since most of the interaction with an application happens on the screen. Although it is suitable for describing color in terms of primaries and human perception of colors, it is not suitable for describing how humans describe color. Indeed, it is seldom obvious to most people that a color contains red, green, or blue, and we hardly know what proportions of these colors make up a color when we look at it; rather, we see a color in terms of a variation of a hue and describe it in the same way. For example, we might say “a shade of red,” “deep green,” and “light blue.” In other words, we tend to describe colors in terms of the hue, intensity of the hue, and its lightness or darkness. The aim of the alternatives to the RGB color model is to model color in terms of these properties. The most common of these alternatives are HSL and HSV.
You have already encountered HSL earlier. HSV stands for hue, saturation, and value (lightness), which is also described in some visual- media-editing applications as HSB (hue, saturation, and brightness) or HSI (hue, saturation, and intensity). Only HSL is supported by CSS. Figure 9.6 shows a representation of the model. 07360° hue is red; 120° hue is green; and 240° hue is blue. In loose terms, hue is the same as pure color. Saturation is the amount of gray in a color. At 0%, the amount of gray is at maximum (100%), while the amount of hue is 0%, making the color to be displayed as gray. Lightness (or value) is the amount of white or black in a color. At 0%, the amount of black is at maximum (100%), resulting in a black color, and at 100%, the amount of white is maximum, resulting in white. At 50%, the amounts of white and black are normal, which means that saturation is also at 100%, meaning that a pure color is displayed.
The colors resulting from adding white to a color are usually referred to as tints; the colors resulting from adding gray to a color are referred to as tones; and the colors resulting from adding black to a color are referred to as shades. Figure 9.7 illustrates this.
1. Determining Color Values
Most programs used for producing visual media provide a tool, typically a color picker, which allows color to be chosen based on more than one color model and in a number of ways. These tools can be considered in the first instance to find the RGB or HSL color component values for your desired color. Figure 9.8 shows an example. The desired color can be produced using the spectrum slider in conjunction with clicking on the Color Field. The equivalent color values are displayed in the various color model sections. Notice that it is HSB, not HSL, that is offered. The difference between the two is that lightness adds white and black, whereas brightness adds only black. Some pickers also include sliders for the alpha channel.
If these color pickers are not of adequate use, there are many free online color converters that allow the conversion of a color value from one model to another. They also allow color names to be specified, and they work on a similar principle as the one in Figure 9.8.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.