hsl() CSS Function

Description

The hsl() CSS function is used to set a color value in CSS. The hsl() function takes three values, they are: hue, saturation, and lightness.

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

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

.hsl {

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

   color: white;

   border: 2px solid red;

   margin: 20px;

   padding: 20px;

   text-align: center;

}

Browser Support

Desktop
9	12	1	1	9.5	3.1
Tablets / Mobile
≤37	18	4	Yes	2	Yes

Last updated by CSSPortal on: 1st December 2019