HTML and CSS Reference
In-Depth Information
Color Format
Description
Example
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 value, 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
CSS colors can also be defined using
the keyword rgb , followed by three
numbers between 0 and 255, contained in
parentheses and separated by commas,
with no spaces between them. RGB
color values can also be defined using
percentages. The format is the same,
except that the numbers are replaced by
percentage values between 0% and 100%.
#p1 {color:
rgb(204,0,51);}
p {color:
rgb(0%,10%,50%);}
RGBa Color
This is like RBG color but adds an alpha
channel value to specify the opacity of
the color. An RGBa is specified via a
function-style rgba(r,g,b,a) value,
where colors r , g , and b are specified
as a decimal value from 0 to 255 or a
percentage from 0% to 100%, and the
alpha channel value for defining opacity
is a number between 0 (fully transparent)
and 1 (fully opaque). Values outside this
range will be rounded up or down to fit the
closest value.
#redtrans {
color:
rgba(255,0,0,0.4);}
T ABLE 5-4 CSS Color Values (continued)
 
Search WWH ::




Custom Search