CSS 函式 - lab()

CSS 中的 lab() 函式使用 CIE L*a*b 顏色空間表示顏色。它表示人眼可見的所有顏色。

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

可能的值

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

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

對於 lab() 函式，值 100% 等於 L 值的數字 100 和 a 和 b 值的 125。

語法

lab(29.2345% 39.3825 20.0664) | lab(29 39.3825% 20.0664%) | lab(29.2345% 39.3825 20.0664 / 0.5);

CSS lab() - 值組合

以下示例顯示了使用不同值組合使用 lab() 函式的情況

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .lab-b-none {
      background-color: lab(100 125 none);
   }
   .lab-a-none {
      background-color: lab(100 none 125);
   }

   .lab-l-none {
      background-color: lab(none -120 125);
      color: white;
   }
   .lab-l-percent {
      background-color: lab(75% -120 none);
   }

   .lab-ab-negative {
      background-color: lab(0 -120 -120);
   }
   .lab-all-positive {
      background-color: lab(100 -125 -110);
   }

   .lab-alpha {
      background-color: lab(100 -125 -110 / 0.2);
   }
</style>
</head>
<body>
   <div class="lab-b-none">b=none</div>
   <div class="lab-a-none">a=none</div>

   <div class="lab-l-none">L=none</div>
   <div class="lab-l-percent">L=%</div>

   <div class="lab-ab-negative">a&b=-ve values</div>
   <div class="lab-all-positive">all=+ve values</div>

   <div class="lab-alpha">alpha value added</div>
</body>
</html>

列印頁面