lch
Description
Chroma maximum is unbounded but should not exceed 230 in practice.
Channel | Low Unit | High Unit | Low Number | High Number |
---|---|---|---|---|
l | 0.0% | 100.0% | 0.0 | 100.0 |
c | 0.0% | 100.0% | 0.0 | 150.0 |
h | 0.0deg | 360.0deg | 0.0 | 360.0 |
a | 0.0% | 100.0% | 0.0 | 1.0 |
Syntax
CSS
lch()
Values
<lch()> = lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<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.
none
Specifies a missing component.
<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).
<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 · lch · unit
2 · lcha · unit
3 · lch · number
4 · lcha · number
5 · JS
Links
Related
Functions
- abs
- acos
- asin
- atan
- atan2
- attr
- calc
- clamp
- color
- conic-gradient
- cos
- counter
- counters
- hsl
- hsla
- hwb
- lab
- 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