scheduling table

CSS Reference Manual

CSS attribute

Elective course

Course recommendation:

CodeW3C.com Treasure Box

CSS hsl() function

Previous Page CSS grayscale() function
Next Page CSS hue-rotate() function
Go to the Previous Level CSS Function Reference Manual

Definition and usage

CSS's hsl() The function uses the hue-saturation-lightness model (HSL) to specify color. An optional alpha component (representing the color's transparency) can also be added.

Tip:HSL represents hue (Hue), saturation (Saturation), and lightness (Lightness), which is the cylindrical coordinate representation of color.

Note:hsla() The function is hsl() Alias of the function. It is recommended to use hsl() Function.

Instance

Example 1

Define different HSL(A) 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 100% 25% / 20%);} /* Dark green with transparency */
#p5 {background-color:hsl(120 60% 70%);} /* Soft green */
#p6 {background-color:hsl(290 100% 50%);} /* Purple */
#p7 {background-color:hsl(290 60% 70%);} /* Soft purple */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* Soft purple with transparency */

Try it yourself

Example 2

Old syntax using commas to separate values:

#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 */
#p5 {background-color:hsl(290, 100%, 50%);} /* Purple */
#p6 {background-color:hsl(290, 60%, 70%);} /* Soft purple */

Try it yourself

CSS syntax

Absolute value syntax

hsl(hue saturation lightness / A)

Value	Description
hue	Required. Defines the degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue.
saturation	Required. Defines the saturation of the color; 0% is gray, 100% is full color (full saturation). It can also use None (the same as 0%).
lightness	Required. Defines the brightness of the color; 0% is black, 50% is normal, 100% is white. It can also use None (the same as 0%).
/ A	Optional. Represents the alpha channel value of the color (from 0% or 0 - completely transparent to 100% or 100 - completely opaque). It can also use None (indicating no alpha channel). The default value is 100%.

Relative value syntax

hsl(from color hue saturation lightness / A)

Value	Description
from color	Starts with the keyword from, followed by a color value representing the original color. This is the original color based on which the relative color is based.
hue	Required. Defines the degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue.
saturation	Required. Defines the saturation of the color; 0% is gray, 100% is full color (full saturation). It can also use None (the same as 0%).
lightness	Required. Defines the brightness of the color; 0% is black, 50% is normal, 100% is white. It can also use None (the same as 0%).
/ A	Optional. Represents the alpha channel value of the color (from 0% or 0 - completely transparent to 100% or 100 - completely opaque). It can also use None (indicating no alpha channel). The default value is 100%.