WORKING WITH COLOR VALUES - HTML5 - page 70

itself in a warmer set of hues .
</ body >
</ html >

h is example uses a color palette and simply places the color values in a comment within the
<style> container so that it can be viewed while putting the Web page together. Figure 4-5
shows what you can expect to see.

Figure 4-5: A hexadecimal color palette.

74

h e colors belong to a set of colors that create a certain mood or feeling. h is one, “Desert in
the Fall” was based on what the designer believed to be a palette representing that time of year
in the desert.

ADDING TRANSPARENCY TO COLOR
One of the new features you can see on an HTML5-compliant browser is transparency, or
variable opacity. A fully opaque object on the screen blocks whatever is beneath it, while a
fully transparent object allows anything beneath it to be fully seen — like glass. h e value
used to describe the level of opacity is expressed in an alpha property set between 0 and 1.
Using either the RGB or HSL color formatting, the alpha is the fourth parameter. (Unfortu-
nately, there is no hexadecimal alpha parameter in CSS3.) For example, rgba(255,0,0,
0.5) generates red with 50 percent opacity. Likewise, hsla(120, 100%, 50%, 0.3)
creates green with 30 percent opacity (or 70 percent transparency).

In Part IV of this topic, I discuss ways to add depth to your page with the <canvas> tag so
that when you stack objects on top of one another, you can better see why having some
transparency in your creations is important. For now, though, you need something that you
can place beneath text blocks that can be viewed through a transparent text block. h e easiest
method is to place a background object using the background-image property. h e
following code snippet shows how:

body { background - image : url ( imageFile . png ); }