CSS 函式 - oklch()

CSS 中的oklch()函式使用 oklch 顏色空間表示顏色。它使用與oklab()函式相同的 L 軸，但除此之外，它使用極座標C (色度)和H (色相)。

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

可能的值

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

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

語法

oklch(29.2345% 0.36 24.57) | oklch(29 0.12 20deg) | oklch(29.2345% 0.4 49.0664 / 0.5);

CSS oklch() - 值組合

以下示例顯示了使用不同值組合的 oklch() 函式的用法

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

   .oklch-light-100 {
      background-color: oklch(100% 0.4 200);
   } 

   .oklch-light-none {
      background-color: oklch(none 0.29 60deg);
      color: white;
   }

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

   .oklch-with-alpha {
      background-color: oklch(85 0.12 75deg / 0.8);
   }
</style>
</head>
<body>
   <div class="oklch-chroma-100">oklch(50% 100% 200)</div>
   <div class="oklch-light-100">oklch(100% 0.4 200)</div>
   <div class="oklch-light-none">oklch(none 0.29 60deg)</div>
   <div class="oklch-hue-none">oklch(75 75% none)</div>
   <div class="oklch-with-alpha">oklch(85 0.12 75deg / 0.8)</div>
</body>
</html>

列印頁面