hsla() CSS Function
Description
The hsla() CSS function is used to set a color value in CSS. The hsla() function takes four values, they are: hue, saturation, lightness and alpha transparency.
Syntax
hsl() = hsl( <hue>, <saturation>, <lightness>, <alpha>)
Values
- huerepresents an angle of the color circle. You can specify the value as an angle in degrees (e.g. 180deg) or simply as a number (e.g. 180). For example, blue is at 240 degrees, so it could be written as either 240deg or 240. By definition, red=0°=360°, with the other colors spread around the circle, so green=120°, blue=240°, etc.
- saturationsaturation is expressed as a percentage. It represents the amount of saturation in the color. For example, 100% is fully saturated (more colorful and intense), while 0 is a fully-unsaturated gray.
- lightnesslightness is also expressed as a percentage. It represents the amount of light in the color. For lightness, 50% is the "normal" setting, while 100% is white and 0% is black.
- alphadetermines how transparent the color is. A value of 1 is fully opaque, while a value of 0 is fully transparent. A value of 0.5 is semi-transparent.
Example
<div class='hsla'>This is an example of the hsla() function.</div>
body {
background: url("images/tick.png");
}
.hsla {
background-color: hsla(240, 100%, 50%, 0.5);
color: white;
border: 2px solid red;
margin: 20px;
padding: 20px;
text-align: center;
}
Browser Support
Desktop | |||||
9 | 12 | 1 | 3 | 10 | 3.1 |
Tablets / Mobile | |||||
![]() |
|||||
≤37 | 18 | 4 | Yes | 2 | Yes |
Last updated by CSSPortal on: 1st December 2019