CSS 函式 - oklab()

CSS 中的oklab()函式使用 oklab 顏色空間表示顏色。它表示人眼可見的所有顏色。它使用 Oklab 顏色空間中的笛卡爾座標，即a-和b-軸。

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

為了使用極座標系（色度和色調），可以使用oklch()函式。

可能的值

oklab()函式的函式表示法為oklab(L a b[ / A])。

L：可以包含以下格式之一，表示感知亮度
- 一個<number>：0到1之間的任何數字，其中0對應於0%（黑色），1對應於100%（白色）。
- 一個<percentage>：0%到100%之間的任何值。
- 關鍵字none
a：可以包含以下格式之一，指定 oklab 顏色空間中 a 軸上的距離（顯示綠色/紅色的程度）
- 一個<number>：-0.4到0.4之間的任何數字。
- 一個<percentage>：-100%到100%之間的任何值。
- 關鍵字none
b：可以包含以下格式之一，指定 oklab 顏色空間中 b 軸上的距離（顯示藍色/黃色的程度）
- 一個<number>：-0.4到0.4之間的任何數字。
- 一個<percentage>：-100%到100%之間的任何值。
- 關鍵字none
A：表示顏色的透明度。這是一個可選值。
- <alpha-value>：0到1之間的任何數字，其中1對應於完全不透明，0對應於完全透明。
- 關鍵字none

語法

oklab(29.2345% 0.3825 20.0664%) | oklab(1 39.3825% 20.0664%) | oklab(29.2345% -0.23 20.0664% / 0.5);

CSS oklab() - 值的組合

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

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

   .oklab-light-100 {
      background-color: oklab(100% 0.4 85%);
   } 

   .oklab-light-none {
      background-color: oklab(none 0.29 0.34);
      color: white;
   }

   .oklab-b-none {
      background-color: oklab(.75 75% none);
   }

   .oklab-with-alpha {
      background-color: oklab(1 0.12 75% / 0.8);
   }
</style>
</head>
<body>
   <div class="oklab-light-50">oklab(50% -100% 0.4)</div>
   <div class="oklab-light-100">oklab(100% 0.4 85%)</div>
   <div class="oklab-light-none">oklab(none 0.29 0.34)</div>
   <div class="oklab-b-none">oklab(0.75 75% none)</div>
   <div class="oklab-with-alpha">oklab(1 0.12 75% / 0.8)</div>
</body>
</html>

列印頁面