Learning Web Design, 6th Edition

Chapter 13. Colors and Backgrounds

13

Colors and Backgrounds

In this Chapter

Color spaces and models

CSS color names

RGB, HSL, and OKLCH color values

Alpha transparency

Foreground and background colors

Tiling background images

Color gradients

If you had seen the web back in 1993, you would have found it to be a dreary affair by today’s standards—every background was gray, and all the text was black. Then came Netscape Navigator and, with it, a handful of HTML attributes that allowed rudimentary (but welcome) control over font colors and backgrounds. For years, we made do. But thankfully, we now have style sheet properties that have laid those unmentionable presentational attributes to rest.

We’re going to cover a lot of ground in this chapter. You’ll get familiar with some color terminology that will provide important context for understanding how to specify color values in CSS. Of course, I’ll introduce you to all of the properties for adding colors to the foreground and background of elements, as well as how to apply repeating background patterns. Finally, we’ll take a look at linear and radial gradient patterns. Let’s get started by getting to know how color works in general.

Color Spaces and Models

The average human eye can see an enormous spectrum of colors. Color is subjective, but there are instances when you need to communicate a specific color, whether on a screen, in print, or in other contexts. A color space provides a way to define and reproduce colors, ...