HTML and CSS Reference
In-Depth Information
3.
}
4.
.count {
5.
background:
rgb(255, 255, 0)
;
6.
}
RGB color values may also include an alpha, or transparency, channel by using the
rgba()
function. The
rgba()
function requires a fourth value, which must be a number
between
0
and
1
, including decimals. A value of
0
creates a fully transparent color, mean-
ing it would be invisible, and a value of
1
creates a fully opaque color. Any decimal value
in between
0
and
1
would create a semi-transparent color.
If we wanted our shade of orange to appear 50% opaque, we would use an RGBa color
value of
rgba(255, 102, 0, .5)
.
We can also change the opacity of our
maroon
and
yellow
background colors. The fol-
lowing code sets the
maroon
background color to 25% opaque and leaves the
yellow
background color 100% opaque.
1.
.task {
2.
background:
rgba(128, 0, 0, .25)
;
3.
}
4.
.count {
5.
background:
rgba(255, 255, 0, 1)
;
6.
}
RGB color values are becoming more popular, especially due to the ability to create semi-
transparent colors using RGBa.
HSL & HSLa Colors
HSL color values are stated using the
hsl()
function, which stands for hue, saturation,
and lightness. Within the parentheses, the function accepts three comma-separated values,
much like
rgb()
.
The first value, the hue, is a unitless number from
0
to
360
. The numbers
0
through
360
represent the color wheel, and the value identifies the degree of a color on the color wheel.
The second and third values, the saturation and lightness, are percentage values from
0
to
100%
. The saturation value identifies how saturated with color the hue is, with
0
being
grayscale and
100%
being fully saturated. The lightness identifies how dark or light the
hue value is, with
0
being completely black and
100%
being completely white.
Returning to our shade of orange, as an HSL color value it would be written as
hsl(24,
100%, 100%)
.
Search WWH ::
Custom Search