In CSS, you can define a color using hue, saturation, and lightness (HSL) with the syntax:
hsl(hue, saturation, lightness)
Hue is represented as a degree on the color wheel ranging from 0 to 360, where 0 corresponds to red, 120 to green, and 240 to blue.
Saturation is expressed as a percentage value, where 0% signifies a shade of gray and 100% represents the full color intensity.
Lightness is also represented as a percentage, with 0% indicating black, 50% representing a neutral shade, and 100% indicating white.
You can experiment with various combinations of HSL values to create different colors.
Example
Saturation refers to the vibrancy or strength of a color.
At 100%, the color is pure and lacks any shades of gray.
At 50%, the color is diluted with 50% gray, yet it remains perceptible.
At 0%, the color is fully desaturated, appearing entirely gray with no trace of its original hue.
Example
The lightness of a color indicates the amount of illumination it possesses. At 0%, there is no light, resulting in a black shade.
At 50%, the color is neither dark nor light, representing an equal balance of illumination. At 100%, the color is fully illuminated, appearing as white.
Example
Gray shades are typically created by setting both the hue and saturation to 0, then adjusting the lightness from 0% to 100% to achieve darker or lighter tones.
Example
HSLA color values extend HSL color values by incorporating an alpha channel, which determines the opacity of a color.
An HSLA color value consists of:
hsla(hue, saturation, lightness, alpha)
The alpha parameter ranges from 0.0 (completely transparent) to 1.0 (fully opaque):
Explore various combinations of HSLA values to observe their effects.
Example
