HTML and CSS Reference
In-Depth Information
Unit
Description
Examples
3-Hex Color
This is an RGB hexadecimal format of
#rgb 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.
body {
background-color: #000;
color: #fff;}
6-Hex Color
This is an RGB hexadecimal format of
#rrggbb where rr corresponds to a hex value
(00-FF) for red, g in the same range for
green, and b for blue. For example, #ff0000
would specify pure red, while #ffffff would
specify white. More expressive than the
3-digit hex form, this can represent values
like #ffA500 (orange).
body {
background-color: #ffA500;
color: #f3ffff;}
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 0 or 360 if you
wrap around is red, 120 is green, and 240
is blue, with the various other colors found
between. Saturation is a percentage value,
with 100% being 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 the CSS3 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);}
RGB Color
A decimal or percentage RGB color can be
specified via a function style
rgb(
r
,
g
,
b
)
value, where r, g, and b are specified
as a decimal value from 0 to 255 or a
percentage from 0 to 100%. Values outside
this range will be rounded up or down to fit
the closest value.
strong {
color: rgb(255,0,0);}
.super {
color: rgb(99%,1%,0%;}
T
ABLE
4-11
CSS Units and Lengths (continued)
