HTML HSL and HSLA Colors

HSL stands for hue, saturation, and lightness. HSLA extends HSL with an Alpha channel, which sets opacity.

HSL Color Values

An HSL color is written as hsl(hue, saturation, lightness). Hue is a degree on the color wheel from 0 to 360, where 0 is red, 120 is green, and 240 is blue. Saturation is a percent, where 0% is gray and 100% is the full color. Lightness is a percent, where 0% is black and 100% is white.

Example

Six colors set with HSL values.

A page showing six colored blocks set with HSL values: hsl(0,100%,50%), hsl(240,100%,50%), hsl(147,50%,47%), hsl(300,76%,72%), hsl(39,100%,50%), hsl(248,53%,58%), each labeled.

> Output: complete HTML page

Prompt

A page showing six colored blocks set with HSL values: hsl(0,100%,50%), hsl(240,100%,50%), hsl(147,50%,47%), hsl(300,76%,72%), hsl(39,100%,50%), hsl(248,53%,58%), each labeled.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hsl Colors</title>
</head>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

</body>
</html>

Saturation

Saturation is the intensity of a color. 100% is the pure color with no gray, 50% still shows the color but mixed with gray, and 0% is completely gray.

Example

One hue at decreasing saturation levels.

A page showing one hue (red, hue 0) at six saturation levels from 100% down to 0% with HSL, each block labeled.

> Output: complete HTML page

Prompt

A page showing one hue (red, hue 0) at six saturation levels from 100% down to 0% with HSL, each block labeled.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saturation</title>
</head>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

</body>
</html>

Lightness

Lightness is how much light the color has: 0% is no light (black), 50% is neither dark nor light, and 100% is full light (white).

Example

One hue at increasing lightness levels.

A page showing one hue (red) at six lightness levels from 0% (black) to 100% (white) with HSL, each block labeled.

> Output: complete HTML page

Prompt

A page showing one hue (red) at six lightness levels from 0% (black) to 100% (white) with HSL, each block labeled.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightness</title>
</head>
<body>

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

</body>
</html>

Shades of Gray

Shades of gray are made by setting hue and saturation to 0 and changing only the lightness.

Example

Six shades of gray made with HSL.

A page showing six shades of gray with HSL by keeping hue and saturation at 0 and changing lightness from 20% to 90%.

> Output: complete HTML page

Prompt

A page showing six shades of gray with HSL by keeping hue and saturation at 0 and changing lightness from 20% to 90%.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gray Shades</title>
</head>
<body>

<h1 style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</h1>
<h1 style="background-color:hsl(0, 0%, 30%);">hsl(0, 0%, 30%)</h1>
<h1 style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</h1>
<h1 style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</h1>
<h1 style="background-color:hsl(0, 0%, 70%);">hsl(0, 0%, 70%)</h1>
<h1 style="background-color:hsl(0, 0%, 90%);">hsl(0, 0%, 90%)</h1>

</body>
</html>

HSLA Color Values

HSLA extends HSL with an Alpha channel that sets opacity. It is written as hsla(hue, saturation, lightness, alpha), where alpha is a number from 0.0 (fully transparent) to 1.0 (fully opaque).

Example

One color shown at six opacity levels with HSLA.

A page showing one HSLA color hsla(9,100%,64%) at six opacity levels, alpha from 0 to 1, each block labeled.

> Output: complete HTML page

Prompt

A page showing one HSLA color hsla(9,100%,64%) at six opacity levels, alpha from 0 to 1, each block labeled.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hsla Colors</title>
</head>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

</body>
</html>