lab()

Baseline 2023

新推出

自 ⁨2023 年 5 月⁩起，此功能可在最新的裝置和瀏覽器版本上使用。此功能可能無法在舊版裝置或瀏覽器上使用。

lab() 函式式表示法用於在 CIE L*a*b* 色彩空間中表示指定顏色。

Lab 透過指定顏色的亮度、紅/綠軸值、藍/黃軸值以及可選的 alpha 透明度值，來表示人類可以看到的整個顏色範圍。

語法

css

/* Absolute values */
lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);

/* Relative values */
lab(from green l a b / 0.5)
lab(from #123456 calc(l + 10) a b)
lab(from hsl(180 100% 50%) calc(l - 10) a b)

值

下面描述了絕對顏色和相對顏色的允許值。

絕對值語法

lab(L a b[ / A])

引數如下：

L: 一個介於 0 和 100 之間的 <number>、一個介於 0% 和 100% 之間的 <percentage>，或關鍵字 none（在此情況下等同於 0%）。該值指定顏色的亮度。其中，數字 0 對應 0%（黑色），數字 100 對應 100%（白色）。
a: 一個介於 -125 和 125 之間的 <number>、一個介於 -100% 和 100% 之間的 <percentage>，或關鍵字 none（在此情況下等同於 0%）。該值指定顏色沿 a 軸的距離，該軸定義了顏色的綠色程度（朝 -125 移動）或紅色程度（朝 +125 移動）。請注意，這些值是有符號的（允許正值和負值）並且理論上是無界的，這意味著你可以設定超出 ±125（±100%）限制的值。實際上，值不能超過 ±160。
b: 一個介於 -125 和 125 之間的 <number>、一個介於 -100% 和 100% 之間的 <percentage>，或關鍵字 none（在此情況下等同於 0%）。該值指定顏色沿 b 軸的距離，該軸定義了顏色的藍色程度（朝 -125 移動）或黃色程度（朝 +125 移動）。請注意，這些值是有符號的（允許正值和負值）並且理論上是無界的，這意味著你可以設定超出 ±125（±100%）限制的值。實際上，值不能超過 ±160。
A 可選: 一個 <alpha-value>，表示顏色的 alpha 通道值，其中數字 0 對應 0%（完全透明），1 對應 100%（完全不透明）。此外，關鍵字 none 可用於明確指定無 alpha 通道。如果未明確指定 A 通道值，則預設為 100%。如果包含該值，則其前面需要有一個斜槓（/）。

備註：有關 none 的效果，請參閱缺失的顏色分量。

相對值語法

lab(from <color> L a b[ / A])

引數如下：

from <color>: 在定義相對顏色時，總是包含關鍵字 from，其後跟著一個 <color> 值，表示源顏色。這是相對顏色所基於的原始顏色。源顏色可以是任何有效的 <color> 語法，包括另一個相對顏色。
L: 一個介於 0 和 100 之間的 <number>、一個介於 0% 和 100% 之間的 <percentage>，或關鍵字 none（在此情況下等同於 0%）。此值表示輸出顏色的亮度。其中數字 0 對應 0%（黑色），數字 100 對應 100%（白色）。
a: 一個介於 -125 和 125 之間的 <number>、一個介於 -100% 和 100% 之間的 <percentage>，或關鍵字 none（在此情況下等同於 0%）。該值表示輸出顏色沿 a 軸的距離，該軸定義了顏色的綠色程度（朝 -125 移動）或紅色程度（朝 +125 移動）。請注意，這些值是有符號的（允許正值和負值）並且理論上是無界的，這意味著你可以設定超出 ±125（±100%）限制的值。實際上，值不能超過 ±160。
b: 一個介於 -125 和 125 之間的 <number>、一個介於 -100% 和 100% 之間的 <percentage>，或關鍵字 none（在此情況下等同於 0%）。該值表示輸出顏色沿 b 軸的距離，該軸定義了顏色的藍色程度（朝 -125 移動）或黃色程度（朝 +125 移動）。請注意，這些值是有符號的（允許正值和負值）並且理論上是無界的，這意味著你可以設定超出 ±125（±100%）限制的值。實際上，值不能超過 ±160。
A 可選: 一個 <alpha-value>，表示輸出顏色的 alpha 通道值，其中數字 0 對應 0%（完全透明），1 對應 100%（完全不透明）。此外，關鍵字 none 可用於明確指定無 alpha 通道。如果未明確指定 A 通道值，則預設為源顏色的 alpha 通道值。如果包含該值，則其前面需要有一個斜槓（/）。

備註：通常，在 CSS 中當百分比值有等效的數值時，100% 等於數字 1。但對於 Lab 的亮度和 a、b 軸，情況並非總是如此，如上所述。對於 L，範圍是 0 到 100，其中 100% 等於 100。a 和 b 值支援負值和正值，其中 100% 等於 125，-100% 等於 -125。

定義相對顏色輸出通道分量

在 lab() 函式中使用相對顏色語法時，瀏覽器會將源顏色轉換為等效的 Lab 顏色（如果尚未指定）。該顏色被定義為三個不同的顏色通道值——l（亮度）、a（綠/紅軸）和 b（藍/黃軸）——外加一個 alpha 通道值（alpha）。這些通道值可在函式內部使用，用於定義輸出顏色的通道值。

l 通道值解析為一個介於 0 和 100（含）之間的 <number>。
a 和 b 通道值均解析為一個介於 -125 和 125（含）之間的 <number>。
alpha 通道值解析為一個介於 0 和 1（含）之間的 <number>。

在定義相對顏色時，輸出顏色的不同通道可以用幾種不同的方式表示。下面，我們將透過一些示例來說明這些方式。

在下面的前兩個示例中，我們使用了相對顏色語法。然而，第一個示例輸出與源顏色相同的顏色，而第二個示例輸出一個完全不基於源顏色的顏色。它們並沒有真正建立相對顏色！你不太可能在實際程式碼庫中使用這些，而可能會直接使用絕對顏色值。我們包含這些示例是為了作為學習相對 lab() 語法的起點。

我們從源顏色 hsl(0 100% 50%)（等同於 red）開始。以下函式輸出與源顏色相同的顏色——它使用源顏色的 l、a 和 b 通道值（54.29、80.8198 和 69.8997）作為輸出通道值：

css

lab(from hsl(0 100% 50%) l a b)

該函式的輸出顏色是 lab(54.29 80.8198 69.8997)。

下一個函式對輸出顏色的通道值使用絕對值，輸出了一個完全不同於源顏色的新顏色：

css

lab(from hsl(0 100% 50%) 29.692% 44.89% -29.034%)

在上述情況下，輸出顏色是 lab(29.692 56.1125 -36.2925)。

以下函式建立了一個基於源顏色的相對顏色：

css

lab(from hsl(0 100% 50%) l -100 b)

此示例：

將 hsl() 源顏色轉換為等效的 lab() 顏色——lab(54.29 80.8198 69.8997)。
將輸出顏色的 l 和 b 通道值設定為源 lab() 等效顏色的 L 和 b 通道值——這些值分別為 54.29 和 69.8997。
將輸出顏色的 a 通道值設定為一個不基於源顏色的新值：-100。

最終的輸出顏色是 lab(54.29 -100 69.8997)。

備註：如上所述，如果輸出顏色使用的顏色模型與源顏色不同，源顏色會在後臺被轉換為與輸出顏色相同的模型，以便能夠以相容的方式表示（即使用相同的通道）。

在本節我們目前看到的示例中，源顏色和輸出顏色的 alpha 通道都沒有被明確指定。當未指定輸出顏色的 alpha 通道時，它預設為與源顏色 alpha 通道相同的值。當未指定源顏色的 alpha 通道時（且它不是相對顏色），它預設為 1。因此，上述示例中的源和輸出 alpha 通道值均為 1。

讓我們看一些指定源和輸出 alpha 通道值的示例。第一個示例將輸出 alpha 通道值指定為與源 alpha 通道值相同，而第二個示例則指定一個與源 alpha 通道值無關的不同輸出 alpha 通道值。

css

lab(from hsl(0 100% 50% / 0.8) l a b / alpha)
/* Computed output color: lab(54.29 80.8198 69.8997 / 0.8) */

lab(from hsl(0 100% 50% / 0.8) l a b / 0.5)
/* Computed output color: lab(54.29 80.8198 69.8997 / 0.5) */

在下面的示例中，hsl() 源顏色再次被轉換為 lab() 等效顏色——lab(54.29 80.8198 69.8997)。calc() 計算被應用於 L、a、b 和 A 值，最終得到輸出顏色 lab(74.29 60.8198 29.8997 / 0.9)：

css

lab(from hsl(0 100% 50%) calc(l + 20) calc(a - 20) calc(b - 40) / calc(alpha - 0.1))

備註：因為源顏色通道值被解析為 <number> 值，所以在使用它們進行計算時，你必須給它們加上數字，即使在通道通常接受 <percentage>、<angle> 或其他值型別的情況下也是如此。例如，將 <percentage> 新增到 <number> 是行不通的。

正式語法

<lab()> = 
  lab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<alpha-value> = 
  <number>      |
  <percentage>

示例

調整亮度

以下示例顯示了改變 lab() 函式亮度值的效果。

HTML

html

<div data-color="red-dark"></div>
<div data-color="red"></div>
<div data-color="red-light"></div>

<div data-color="green-dark"></div>
<div data-color="green"></div>
<div data-color="green-light"></div>

<div data-color="blue-dark"></div>
<div data-color="blue"></div>
<div data-color="blue-light"></div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
div {
  height: 50px;
  flex: 0 0 28%;
  border: 1px solid black;
}

css

[data-color="red-dark"] {
  background-color: lab(5 125 71);
}
[data-color="red"] {
  background-color: lab(40 125 71);
}
[data-color="red-light"] {
  background-color: lab(95 125 71);
}

[data-color="green-dark"] {
  background-color: lab(10% -120 125);
}
[data-color="green"] {
  background-color: lab(50% -120 125);
}
[data-color="green-light"] {
  background-color: lab(90% -120 125);
}

[data-color="blue-dark"] {
  background-color: lab(10 -120 -120);
}
[data-color="blue"] {
  background-color: lab(50 -120 -120);
}
[data-color="blue-light"] {
  background-color: lab(90 -120 -120);
}

結果

調整顏色軸

此示例演示了將 lab() 函式的 a 和 b 值設定為 a 軸（從綠色（-125）到紅色（125））和 b 軸（從藍色（-125）到黃色（125））的端點和中點的效果。

HTML

html

<div data-color="red-yellow"></div>
<div data-color="red-zero"></div>
<div data-color="red-blue"></div>

<div data-color="zero-yellow"></div>
<div data-color="zero-zero"></div>
<div data-color="zero-blue"></div>

<div data-color="green-yellow"></div>
<div data-color="green-zero"></div>
<div data-color="green-blue"></div>

CSS

我們使用 CSS 的 background-color 屬性，沿著 a 軸和 b 軸改變 lab() 顏色函式的 a 和 b 值，展示了每種情況下最大值、中點值和最小值的影響。

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
div {
  height: 50px;
  flex: 0 0 28%;
  border: 1px solid black;
}

css

/* a-axis max, variable b-axis */
[data-color="red-yellow"] {
  background-color: lab(50 125 125);
}
[data-color="red-zero"] {
  background-color: lab(50 125 0);
}
[data-color="red-blue"] {
  background-color: lab(50 125 -125);
}

/* a-axis center, variable b-axis */
[data-color="zero-yellow"] {
  background-color: lab(50 0 125);
}
[data-color="zero-zero"] {
  background-color: lab(50 0 0);
}
[data-color="zero-blue"] {
  background-color: lab(50 0 -125);
}

/* a-axis min, variable b-axis */
[data-color="green-yellow"] {
  background-color: lab(50 -125 125);
}
[data-color="green-zero"] {
  background-color: lab(50 -125 0);
}
[data-color="green-blue"] {
  background-color: lab(50 -125 -125);
}

結果

左列位於 b 軸的黃色端（125），右列位於藍色端（-125）。頂行顯示 a 軸紅色端（125）的顏色，底行是綠色端（-125）。中間的列和行位於每個軸的中點（0），中間的單元格是灰色的；它不含紅、綠、黃或藍，兩個軸的值都為 0。

沿 a 軸和 b 軸的線性漸變

此示例包括線性漸變，以演示 lab() 函式的值沿 a 軸（從紅色到綠色）和 b 軸（從黃色到藍色）的變化過程。在每個漸變影像中，一個軸保持不變，而另一個軸從軸值的低端向高階變化。

<div data-color="red-to-green-yellow">
  <span>red</span><span>`b`= -125 (yellow)</span><span>green</span>
</div>
<div data-color="red-to-green-zero">
  <span>red</span><span>no yellow or blue</span><span>green</span>
</div>
<div data-color="red-to-green-blue">
  <span>red</span><span>`b`= 125 (blue)</span><span>green</span>
</div>

<div data-color="yellow-to-blue-red">
  <span>yellow</span><span>`a` = -125 (red)</span><span>blue</span>
</div>
<div data-color="yellow-to-blue-zero">
  <span>yellow</span><span>no red or green</span><span>blue</span>
</div>
<div data-color="yellow-to-blue-green">
  <span>yellow</span><span>`a` = 125 (green)</span><span>blue</span>
</div>

CSS

div {
  height: 50px;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
span {
  background-color: #ffffffcc;
  padding: 3px;
}

css

/* a-axis gradients */
[data-color="red-to-green-yellow"] {
  background-image: linear-gradient(to right, lab(50 125 125), lab(50 -125 125));
}
[data-color="red-to-green-zero"] {
  background-image: linear-gradient(to right, lab(50 125 0), lab(50 -125 0));
}
[data-color="red-to-green-blue"] {
  background-image: linear-gradient(to right, lab(50 125 -125), lab(50 -125 -125));
}

/* b-axis gradients */
[data-color="yellow-to-blue-red"] {
  background-image: linear-gradient(to right, lab(50 125 125), lab(50 125 -125));
}
[data-color="yellow-to-blue-zero"] {
  background-image: linear-gradient(to right, lab(50 0 125), lab(50 0 -125));
}
[data-color="yellow-to-blue-green"] {
  background-image: linear-gradient(to right, lab(50 -125 125),lab(50 -125 -125));
}

結果

調整不透明度

以下示例顯示了改變 lab() 函式式表示法中 A（alpha）值的效果。red 和 red-alpha 元素與 #background-div 元素重疊，以演示不透明度的效果。將 A 的值設為 0.4 會使顏色變為 40% 不透明。

HTML

html

<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lightblue;
  width: 150px;
  height: 40px;
}

css

[data-color="red"] {
  background-color: lab(80 125 125);
}
[data-color="red-alpha"] {
  background-color: lab(80 125 125 / 0.4);
}

結果

在 lab() 中使用相對顏色

此示例為三個 <div> 元素設定了不同的背景顏色。中間的元素使用了未經修改的 --base-color，而左右兩邊的元素則使用了該 --base-color 的提亮和變暗版本。

這些變體是使用相對顏色定義的——將 --base-color 自定義屬性傳遞給 lab() 函式，然後透過 calc() 函式修改輸出顏色的亮度通道以達到預期效果。提亮的顏色在亮度通道上增加了 15%，而變暗的顏色則從亮度通道上減去了 15%。

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

css

:root {
  --base-color: orange;
  /* equivalent of lab(75 24 79) */
}

#one {
  background-color: lab(from var(--base-color) calc(l + 15) a b);
}

#two {
  background-color: var(--base-color);
}

#three {
  background-color: lab(from var(--base-color) calc(l - 15) a b);
}

結果

輸出如下：

規範

規範
CSS 顏色模組第五版 # 相對 Lab
CSS 顏色模組第四版 # lab-colors

瀏覽器相容性

另見

<color> 資料型別
<color-function> 資料型別
使用相對顏色
CSS 顏色模組
LCH colors in CSS: what, why, and how?（Lea Verou，2020 年）
Safari Technology Preview 122 release notes：包含 lab() 和 lch() 顏色

幫助改進 MDN

瞭解如何貢獻

此頁面的最後修改時間是 ⁨2025 年 9 月 21 日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題