CSS Function - lch()

The lch() function in CSS expresses a color in LCH color space. Uses the same L-axis as lab() function, but apart from that it uses the polar coordinates C (Chroma) and H (Hue).

To add the color transparency, an optional alpha component can be passed to the lch() function.

Possible values

The functional notation for lch() function is lch(L C H[ / A]).

  • L: can contain either of the format(s), that represents the CIE lightness:

    • a <number>: any number between 0 and 100, where 0 corresponds to 0% (black) and 100 corresponds to 100% (white).

    • a <percentage>: any value between 0% and 100%.

    • keyword none

  • C: can contain either of the format(s), that specifies the measure of chroma, i.e., the amount of color. Minimal useful value is 0, maximum value is unbounded in theory, but does not exceed 230:

    • a <number>: any number between 0 and 150.

    • a <percentage>: any value between 0% and 100%, where 100% equal to 150.

    • keyword none

  • H: can contain either of the format(s), that specifies the hue angle:

    • a <number>: any number.

    • a <angle>: an angle value.

    • keyword none

  • A: represents the transparency of the color. It is an optional value.

    • <alpha-value>: any number between 0 and 1, where 1 corresponds to full opacity and 0 corresponds to full transparency.

    • keyword none

In case of lch() function, the value 100% is equal to number 100 for the L value and 150 for C value.

Syntax

lch(29.2345% 39.3825 20) | lch(29 39.3825% 20deg) | lch(29.2345% 39.3825 20.0664 / 0.5);

CSS lch() - Combination of Values

Following is an example showing the usage of lch() function with different combinations of values:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   
   .lch-chroma-100 {
      background-color: lch(50% 100% 200);
   } 

   .lch-light-100 {
      background-color: lch(100% 50 200);
   } 

   .lch-light-none {
      background-color: lch(none 130 20);
      color: white;
   }

   .lch-hue-none {
      background-color: lch(75 75% none);
   }

   .lch-with-alpha {
      background-color: lch(85 120 75deg / 0.4);
   }
</style>
</head>
<body>
   <div class="lch-chroma-100">lch(50% 100% 200)</div>
   <div class="lch-light-100">lch(100% 50 200)</div>
   <div class="lch-light-none">lch(none 130 20)</div>
   <div class="lch-hue-none">lch(75 75% none)</div>
   <div class="lch-with-alpha">lch(85 120 75deg / 0.4)</div>
</body>
</html>
Advertisements