hsla() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The hsla() CSS function is used to define colors using the Hue, Saturation, Lightness, and Alpha model, offering a more intuitive approach to color specification compared to the traditional rgb() function. The first parameter, hue, represents the color’s position on the color wheel in degrees (0–360), where 0 or 360 is red, 120 is green, and 240 is blue. The second parameter, saturation, determines the intensity of the color as a percentage; 0% produces a shade of gray, while 100% gives the full color. The third parameter, lightness, also expressed as a percentage, controls how light or dark the color appears: 0% is completely black, 50% is the pure color, and 100% is completely white. The fourth parameter, alpha, specifies the transparency level of the color, ranging from 0 (fully transparent) to 1 (fully opaque).

Using hsla() allows for dynamic color adjustments, such as creating hover effects, overlays, or gradients with varying transparency. It pairs seamlessly with CSS properties like background-color or color, enabling developers to apply semi-transparent colors without affecting underlying elements.

Example:

div {
  background-color: hsla(200, 70%, 50%, 0.5);
  color: hsla(0, 0%, 100%, 1);
}

In this example, the div will have a semi-transparent blue background and fully opaque white text. This makes it especially useful when layering elements or creating subtle visual effects on div containers.

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

HTML

<div class="container">

  <div class="box solid">Solid Green</div>

  <div class="box transparent">Transparent Green</div>

  <div class="box light">Light Mint Green</div>

</div>

CSS

.container {

  display: flex;

  gap: 20px;

  padding: 20px;

  font-family: sans-serif;

}



.box {

  width: 150px;

  height: 150px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  border: 2px solid #333;

}



/* hsla(hue, saturation, lightness, alpha) */



.solid {

  /* Full green, 50% lightness, 1.0 opacity */

  background-color: hsla(145, 70%, 50%, 1);

}



.transparent {

  /* Same green, but 0.3 opacity (see-through) */

  background-color: hsla(145, 70%, 50%, 0.3);

}



.light {

  /* Same green, but 90% lightness (pastel/mint) */

  background-color: hsla(145, 70%, 90%, 1);

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS hsla() function. Hover over a browser icon to see the version that first introduced support for this CSS function.