CSS hsl() Function

CSS Functions

Examples

Define HSL colors:

#p1 {background-color:hsl(120,100%,50%);} /* Green */
#p2 {background-color:hsl(120,100%,75%);} /* Light Green */
#p3 {background-color:hsl(120,100%,25%);} /* Dark Green */
#p4 {background-color:hsl(120,60%,70%);} /* Soft Green */

Definition and Usage

The hsl() function defines colors using hue, saturation, and lightness.

HSL stands for Hue, Saturation, Lightness (English: Hue, Saturation, Lightness).

Hue (H) is the fundamental attribute of color, commonly referred to as the color name, such as red, yellow, etc.
Saturation (S) refers to the purity of the color; the higher the saturation, the purer the color, and the lower it becomes grayish, with values ranging from 0-100%.
Lightness (L), ranging from 0-100%, increases the lightness, the color shifts towards white; decreases the lightness, the color shifts towards black.

HSL is a representation of the points in the RGB color model in cylindrical coordinates. This representation aims to be more intuitive than the Cartesian coordinate-based geometry of RGB.

Supported Version: CSS3

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Function
hsl()	1.0	9.0	1.0	3.1	9.5

CSS Syntax

hsl(hue, saturation, lightness)

Value	Description
hue - Hue	Defines the hue (0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue
saturation - Saturation	Defines the saturation; 0% is gray, 100% is full color
lightness - Lightness	Defines the lightness; 0% is dark, 50% is normal, 100% is white

CSS Functions

❮ Pr Print Pagebi Pr Border Bottom Style ❯