hsl() CSS Function

Description

The CSS hsl() function is used to define colors using the Hue-saturation-lightness model (HSL). HSL is a color model that describes colors in terms of their hue (the color itself), saturation (how much gray is mixed into the color), and lightness (how bright or dark the color is).

The hsl() function takes three parameters:

hue: The hue of the color, specified as a degree on the color wheel. Hue values range from 0 to 360, where 0 and 360 are red, 120 is green, and 240 is blue.
saturation: The saturation of the color, specified as a percentage. Saturation values range from 0% to 100%, where 0% is a shade of gray and 100% is the full color.
lightness: The lightness of the color, specified as a percentage. Lightness values range from 0% to 100%, where 0% is black and 100% is white.

The hsl() function can be used to define any color in the HSL color space. It is often used to create custom color palettes, or to generate colors that are dynamic and responsive to user interaction.

Here is an example of how to use the hsl() function to define a color:

body {
  background-color: hsl(180, 100%, 50%);
}

This code will set the background color of the body element to a light blue color. The hue value of 180 degrees corresponds to the color blue, the saturation value of 100% means that the color is fully saturated, and the lightness value of 50% means that the color is halfway between black and white.

The hsl() function can also be used to create gradients. For example, the following code will create a gradient background that goes from light blue to white:

body {
  background-image: linear-gradient(to right, hsl(180, 100%, 50%), hsl(180, 100%, 100%));
}

The hsl() function is a powerful tool for defining and using colors in CSS. It is a good choice for creating custom color palettes, dynamic colors, and gradients.

Syntax

hsl() = hsl( <hue>, <saturation>, <lightness> )

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.

Example

HTML

<div class='hsl'>This is an example of the hsl() function.</div>

CSS

.hsl {

   background-color: hsl(240, 100%, 50%);

   color: white;

   border: 2px solid red;

   margin: 20px;

   padding: 20px;

   text-align: center;

}

Result

Editor