lch()

The lch() functional notation expresses a given color in the LCH color space. It has the same L axis as lab(), but uses polar coordinates C (Chroma) and H (Hue).

Syntax

css
lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);
lch(52.2345% 72.2 56.2 / .5);

Values

Functional notation: lch(L C H[ / A])

L

A <number> between 0 and 100, a <percentage> between 0% and 100%, or the keyword none, which specifies the CIE Lightness. Here the number 0 corresponds to 0% (black) and the number 100 corresponds to 100% (white).

C

A <number>, a <percentage>, or the keyword none, where 0% is 0 and 100% is the number 150. It is a measure of the chroma (roughly representing the "amount of color"). Its minimum useful value is 0, while its maximum is theoretically unbounded (but in practice does not exceed 230).

H

A <number>, an <angle>, or the keyword none, which represents the hue angle. More details on this type can be found on the <hue> reference.

A Optional

An <alpha-value> or the keyword none, where the number 1 corresponds to 100% (full opacity).

Note: Usually when percentage values have a numeric equivalent in CSS, 100% is equal to the number 1. This case is notable where 100% is equal to the number 100 for the L value and 150 for the C value.

Note: See Missing color components for the effect of none.

Formal syntax

<lch()> = 
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )

<hue> =
<number> |
<angle>

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

Examples

Adjusting lightness, chroma, and hue with lch()

The following example shows the effect of varying the L (lightness), C (chroma), and H (hue) values of the lch() functional notation.

HTML

html
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-chroma"></div>

<div data-color="green"></div>
<div data-color="green-hue"></div>

CSS

css
[data-color="blue"] {
  background-color: lch(0% 100 240);
}
[data-color="blue-light"] {
  background-color: lch(100% 100 240);
}

[data-color="red"] {
  background-color: lch(50% 130 20);
}
[data-color="red-chroma"] {
  background-color: lch(100% 30 20);
}

[data-color="green"] {
  background-color: lch(50% 132 130);
}
[data-color="green-hue"] {
  background-color: lch(50% 132 180);
}

Result

Adjusting opacity with lch()

The following example shows the effect of varying the A (alpha) value of the lch() functional notation. The red and red-alpha elements overlap the #background-div element to demonstrate the effect of opacity. Giving A a value of 0.4 makes the color 40% opaque.

HTML

html
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

CSS

css
[data-color="red"] {
  background-color: lch(50% 130 20);
}
[data-color="red-alpha"] {
  background-color: lch(50% 130 20 / 0.4);
}

Result

Specifications

Specification
CSS Color Module Level 4
# lab-colors

Browser compatibility

BCD tables only load in the browser

See also