ptg16476052Units of Measure 1698
n Hexadecimal shorthand—A three-character string that comprises three single-
digit hexadecimal numbers that are duplicated to represent the intensity of red,
green, and blue on a scale of 00 to FF (255 in decimal)
n RGB—Three percentages representing the intensity of red, green, and blue
n RGB—Three decimal numbers representing the intensity of red, green, and blue on
a scale of 0 to 255
n HSL—Three numbers representing the hue (from 0 to 360 degrees), saturation per-
centage, and lightness percentage
n Transparency or alpha channel—Add a fourth number to the RGB and HSL col-
ors that ranges from 0 to 1 to specify the opacityThe approaches differ in terms of notation and precision. The methods that scale from
0 to 255 are more precise than the percentages, which run from 0 to 100, and the single
hexadecimal digits, which are meant as a shorthand for writing common colors.
In practical terms, nearly everyone uses the six digit hexadecimal strings because
that form of notation was supported in HTML for defining colors as well. The other
approaches were not. Let’s examine a few shades to look a little deeper at how CSS col-
ors work:
black rgb(0,0,0) 000000 hsl(0,0,0)
white rgb(255,255,255) FFFFFF hsl(0,0,100)
red rgb(255,0,0) FF0000 hsl(0,100,50)
yellow rgb(255,255,0) FFFF00 hsl(60,100,50)
coral rgb(255,127,80) FF7F50 hsl(16,100,66)
As you can see, black is created by setting all three colors to zero intensity. White is cre-
ated by setting all three colors to maximum intensity. The brightest shade of red has the
hue red (0) at 100% saturation and 50% lightness. Yellow is maximum red and green and
no blue. Coral is a mixture of all three shades, with an emphasis on red. The RGB units
and hexadecimal units are identical—the only difference is in notation.
CSS added the ability to make colors transparent with the alpha channel on RGB and
HSL colors. Colors are assumed to be 100% opaque. However, if you convert to RGBa
or HSLa by adding a number from 0 to 1, you can make your colors see through. For
example, red (rgb(255,0,0)) becomes pink when displayed at 50% transparent on a
white background.
rgba(255,0,0,0.5)