lch()

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

L

A <number> between 0 and 100 or a <percentage> between 0% and 100% that specifies the CIE Lightness where the number 0 corresponds to 0% (black) and the number 100 corresponds to 100% (white).

C

A <number> or a <percentage> 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> or a <angle> that specifies the hue angle along the positive "a" axis (toward purplish red), 90deg points along the positive "b" axis (toward mustard yellow), 180deg points along the negative "a" axis (toward greenish cyan), and 270deg points along the negative "b" axis (toward sky blue).

A Optional

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

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

<hue> = 
  <number>  |
  <angle>   

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

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

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

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

[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

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

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

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lch(100% 100 240);
  width: 150px;
  height: 40px;
}

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

Result

• The <color> data type for a list of all color notations
• LCH colors in CSS: what, why, and how?
• Safari Technology Preview 122 release notes: includes lch() and lab() colors