HTML and CSS Reference
In-Depth Information
Color Format
Description
Examples
6-Hex Color
CSS's six-digit hexadecimal format is
the same as how colors are defined in
(X)HTML. The format specifies a color
as #
rrggbb
, where
rr
is the amount of
red,
gg
the amount of green, and
bb
the amount of blue, all specified as a
hexadecimal value ranging from 00 to FF.
div {font-family:
Courier; font-size:
10pt; color: #00CCFF;}
3-Hex Color
This is an RGB hexadecimal format with
an #
rgb
value, where
r
corresponds to a
hex value (0-F) for red,
g
for green, and
b
for blue. For example,
#f00
would
specify pure red, while
#fff
would
specify white. Given its data limits, the
format is less expressive than 6-Hex
Color.
span {font-family:
Helvetica; font-size:
14pt; color: #0CF;}
HSL Color
CSS3 introduces Hue Saturation
Lightness (HSL), where color values are
specified as
hsl(
hue,saturation,
lightness
)
. Hue is set as the degree
on the color wheel, where if you wrap
around 0 or 360 is red, 120 is green,
and 240 is blue, with the various other
colors found between. Saturation is
a percentage value, with 100% the
fully saturated color. Lightness is a
percentage, with 0% being dark and
100% light, with the average 50% being
the norm.
#red {
color: hsl(0,100%,
50%);}
#green {
color:
hsl(120,100%,50%);}
#blue {
color:
hsl(240,100%,50%);}
HSLa Color
This is a CSS3 Hue Saturation
Lightness (HSL) value with a fourth
value to set the alpha channel
value for the color to define the
opacity of the element. An HSLa
is specified via a function style
hsla(
hue,saturation,
lightness,alpha
)
, where hue,
saturation, and lightness are the
same as standard
hsl()
values and
the alpha channel value for defining
opacity is a number between 0 (fully
transparent) and 1 (fully opaque).
#bluetrans {color: hsla
(240,100%,50%,0.5);}
T
ABLE
C-4
CSS Color Values (continued)
