`hsl()` and `hsla()` - Functions CSS

hsl()

Summary of characteristics of the `hsl()` function

Quick description

Determines a color from the Hue, Saturation and Brightness settings, an alternative closer to our way of thinking.

Status

Standard

Percentages

Usable except for the first parameter (the hue).

W3C Module

CSS Color Module

References (W3C)

🡇

🡅

CSS Color Module Level 5

Document status: WD (Working Draft)

CSS Color Module Level 4

Document status: WD (Working Draft)

CSS Color Module Level 3

Document status: REC (Recommendation)

Syntax scheme of `hsl()` function.

Syntax scheme of the hsl() function
Detailed syntax

The terms in the diagram are described below:

color is an optional reference color.
angle is a numeric value followed by a CSS angle units. It matches the hue.
% are percentages corresponding to saturation and brightness.
alpha is a unitless number between 0 and 1 or a percentage: the opacity of the color (alpha channel).

Description of the `hsl()` and `hsla()` functions.

The RGB system is non-intuitive. It has been designed for the control of screens. To compensate for this, CSS introduces the HSL system to define a color based on its hue, saturation, brightness, and eventually its opacity.
In addition, RGB conversation is easy.

The functions hsl() and hsla() are synonymous. They define a color based on these four parameters: hue, saturation, brightness, and possibly opacity.

Both of these functions can be used with any properties that expect a color. Examples:


	background-color: hsl(270deg 40% 50%);
	border-color: hsla(90deg 50% 75% / 0.5);

`HSL` Rating.

The color chart is often represented in a circular fashion. It then takes the name of color wheel. This explains why the hue is expressed in degrees: it is its position on the circle.

Color wheel

The HSL rating has the following particularities:

