hsla

The hsla CSS function specifies hue, saturation, lightness, and alpha.

Syntax

CSS

hsla()

Values

<hsla()> =
    [ <legacy-hsla-syntax> | <modern-hsla-syntax> ]
<legacy-hsla-syntax> =
    hsla(
        <hue>,
        <percentage>,
        <percentage>,
        <alpha-value>?
    )
<hue> =
    <number> |
    <angle>
<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<angle>

A number with a unit: deg (360 degrees in a full circle), grad (400 gradians in a full circle), rad (2π radians in a full circle), or turn (1 turn in a full circle).

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<alpha-value> =
    <number> |
    <percentage>
<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<modern-hsla-syntax> =
    hsla(
        [ <hue> | none ]
        [ <percentage> | <number> | none ]
        [ <percentage> | <number> | none ]
        [ / [ <alpha-value> | none ] ]?
    )
<hue> =
    <number> |
    <angle>
<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<angle>

A number with a unit: deg (360 degrees in a full circle), grad (400 gradians in a full circle), rad (2π radians in a full circle), or turn (1 turn in a full circle).

none

Specifies a missing component.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<alpha-value> =
    <number> |
    <percentage>
<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

Examples

1 · legacy

2 · legacy · alpha

3 · modern

4 · modern · alpha

5 · JS

HomeMenu