hsla()
Published Jul 21, 2021Updated Sep 3, 2021
Contribute to Docs
The hsla()
color function defines the color value by providing three comma separated values with an optional fourth value.
- The first value represents the hue value, the base of the color.
- The second represents the saturation value.
- The third represents the luminance value.
- The optional fourth value represents the alpha value, which is the transparency of the color.
Syntax
<property>: hsla(hue, saturation, luminance, alpha);
hue
: A unitless number value. The base of the color. Represents an angle in the color wheel from0
to360
.saturation
: A percentage value. Represents the saturation of the base color.0%
represents a color with no saturation at all and it shows gray.100%
means the base color is full.luminance
: A percentage value. Represents the brightness of the base color.0%
represents a color with no luminance at all and it shows black.100%
means full lightness and it shows white.50%
means the base color is full.alpha
: A numeric value between0
and1
. A1
value will make the color fully opaque, while a0
value will make the color fully transparent.
Example 1
Set the font color of the h1
element to a shade of purple with an alpha of 0.5
:
h1 {color: hsla(270, 50%, 40%, 0.5);}
Example 2
Set the font color of the h2
element:
h1 {color: hsla(211, 60%, 10%, 0.8);}
All contributors
- Anonymous contributorAnonymous contributor3077 contributions
- christian.dinh
- Anonymous contributor
- robgmerrill
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.