HTML and CSS Reference
In-Depth Information
.three {
background-color:
hsl(335,80%,54%);
color: hsl(335,80%,18%);
}
.darkthree {
background-color:
hsl(335,80%,18%);
color: hsl(335,80%,54%);
}
In
HSL
, the luminosity of the color is controlled by one parameter. The
relationship between the colors is therefore far more obvious from the
code, because this is the only parameter that changes.
Here's what happens when you vary only
the saturation. It's hard to make out the
differences in a black-and-white book, so
I'll describe them: the box at the top is
light blue, and the one at the bottom is
gray.
Open the example file to get a better look
at the colors: ch09/colors-hsl-3.html.
If only the hue is varied, you get different
colors with the same saturation and lumi-
nosity. The hue corresponds to a point on
a color wheel, measured in degrees—360
and 0 are the same hue. Using four evenly
spaced points for this example yields a
blue, two shades of green, and a red.
Unfortunately, because the colors have
the same saturation and luminosity, they'll
be even harder to tell apart in black and
white. Open the example file to see for
yourself: ch09/colors-hsl-4.html.
