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

hsl

Description

The hsl function for CSS specifies hue, saturation, and lightness.

Syntax

CSS

hsl()

Values

<hsl()> =
    [ <legacy-hsl-syntax> | <modern-hsl-syntax> ]
<legacy-hsl-syntax> =
    hsl(
        <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-hsl-syntax> =
    hsl(
        [ <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

color

hsla

hwb

lab

lch

oklab

oklch

rgb

rgba

abs

acos

asin

atan

atan2

attr

calc

clamp

color

conic-gradient

cos

counter

counters

hsla

hwb

lab

lch

linear-gradient

matrix

matrix3d

max

min

mod

oklab

oklch

param

perspective

radial-gradient

rem

repeating-conic-gradient

repeating-linear-gradient

repeating-radial-gradient

rgb

rgba

rotate

rotate3d

rotateX

rotateY

rotateZ

round

scale

scale3d

scaleX

scaleY

scaleZ

sin

skew

skewX

skewY

src

tan

translate

translate3d

translateX

translateY

translateZ

url

var

World Wide Web Consortium (W3C)

HomeMenu