This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size.

Smartphone icons created by Freepik - Flaticon

2.1.3 HSL

form: hsl(hue, saturation, lightness) Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form: hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white.

Example 1: Specify colors using 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%)

Saturation

Saturation can be described as the intensity of a color. 100% is pure color, no shades of gray, 50% is 50% gray, but you can still see the color. 0% is completely gray, you can no longer see the color.

Eaxample 2: HSL Saturation

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

Lightness

The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Example 3: HSL Lightness

hsl(0, 100%, 0%)
(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades:

Example 4: HSL Shades of gray

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

HSLA Value

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha).
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Example 5: Make transparent colors with HSLA

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

CSS Course Home
Module 2: Colors, Backgrounds and Borders Options

Example files created in this module:
CSS Background Color CSS Text Color CSS Border Color CSS Color Values Specify colors using RGB values Shades of gray Make transparent colors with RGBA Specify colors using HEX values Specify shades of gray using HEX values Specify colors using HSL values HSL Saturation HSL Lightness HSL Shades of gray Make transparent colors with HSLA CSS background-color CSS background-color example! Transparent Boxes part 1 Transparent Boxes part 2 Background Image part 1 Background Image part 2 Background Image part 3 Background Repeat part 1 Background Repeat part 2 Background Repeat part 3 CSS background-position The background-attachment Property part 1 The background-attachment Property part 2 The background Property - shorthand The border-style Property The border-width Property part 1 The border-width Property part 2 The border-color Property part 1 The border-color Property part 2 The border-color Property part 3 The border-color Property part 4 The border-color Property part 5 Individual Border Sides part 1 Individual Border Sides part 2 Individual Border Sides part 3 Border Shorthand part 1 Border Shorthand part 2 Border Shorthand part 3 The border-radius Property