hsla() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS hsla() function is used to define colors using the Hue-Saturation-Lightness-Alpha model (HSLA). HSLA is a color model that is based on the human perception of color, and it is often used in design and development because it is easy to understand and use.

The hsla() function takes four parameters:

Hue: The hue is the color itself, and it is represented by a value between 0 and 360 degrees. Red is 0 degrees, green is 120 degrees, and blue is 240 degrees.
Saturation: The saturation is the intensity of the color, and it is represented by a percentage between 0% and 100%. 0% is a shade of gray, and 100% is a fully saturated color.
Lightness: The lightness is the brightness of the color, and it is represented by a percentage between 0% and 100%. 0% is black, and 100% is white.
Alpha: The alpha channel is used to control the opacity of the color, and it is represented by a value between 0.0 and 1.0. 0.0 is fully transparent, and 1.0 is fully opaque.

Here is an example of how to use the hsla() function:

body {
  background-color: hsla(120, 100%, 50%, 0.5);
}

This code will set the background color of the body element to a lime green color with a 50% opacity.

The hsla() function is a powerful tool for defining colors in CSS, and it can be used to create a wide range of effects. For example, you can use the hsla() function to create gradients, shadows, and semi-transparent elements.

Here are some additional examples of how to use the hsla() function:

/* Create a gradient */
.gradient {
  background-image: linear-gradient(hsla(120, 100%, 50%, 1), hsla(120, 100%, 50%, 0));
}

/* Create a shadow */
.shadow {
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.5);
}

/* Create a semi-transparent element */
.semi-transparent {
  opacity: 0.5;
  background-color: hsla(0, 0%, 100%, 1);
}

The hsla() function is a versatile and powerful tool for defining colors in CSS. It is easy to understand and use, and it can be used to create a wide range of effects.

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='hsla'>This is an example of the hsla() function.</div>

CSS

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;

}

Result

Editor