CSS Colors hsla() Notation


Example

Similar to hsl() notation, but with an added alpha (opacity) value.

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* half-translucent blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

Syntax

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);
ValueDescription
<hue>specified in degrees around the color wheel (without units), where 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta, and 360° is red
<saturation>percentage where 0% is fully desaturated (grayscale) and 100% is fully saturated (vividly colored)
<lightness>percentage where 0% is fully black and 100% is fully white
<alpha>a number from 0 - 1 where 0 is fully transparent and 1 is fully opaque