Motion and color - HTML5 and CSS3 - page 321

.three {
background-color: rgb(232,44,122);
color: rgb(83,9,40);
}
.darkthree {
background-color: rgb(83,9,40);
color: rgb(232,44,122);
}
Although in all three pairs the second color is a darker shade of the first
color, it gets increasingly difficult to see the relationship in the pairs as
the numbers become less regular.
Note that to make the same color darker, you have to adjust three
values. The fact that these pairs of colors are related probably
wouldn't be obvious if you came across them on different lines of a
CSS file, unless you're naturally the sort of person who can't look at a
set of numbers without calculating common factors in your head.
HSL stands for hue , saturation , and luminosity in the same way that RGB
stands for red , green , and blue . The basic color is provided by the hue,
and the saturation determines the intensity of the color—lower satura-
tion means more grey. The luminosity determines how light or dark the
color is. Here's the same set of colors using HSL notation:
.one {
background-color: hsl(0,0%,80%);
color: hsl(0,0%,40%);
}
.darkone {
background-color: hsl(0,0%,40%);
color: hsl(0,0%,80%);
}
.two {
background-color:
hsl(210,50%,40%);
color: hsl(210,50%,13.3%);
}
.darktwo {
background-color:
hsl(210,50%,13.3%);
color: hsl(210,50%,40%);
}