CSS 函数

CSS中的lch()函数表示LCH颜色空间中的颜色。使用与 lab() 函数相同的 L 轴，但除此之外它还使用极坐标 C（色度）和 H（色调） )。

要添加颜色透明度，可以将可选的 alpha 分量传递给 lch() 函数。

可能的值

lch 的函数表示法() 函数为 lch(L C H[ / A])。

  • L:可以包含任一格式，表示 CIE 亮度:

    • a <number>:0 到 100 之间的任何数字，其中 0 对应于 0%（黑色），100 对应于 100%（白色）。

    • <percentagenotransR:0% 到 100% 之间的任何值。

    • keyword none

  • C:可以包含任一格式，指定色度度量，即颜色量。最小有用值为 0，最大值理论上无界，但不超过 230:

    • a <number>:0 到 150 之间的任何数字。

    • <percentagenotransR:0% 到 100% 之间的任何值，其中 100% 等于 150。

    • 关键字无

  • H:可以包含指定色调角度的任一格式:

    • <number>:任意数字。

    • <angle>:角度值。

    • keyword none

  • A:表示颜色的透明度。它是一个可选值。

    • <alpha-value>:0 到 1 之间的任何数字，其中 1 对应于完全不透明，0 对应于完全透明。

    • keyword none

如果lch() 函数，值 100% 等于 L 值的数字 100，C 值的数字 150。

语法

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

CSS lch(): 组合值

以下示例显示了 lch() 函数与不同值组合的用法:

<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>