CSS HSL Colors

HSL Value

HSL stands for hue, saturation, and lightness.

You write it as hsl(hue, saturation, lightness).

Hue is a degree on the color wheel from 0 to 360: 0 (or 360) 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 also a percent, where 0% is black, 50% is normal, and 100% is white.

HSL colors

Six colors written as hsl() values.

Prompt
An HTML page showing several colors written as hsl() values. Make six headings with background colors: hsl(0, 100%, 50%), hsl(240, 100%, 50%), hsl(147, 50%, 47%), hsl(300, 76%, 72%), hsl(39, 100%, 50%), and hsl(248, 53%, 58%). Label each with its value.
Output: complete HTML page

Saturation

Saturation is the intensity of a color.

100% is the pure color with no gray. 50% is half gray but the color still shows. 0% is fully gray, so the color is gone.

Example

The same hue and lightness with the saturation lowered step by step.

Prompt
An HTML page showing how saturation changes a color in hsl(). Keep hue at 0 and lightness at 50%, and lower the saturation step by step: hsl(0, 100%, 50%), hsl(0, 80%, 50%), hsl(0, 60%, 50%), hsl(0, 40%, 50%), hsl(0, 20%, 50%), and hsl(0, 0%, 50%). Use them as heading backgrounds and label each.
Output: complete HTML page

Lightness

Lightness sets how much light the color has. 0% is no light (black), 50% is normal, and 100% is full light (white).

Example

The same hue and saturation with the lightness raised step by step.

Prompt
An HTML page showing how lightness changes a color in hsl(). Keep hue at 0 and saturation at 100%, and raise the lightness step by step: hsl(0, 100%, 0%), hsl(0, 100%, 25%), hsl(0, 100%, 50%), hsl(0, 100%, 75%), hsl(0, 100%, 90%), and hsl(0, 100%, 100%). Use them as heading backgrounds and label each.
Output: complete HTML page

Shades of Gray

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

Example

Hue and saturation stay at 0 while the lightness goes from dark to light.

Prompt
An HTML page showing shades of gray made with HSL. Keep hue and saturation at 0, and raise the lightness step by step: hsl(0, 0%, 0%), hsl(0, 0%, 24%), hsl(0, 0%, 47%), hsl(0, 0%, 71%), hsl(0, 0%, 94%), and hsl(0, 0%, 100%). Use them as heading backgrounds and label each.
Output: complete HTML page

HSLA Value

HSLA adds an alpha channel to HSL, which sets the opacity of the color.

You write it as hsla(hue, saturation, lightness, alpha). The alpha is a number from 0.0 (fully transparent) to 1.0 (fully solid).

Example

The same color at increasing alpha values, from fully transparent to fully solid.

Prompt
An HTML page showing the same HSL color at different alpha (opacity) levels using hsla(). Make six headings with background color hsla(9, 100%, 64%, A) where A goes 0, 0.2, 0.4, 0.6, 0.8, and 1. Label each so the increasing opacity is clear.
Output: complete HTML page