It is time to explore color a little more deeply. Add the following color styles for the body element and the .thumbnail-item class in styles.css.

body {
  font-size: 10px;
  background: rgb(149, 194, 215);
}

a {
  text-decoration: none;
}

.thumbnail-item {
  border: 1px solid rgb(100%, 100%, 100%);
  border: 1px solid rgba(100%, 100%, 100%, 0.8);
}
...

You have declared values for the .thumbnail-item’s border twice. Why? Notice that the two declarations use slightly different color functions: rgb and rgba. The rgba color function accepts a fourth argument, which is the opacity. However, some browsers do not support rgba, so providing both declarations is a technique that provides a fallback value.

All browsers will see the first declaration (rgb) and register its value for the border property. When browsers that do not support rgba see the second declaration, they will not understand it and will simply ignore it, using the value from the first declaration. Browsers that do support rgba will use the value in the second declaration and discard the value from the first declaration.

(Wondering why the body’s background color is defined with integers and the .thumbnail-item’s border color is defined with percentages? We will come back to that in just a moment.)

Save styles.css and switch to your browser (Figure 3.19).

Figure 3.19  Background color and borders

In the DevTools, you can see that Chrome supports rgba. It denotes that the rgb color is not used by striking through the style (Figure 3.20)

Figure 3.20  rgba is used when supported by browser

Now, still in the DevTools, select the body. In the styles pane, notice the declaration for the background color that you just added. To the left of the RGB value is a small square showing you what the color will look like.

Click that square, and a color picker opens (Figure 3.21). The color picker lets you choose a color and will give you the CSS color value in a variety of different formats.

Figure 3.21  The color picker in the styles pane

To see the background color in different color formats, click the up and down arrows to the right of the RGBA values. You can cycle through HSLA, HEX, and RGBA formats.

The HSLA format (which stands for “hue saturation lightness alpha”) is used less frequently than the others, partly because some of the most popular design tools do not provide HSLA values that are accurate for CSS. If you are curious about HSLA, visit the HSLA Explorer at css-tricks.com/​examples/​HSLaExplorer.

Take a look at the HEX value for the background color: #95C2D7. HEX, or hexadecimal, is the oldest color specification format. Each digit represents a value from 0 to 15. (If you are not familiar with hexadecimal numbers, this is done by including the characters A through F as digits.) Each pair of digits, then, can represent a value from 0 to 255. From left to right, the pairs of digits correspond to the intensity of red, green, and blue in the color being specified (Figure 3.22).

Figure 3.22  HEX values correspond to red, green, and blue values

Many find HEX colors unintuitive. A modern alternative is to use RGB (red, green, and blue) values. In this model, each color is also assigned a value from 0 to 255, but the values are represented in more familiar decimal numbers and separated by color. As mentioned earlier, for more capable browsers a fourth value can specify the opacity or transparency of the specified color, from 0.0 (fully transparent) to 1.0 (fully opaque). The opacity is officially known as the alpha value – hence the A in RGBA. The RGBA value of the body’s background color is (149, 194, 215, 1).

As an alternative to declaring integer values for red, green, and blue, you can also use percentages, as you did for the .thumbnail-item borders. There is no functional difference between the two options. Just do not mix percentages and integers in the same declaration.

By the way, for help selecting pleasing color palettes, Adobe provides a free online tool at color.adobe.com.