HTML and CSS Reference
In-Depth Information
Color Values
#RRGGBB
#RRGGBB
This is a hex-pair notation familiar to authors using traditional HTML. In this format, the
first pair of digits corresponds to the red level, the second pair to the green, and the third
pair to the blue. Each pair is in hexadecimal notation in the range
00
-
FF
. Thus, a “pure”
blue is written
#0000FF
, a “pure” red is written
#FF0000
, and so on.
#RGB
#RGB
This is a shorter form of the six-digit notation described previously. In this format, each
digit is replicated to arrive at an equivalent six-digit value; thus,
#F8C
becomes
#FF88CC
.
rgb(rrr
gb(rrr,ggg,bbb)
,ggg,bbb)
This format allows the author to use RGB values in the range
0
-
255
; only integers are
permitted. Not coincidentally, this range is the decimal equivalent of
00
-
FF
in hexadecim-
al. In this format, “pure” green is
rgb (0,255,0)
, and white is represented as
rgb
(255,255,255)
.
rgb(rrr
gb(rrr.rr%,ggg.gg%,bbb.bb%)
.rr%,ggg.gg%,bbb.bb%)
This format allows the author to use RGB values in the range
0%
to
100%
, with decimal
values allowed (e.g.,
75.5%
). The value for black is thus
rgb (0%,0%,0%)
, whereas “pure”
blue is
rgb (0%,0%,100%)
.
hsl(hhh.hh,sss.ss%,lll.ll%)
This format permits authors to specify a color by its hue angle, saturation, and lightness
(thus HSL). The hue angle is always a unitless number in the range 0 to 360 and the satur-
ation and brightness values are always percentages. Hue angles
0
and
360
are equivalent,
and are both red. Hue angles greater than 360 can be declared but they are normalized to
the 0-360 range; thus, setting a hue angle of
454
is equivalent to setting an angle of
94
.
Any HSL value, regardless of color angle, will be rendered as a shade of gray if the sat-
uration value is
0%
; the exact shade will depend on the lightness value. Any HSL value,
regardless of the hue angle, will be rendered solid black if lightness is
0%
and solid white
if lightness is
100%
. The “normal” lightness value—that is, the value associated with most
common colors—is
50%
.