CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS @charset Rule CSS Functions (Functions)

CSS hsl() Function

The CSS hsl() function can be used to provide color values when using CSS. It allows you to specify color values by specifying the hue, saturation, and lightness of the color.

CSS function

Online Example

Define HSL Color:

Example

<!DOCTYPE html>
<title>Basic Tutorial(oldtoolbag.com)</title>/title>　
<style>
body {
　　　　background: hsl(30,　100%,　50%);
　　　　color: hsl(30,　100%,　75%);
　　　　font-size:　1.3em;
　　　　}
</style>
<h1>Down in Africa</h1>
<p>It takes some time to do things we have never done...</p>

Test and see ‹/›

Definition and usage

The hsl() function uses hue, saturation, and lightness to define color.

HSL is hue, saturation, and lightness (English: Hue, Saturation, Lightness).

Hue (H)is the basic attribute of color, which is the color name we usually say, such as red, yellow, etc.
Saturation (S)It refers to the purity of the color, the higher the color purity, the lower it gradually turns gray, take 0-100% value.
Brightness (L), take 0-100%, increasing brightness, the color will change towards white; decreasing brightness, the color will change towards black.

HSL is a method of representing points in the cylindrical coordinate system of the RGB color model. Both representations aim to be more intuitive than the RGB based on the geometric structure of the Cartesian coordinate system.

Supported version: CSS3

Browser compatibility

The numbers in the table indicate the first browser version number that supports this function.

function
hsl()	1.0	9.0	1.0	3.1	9.5

CSS syntax

hsl(hue, saturation, lightness)

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

Example of color change

In the following chart, the hue and brightness of all samples are completely the same. The only difference is the saturation.

`hsl(240, 100%, 50%)`
`hsl(240, 90%, 50%)`
`hsl(240, 80%, 50%)`
`hsl(240, 70%, 50%)`
`hsl(240, 60%, 50%)`
`hsl(240, 50%, 50%)`
`hsl(240, 40%, 50%)`
`hsl(240, 30%, 50%)`
`hsl(240, 20%, 50%)`
`hsl(240, 10, 50%)`
`hsl(240, 0%, 50%)`

In the following figure, the hue and saturation of all samples are completely the same. The only difference is the brightness level.

`hsl(240, 100%, 100%)`
`hsl(240, 100%, 90%)`
`hsl(240, 100%, 80%)`
`hsl(240, 100%, 70%)`
`hsl(240, 100%, 60%)`
`hsl(240, 100%, 50%)`
`hsl(240, 100%, 40%)`
`hsl(240, 100%, 30%)`
`hsl(240, 100%, 20%)`
`hsl(240, 100%, 10%)`

CSS function

CSS @charset Rule CSS Functions (Functions)