HTML and CSS Reference
In-Depth Information
If we desired, we could set the exact same color using another type of color value: RGB,
which stands for "Red, Green, Blue." The following RGB color value will produce the exact
same result as the hex color from the previous declaration:
body {
background-color: rgb(202, 181, 163);
Many CSS developers find RGB color values a bit easier to work with than hex, because you
can easily increment or decrement one of the three values (representing red, green, and blue)
to compare colors. Incidentally, RGB values range from 0 to 255 for each of the three values
inside the parentheses.
You can also use HSL color values. Let's use an online RGB to HSL converter to find the
HSL equivalent of the RGB color we defined in the previous example. Here's the HSL nota-
body {
background-color: hsl(28, 27%, 72%);
HSL stands for Hue, Saturation, and Lightness, which are what the three values inside the
parentheses represent. The first value (the hue,) takes a value from 0 to 359, with each num-
ber representing a different hue, or shade. The second value represents the saturation level of
the chosen hue—that is, how strong the hue should appear—and is defined using a percent-
age. Finally, the lightness value tells the browser how much white, or lightness, to add to the
hue. A level of 50% is “normal,” while 100% lightness will make any chosen color white,
and 0% lightness will make any color black.
In other words, each of the following examples will produce a background color of pure
white, even though they have different hue and saturation values:
body {
background-color: hsl(28, 37%, 100%);
p {
Search WWH ::

Custom Search