hsla()

christian.dinh2481 total contributions
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
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- robgmerrill124 total 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.