CSS 函式 - lch()

CSS 中的lch()函式以LCH顏色空間表示顏色。它使用與lab()函式相同的L軸，但除此之外，它使用極座標C（色度）和H（色調）。

要新增顏色透明度，可以將可選的alpha分量傳遞給lch()函式。

可能的值

lch()函式的功能表示法為lch(L C H[ / A])。

L：可以包含以下格式之一，表示CIE亮度
- 一個<number>：0到100之間的任意數字，其中0對應於0%（黑色），100對應於100%（白色）。
- 一個<percentage>：0%到100%之間的任意值。
- 關鍵字none
C：可以包含以下格式之一，指定色度的度量，即顏色的數量。最小有效值為0，最大值理論上不受限制，但不超過230
- 一個<number>：0到150之間的任意數字。
- 一個<percentage>：0%到100%之間的任意值，其中100%等於150。
- 關鍵字none
H：可以包含以下格式之一，指定色相角
- 一個<number>：任意數字。
- 一個<angle>：角度值。
- 關鍵字none
A：表示顏色的透明度。這是一個可選值。
- <alpha-value>：0到1之間的任意數字，其中1對應於完全不透明，0對應於完全透明。
- 關鍵字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>

列印頁面