Specifying Color in CSS

In CSS, color is specified in a number of ways. One is by color name, as you have already seen in the examples in Chapter 8, used for the purpose of explaining other CSS properties. About 140 predefined color names are recognized by major browsers. The other ways of specifying color are via RGB or HSL values. How to specify these values in CSS is shown first, and how they come to be specified in these ways is explained afterward.

1. RGB Values

These values represent the amount of red (R), green (G), and blue (B) required to produce a color. The syntax used in CSS to specify them is rgb(r,g,b), and the range of each value is 0-255. For example, red is specified using rgb (255,0,0). The values can also be specified in hex codes (i.e., hexadecimal numbers, which are numbers derived from counting in 16s). The format for specifying them is #xxxxxx, where the first xx pair represents red, the second pair represents green, and the third pair represents blue. The hex code for red, for example, is #ff0000. When alpha (i.e., transparency or opacity) level is specified for a color that is specified in RGB values, the color is represented as RGBA and the syntax used to specify it is rgba(r,g,b,a). The value range for alpha is 0-1.0. For example, red with 50% transparency is rgba(255,0,0,0.5). To specify transparency, when hex codes are used to specify a color, the opacity property, which is non-inherited, has to be used. Its value range is also 0-1.0. For example, specifying 50% opacity is written as opacity: 0.5.

2. HSL Values

In contrast to RGB values, HSL values represent the amount of hue (H), saturation (S), and lightness (L) required to produce a color, and the syntax used to specify them is hsl(h,s,l). H is expressed in terms of an angle between 0° and 360°; S is expressed in terms of percentage between 0% (minimum hue saturation) and 100% (maximum hue saturation); and L, too, is expressed in terms of percentage between 0% (minimum light, which is black) and 100% (maximum light, which is white). For example, red is hsl (0, 100%, 50%). HSL values cannot be specified in hex codes. Like RGB, when alpha (transparency or opacity) is specified for a color that is specified in HSL values, it is represented as HSLA, and the syntax is hsla(h,s,l,a), with its value ranging between 0 and 1.0. Red with 50% alpha, for example, is hsla (0,100%, 50%, 0.5).

3. Foreground and Background Color

Foreground color in CSS refers to the color of the text content of an element and its decorations, such as underline, over-line, line-through, and blink; so, foreground color is probably more aptly thought of as text color. Background color refers to the color of the box that represents an HTML element. The box is transparent by default, which means that the background shows through it. The color of most browser windows is white, but to ensure that the background color of an element’s box is white, it is a good practice to specifically specify it. As examples have shown in Chapter 8, the CSS property for specifying foreground color is color, and it is inherited. The property for specifying background color is background- color, and it is non-inherited. Figure 9.1 shows various ways of using them to specify color and transparency, and Figure 9.2 shows the result.

In the example, notice that some texts are black and others white. This is just to ensure legibility. Good contrast is necessary for text to be comfortably legible. So, it is important to bear this in mind when choosing foreground and background colors. Low contrast makes characters and words difficult to recognize, especially for the visually impaired users. High contrast makes text easy to read, but too much contrast can cause eyestrain when there is a lot to read. Medium contrast usually offers a good compromise, because it can be gentler on the eyes, and it is typically achieved by adjusting the brightness or darkness of the text. For example, instead of using white text on a dark background, off- white text could be better, and instead of black text on white background, dark-gray text may be more suitable. Figure 9.3 demonstrates this. See which one you find more legible and which ones are likely to strain your eyes after a while of reading the text.

Generally, all colors, except yellow, contrast well with a white background, and all colors, except blue and brown, contrast well with a black background. The effect of color combinations and contrast on legibility is just one of the considerations when choosing colors. There are others that are due to the physiology of the eyes. They are discussed later in this chapter under “Color and physiological considerations.”

3.1. Color Transparency

When transparency (opacity or alpha) is specified for a color, apart from the color looking faded, as shown earlier in Figure 9.2, it lets the content underneath show. How much is shown depends on the level of transparency. Figure 9.4 shows an example of the effects of transparency. The squares were created using <div> elements that were given specific widths and heights and were positioned as required. How widths and heights are specified is explained in , and how elements are positioned at specific points on a page is explained in Chapter 12.