HomeMenu
Jesus · Bible · HTML · CSS · JS · PHP · SVG · Applications

hsla

Description

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

ChannelLow UnitHigh UnitLow NumberHigh Number
h0.0deg360.0deg0.0360.0
s0.0%100.0%0.0100.0
l0.0%100.0%0.0100.0
a0.0%100.0%0.01.0

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 · hsl

2 · legacy · hsla

3 · modern · hsl · unit

4 · modern · hsla · unit

5 · modern · hsl · number

6 · modern · hsla · number

7 · JS