hsla() CSS Function

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

hsla()

CSS FunctionThis function is supported by all modern browsers.

Updated 31st December 2025

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

Open in 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.

This function is supported by all modern browsers.