The brightness (third parameter) at 100% gives white, regardless of the value of the other two parameters.
Conversely, the brightness at 0 gives black. The other two parameters also have no effect.
The saturation (second parameter of the hsl() function at 0 gives gray. Brightness defines whether it is a light or dark gray. The tint parameter has no effect.
Apart from these special cases, the three parameters help to define the color.
The complementary color is obtained by adding 180 degrees.

The notation HSL is said to be more intuitive than the notation RGB. It is easier, for example, to define consistent color schemes by varying a single parameter (brightness, for example).

Here you will find a color synthesizer. Another simulator is present at the bottom of this page. The easiest way is to choose the shade first based on the color wheel. Then we adjust the saturation and brightness to obtain the desired shade.

The transparency of a color.

With either of these two functions, it is possible to specify an additional parameter: opacity, which measures transparency of color, that is to say the possibility of seeing through it. Of course, if the opacity is at 0, the color is totally transparent, and therefore invisible.

The `hsl()` and `hsla()` functions can be used with:

accent-color : Defines the colour of active or checked items.
background-color : Sets the background color.
border-color : Sets the color of the borders.
caret-color : Chooses the color of the text marker (flashing cursor).
color : Defines the color of the foreground (mainly text).
column-rule-color : Sets the color of column separator line.
lighting-color : Sets the color of the lighting in the context of an SVG filter.
outline-color : Sets the color of the outline.
scrollbar-color : Sets two colors that will be used for scrollbars.
text-decoration-color : Defines the color of the decorative line (underlined, stripe...).
text-emphasis-color : Sets the color of the emphasis characters.

Syntax of `hsl()` and `hsla()`.

color: hsl(67deg, 50%, 30%); color: hsl(67deg 50% 30%); h s l

The hsl() function expects three parameters, all of which are required:
1. h: It is a numerical value with its unit of angle (see the CSS angle units). If the unit is omitted, the value is assumed to be expressed in degrees. h indicates the hue on the color wheel: 0 corresponds to red.
2. s: is a percentage, ranging from 0 to 100%. It indicates the value of saturation. A saturation of 0% gives gray, regardless of the shade chosen. Conversely, maximum saturation (100%) gives a very vivid color.
3. l is a percentage between 0 and 100%. It indicates the brightness value. A brightness of 0% gives black, while a brightness of 100% gives white, whatever hue and saturation you choose.
The second syntax is equivalent, but the parameters are separated by a single space (no comma). The W3C advocates the syntax without commas. Browsers now handle both one and one of the the other of these syntaxes. Refer to compatibility tables at the end of this page.

In the second syntax, one or more of these values can optionally be replaced by none.
color: hsl(120deg, 50%, 30%, 0.6); color: hsl(120deg 50% 30% / 0.6); h s l a

A fourth parameter can be specified, either separated by a comma (old syntax) or by a slash (new syntax). This setting reflects the opacity of the color.
1. a: a floating numeric value between 0 and 1, or a percentage between 0 and 100%. This parameter corresponds to the opacity value (alpha channel). 0 for no opacity (full transparency) and 1 or 100% for full opacity. Intermediate values indicate a more or less important opacity.
The last syntax does not use a comma to separate values, but requires a slash before the parameter a. Be careful, however, not to mix the syntaxes.
color: hsl(from yellow calc(h + 180) s l / alpha);

This new syntax is defined in level 4 of the "CSS Color" module. It allows you to specify a color from a reference color. In the example, the reference color is yellow, to which we rotate 180 degrees on the color wheel. The complementary color is then obtained which is blue, saturation and brightness being unchanged.

The variables h, s, l, and possibly alpha represent respectively hue, saturation, brightness, and the alpha value of the reference color. It is possible to do calculations using the calc() function.

Remarks. Firefox does not process calculations on hue.
In the case of an addition to the hue, you should not indicate a unit: write calc(h+180) and not calc(h+180deg).
color: hsla(67deg, 50%, 30%, 0.6); color: hsla(67deg 50% 30% / 0.6); h s l a

The hsla() function is equivalent to hsl(). Its only interest is to draw attention to the fact that a fourth parameter is expected.

Animation of the `hsl()` function.

The HSL system allows you to animate colors by playing separately on the saturation, brightness parameters, or on the hue, which is not possible in RGB. For example, here are two animations: the first on saturation, the second on brightness.

Conversion from HSL to RGB.

The conversion from HSL to RGB can be done with a bit of Javascript code. Here is an example that works with percentages. The function returns an array of three numbers, which are the percentage of red, green, and blue.


	function hslToRgb(hue, sat, lum) {
	   hue = hue % 360;
	   if (hue < 0) {hue += 360;}
	   sat = sat/100;
	   lum = lum/100;

	   function f(n) {
		  let k = (n + hue/30) % 12;
		  let a = sat * Math.min(lum, 1 - lum);
		  return 100*(lum - a * Math.max(-1, Math.min(k - 3, 9 - k, 1)));
	   }

	   return [f(0), f(8), f(4)];
	}

Here is how to use it: let's assume that the HSL values are 90deg, 50% for saturation, and 50% for brightness. You call the function as follows:


	let rgb = hslToRgb(90,50,50);

The rgb variable is an array of three numbers, which are used as below if el is the element to be modified:


	el.style['background-color']='rgb(' + rgb[0] + '% ' + rgb[1] + '% ' + rgb[2] + '%)';

Simulator.

background-color :

transparent

hsl( 90deg 50% 100% ) /* Luminosité à 100% -> blanc */

hsl( 90deg 50% 0% ) /* Luminosité à 0 -> noir */

hsl( 45deg 0% 50% ) /* Saturation à 0 -> gris */

hsl( 90deg 50% 50% / 50% ) /* Couleur semi-transparente */

hsl( from red h calc(s / 2) l ) /* Couleur relative à une autre */

Browsers compatibility.

All browsers are now able to process colors defined with HSL notation as well as alpha transparency.

According to the standard, the hsl() and hsla() functions accept space-separated parameters instead of commas. Both of these syntaxes are now well recognized, except by the defunct Internet Explorer browser.

Column 1

Support for setting a color from its three parameters: hue, luminosity, saturation.

Column 2

Support for the hsl() function allowing you to define a color with its three parameters: hue, brightness and saturation.

Column 3

Support for the hsla() function defining a color with the four parameters: hue, saturation, brightness and opacity.

Column 4

Support for the syntax of hsl() and hsla() using spaces as separators.

HSL
colors

hsl()
function

hsla()
function

Space
separator

Estimated overall support.

98%

97%

96%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

`hsl()` function history.

CSS Color Module Level 3

Introduction of the HSL system (Hue, Saturation, Lightness) for color definition.
And description of the hsl() and hsla() functions.

June 23, 1999
Working Draft.
May 14, 2003
Candidate Recommendation.
October 28, 2010
Proposed for recommendation.
June 07, 2011
Recommendation .
CSS Color Module Level 4

The syntax of the hsl() and hsla() functions also accepts the new syntax using a space to separate parameters.

July 05, 2016
Working Draft.
July 05, 2022
Candidate Recommendation.
CSS Color Module Level 5

Introduction of the notion of relative colors, defined in relation to another color (syntax with from)

March 03, 2020
Working Draft.

hsl() and hsla() - Functions CSS

Summary of characteristics of the hsl() function

Syntax scheme of hsl() function.

Description of the hsl() and hsla() functions.

HSL Rating.