W3cubDocs

/CSS

hsla()

The hsla() functional notation expresses a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.

Try it

Note: The Level 4 specification allows for space-separated in addition to comma-separated values.

Syntax

hsla(100, 100%, 50%, 1) /* #5f0 */
hsla(235, 100%, 50%, .5) /* #0015ff with 50% opacity */
hsla(235 100% 50% / 1); /* CSS Colors 4 space-separated values */

Values

Functional notation: hsla(H, S, L[, A])

H (hue) is an <angle> of the color circle given in degs, rads, grads, or turns in the CSS Color specification. When written as a unitless <number>, it is interpreted as degrees, as specified in the CSS Color Level 3 specification. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an <angle>, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.

S (saturation) and L (lightness) are percentages. 100% saturation is completely saturated, while 0% is completely unsaturated (gray). 100% lightness is white, 0% lightness is black, and 50% lightness is "normal."

A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).

Functional notation: hsla(H S L[ / A])

CSS Colors Level 4 adds support for space-separated values in the functional notation.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
hsla
1
12
3
9
10
3.1
≤37
18
4
10.1
2
1.0
space_separated_parameters
65
79
52
No
52
12.1
65
65
52
47
12.2
9.0

© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla