lch()

Baseline 2023

新推出

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

lch() 函式式表示法使用 LCH 色彩空間來表示指定顏色，它代表了亮度（lightness）、色度（chroma）和色相（hue）。它與 lab() 顏色函式使用相同的 L 軸，即 CIELab 色彩空間，但它使用極座標 C（色度）和 H（色相）。

語法

css

/* Absolute values */
lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);
lch(52.2345% 72.2 56.2 / .5);

/* Relative values */
lch(from green l c h / 0.5)
lch(from #123456 calc(l + 10) c h)
lch(from hsl(180 100% 50%) calc(l - 10) c h)
lch(from var(--color-value) l c h / calc(alpha - 0.1))

值

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

注意： 通常在 CSS 中，當百分比值有等效的數值時，100% 等於數字 1。但 lch() 不是這種情況。在這裡，對於 L 值，100% 等於數字 100；對於 C 值，100% 等於數字 150。

絕對值語法

lch(L C H[ / A])

引數如下：

L: 一個介於 0 和 100 之間的 <number>，一個介於 0% 和 100% 之間的 <percentage>，或關鍵字 none（等同於 0%）。數字 0 對應 0%（黑色），數字 100 對應 100%（白色）。這個值指定了顏色在 CIELab 色彩空間中的亮度。

注意： lch() 中的 L 是感知亮度，指的是我們肉眼視覺上感知的“明亮程度”。這與 hsl() 中的 L 不同，後者表示的是與其他顏色相比的亮度。
C: 一個 <number>、一個 <percentage> 或關鍵字 none（在這種情況下等同於 0%）。這個值是顏色的色度（大致表示“顏色的量”）的度量。其有用的最小值為 0% 或 0，而其最大值理論上是無限的（但實際上不超過 230），其中 100% 等同於 150。
H: 一個 <number>、一個 <angle> 或關鍵字 none（等同於 0deg），表示顏色的<hue> 角度。

注意： 特定色相對應的角度在 sRGB（由 hsl() 和 hwb() 使用）、CIELAB（由 lch() 使用）和 Oklab（由 oklch() 使用）色彩空間中是不同的。請參閱下面的LCH 中的色相示例以及 <hue> 參考頁面瞭解更多詳情和示例。
A 可選: 一個 <alpha-value>，表示顏色的 alpha 通道值，其中數字 0 對應 0%（完全透明），1 對應 100%（完全不透明）。此外，關鍵字 none 可用於明確指定無 alpha 通道。如果未明確指定 A 通道值，則預設為 100%。如果包含該值，則其前面需要有一個斜槓（/）。

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

相對值語法

lch(from <color> L C H[ / A])

引數如下：

from <color>: 在定義相對顏色時，總是包含關鍵字 from，其後跟著一個 <color> 值，表示源顏色。這是相對顏色所基於的原始顏色。源顏色可以是任何有效的 <color> 語法，包括另一個相對顏色。
L: 一個介於 0 和 100 之間的 <number>，一個介於 0% 和 100% 之間的 <percentage>，或關鍵字 none（等同於 0%）。數字 0 對應 0%（黑色），數字 100 對應 100%（白色）。這個值指定了顏色在 CIELab 色彩空間中的亮度。
C: 一個 <number>、一個 <percentage> 或關鍵字 none（在這種情況下等同於 0%）。這個值表示輸出顏色的色度值（大致表示“顏色的量”）。其有用的最小值為 0% 或 0，而其最大值理論上是無限的（但實際上不超過 230），其中 100% 等同於 150。
H: 一個 <number>、一個 <angle> 或關鍵字 none（等同於 0deg），表示輸出顏色的<hue> 角度。請參閱下面的色相示例。
A 可選: 一個 <alpha-value>，表示輸出顏色的 alpha 通道值，其中數字 0 對應 0%（完全透明），1 對應 100%（完全不透明）。此外，關鍵字 none 可用於明確指定無 alpha 通道。如果未明確指定 A 通道值，則預設為源顏色的 alpha 通道值。如果包含該值，則其前面需要有一個斜槓（/）。

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

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

l 通道值解析為一個介於 0 和 100 之間（含）的 <number>。
c 通道值解析為一個介於 0 和 150 之間（含）的 <number>。
h 通道值解析為一個介於 0 和 360（含）之間的 <number>。
alpha 通道值解析為一個介於 0 和 1（含）之間的 <number>。

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

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

讓我們從源顏色 hsl(0 100% 50%)（等同於 red）開始。下面的函式輸出與源顏色相同的顏色——它使用源顏色的 l、c 和 h 通道值（54.29、106.854 和 40.856）作為輸出通道值。

css

lch(from hsl(0 100% 50%) l c h)

此函式的輸出顏色是 lch(54.29 106.854 40.856)。

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

css

lch(from hsl(0 100% 50%) 29.6871% 66.83 327.109)

在上述情況下，輸出顏色為 lch(29.6871 66.83 327.109)。

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

css

lch(from hsl(0 100% 50%) 70 150 h)

此示例：

將 hsl() 源顏色轉換為等效的 lch() 顏色——lch(54.29 106.854 40.856)。
將輸出顏色的 H 通道值設定為源 lch() 等效顏色的 H 通道值——40.856。
將輸出顏色的 L 和 C 通道值設定為不基於源顏色的新值：分別為 70 和 150。

最終的輸出顏色是 lch(70 150 40.856)。

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

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

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

css

lch(from hsl(0 100% 50% / 0.8) l c h / alpha)
/* Computed output color: lch(54.29 106.854 40.856 / 0.8) */

lch(from hsl(0 100% 50% / 0.8) l c h / 0.5)
/* Computed output color: lch(54.29 106.854 40.856 / 0.5) */

在下面的示例中，hsl() 源顏色再次被轉換為等效的 lch() 顏色——lch(54.29 106.854 40.856)。對 L、C、H 和 A 值應用 calc() 計算，最終輸出顏色為 lch(74.29 86.8541 0.856018 / 0.9)。

css

lch(from hsl(0 100% 50%) calc(l + 20) calc(c - 20) calc(h - 40) / calc(alpha - 0.1))

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

正式語法

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

<hue> = 
  <number>  |
  <angle>   

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

示例

調整顏色的亮度

這個例子展示了改變 lch() 函式式表示法中 L（亮度）值的效果。

HTML

html

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

<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>

CSS

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
div {
  height: 50px;
  border: 1px solid black;
}

css

[data-color="blue-dark"] {
  background-color: lch(10% 100 240);
}
[data-color="blue"] {
  background-color: lch(50% 100 240);
}
[data-color="blue-light"] {
  background-color: lch(90% 100 240);
}

[data-color="red-dark"] {
  background-color: lch(10% 130 20);
}
[data-color="red"] {
  background-color: lch(50% 130 20);
}
[data-color="red-light"] {
  background-color: lch(90% 130 20);
}

[data-color="green-dark"] {
  background-color: lch(10% 132 130);
}
[data-color="green"] {
  background-color: lch(50% 132 130);
}
[data-color="green-light"] {
  background-color: lch(90% 132 130);
}

結果

透過色度調整顏色強度

下面的例子展示了改變 lch() 函式式表示法中 C（色度）值的效果，隨著 C 值從完全飽和降低到接近灰色，顏色強度也隨之降低。

HTML

html

<div data-color="blue"></div>
<div data-color="blue-chroma1"></div>
<div data-color="blue-chroma2"></div>
<div data-color="blue-chroma3"></div>

<div data-color="red"></div>
<div data-color="red-chroma1"></div>
<div data-color="red-chroma2"></div>
<div data-color="red-chroma3"></div>

<div data-color="green"></div>
<div data-color="green-chroma1"></div>
<div data-color="green-chroma2"></div>
<div data-color="green-chroma3"></div>

CSS

以藍色、紅色和綠色作為初始顏色，我們為它們宣告逐漸減小的色度值：從最高值 150（相當於 100%）的完全飽和度開始，一直到 3（相當於 2%），這對於所有顏色來說都幾乎是灰色。

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}
div {
  height: 50px;
  border: 1px solid black;
}

css

[data-color="blue"] {
  background-color: lch(50% 150 240);
}
[data-color="blue-chroma1"] {
  background-color: lch(50% 105 240);
}
[data-color="blue-chroma2"] {
  background-color: lch(50% 54 240);
}
[data-color="blue-chroma3"] {
  background-color: lch(50% 3 240);
}

[data-color="red"] {
  background-color: lch(50% 100% 20deg);
}
[data-color="red-chroma1"] {
  background-color: lch(50% 70% 20deg);
}
[data-color="red-chroma2"] {
  background-color: lch(50% 36% 20deg);
}
[data-color="red-chroma3"] {
  background-color: lch(50% 2% 20deg);
}

[data-color="green"] {
  background-color: lch(50% 150 130);
}
[data-color="green-chroma1"] {
  background-color: lch(50% 105 130);
}
[data-color="green-chroma2"] {
  background-color: lch(50% 54 130);
}
[data-color="green-chroma3"] {
  background-color: lch(50% 3 130);
}

結果

如果我們使用 0 而不是 3 和 2%，並且亮度值相同，那麼所有顏色都將是相同色調的灰色。在這個例子中，它們是幾乎灰色。

LCH 中的色相

以下示例展示了 lch() 函式式表示法中不同 H（色相）值的色塊。

HTML

html

<div data-color="0">0deg</div>
<div data-color="20">20deg</div>
<div data-color="40">40deg</div>
<div data-color="60">60deg</div>

以此類推。

<div data-color="80">80deg</div>
<div data-color="100">100deg</div>
<div data-color="120">120deg</div>
<div data-color="140">140deg</div>
<div data-color="160">160deg</div>
<div data-color="180">180deg</div>
<div data-color="200">200deg</div>
<div data-color="220">220deg</div>
<div data-color="240">240deg</div>
<div data-color="260">260deg</div>
<div data-color="280">280deg</div>
<div data-color="300">300deg</div>
<div data-color="320">320deg</div>
<div data-color="340">340deg</div>
<div data-color="360">360deg</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
div {
  flex: 0 0 4em;
  text-align: center;
  line-height: 4em;
  display: inline-block;
  border: 1px solid black;
  color: white;
  font-family: monospace;
}

css

[data-color="0"] {
  background-color: lch(50% 150 0deg);
}
[data-color="20"] {
  background-color: lch(50% 150 20deg);
}
[data-color="40"] {
  background-color: lch(50% 150 40deg);
}
[data-color="60"] {
  background-color: lch(50% 150 60deg);
}

以此類推。

[data-color="80"] {
  background-color: lch(50% 150 80deg);
}
[data-color="100"] {
  background-color: lch(50% 150 100deg);
}
[data-color="120"] {
  background-color: lch(50% 150 120deg);
}
[data-color="140"] {
  background-color: lch(50% 150 140deg);
}
[data-color="160"] {
  background-color: lch(50% 150 160deg);
}
[data-color="180"] {
  background-color: lch(50% 150 180deg);
}
[data-color="200"] {
  background-color: lch(50% 150 200deg);
}
[data-color="220"] {
  background-color: lch(50% 150 220deg);
}
[data-color="240"] {
  background-color: lch(50% 150 240deg);
}
[data-color="260"] {
  background-color: lch(50% 150 260deg);
}
[data-color="280"] {
  background-color: lch(50% 150 280deg);
}
[data-color="300"] {
  background-color: lch(50% 150 300deg);
}
[data-color="320"] {
  background-color: lch(50% 150 320deg);
}
[data-color="340"] {
  background-color: lch(50% 150 340deg);
}
[data-color="360"] {
  background-color: lch(50% 150 360deg);
}

結果

lch() 中的色相角度與 hsl() 中的不同。更多資訊請參見 <hue>。在 hsl() 中，sRGB 顏色的 0deg 代表紅色。然而，在 CIELab 色彩空間中，0deg 對應品紅色，而紅色大約是 41deg。

使用 lch() 調整不透明度

以下示例展示了改變 lch() 函式式表示法中 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: lch(100% 100 240);
  width: 150px;
  height: 40px;
}

css

[data-color="red"] {
  background-color: lch(50% 130 20);
}
[data-color="red-alpha"] {
  background-color: lch(50% 130 20 / 0.4);
}

結果

使用 lch() 的相對顏色

本示例為三個 <div> 元素設定了不同的背景顏色，演示瞭如何使用 lch() 顏色函式透過相對顏色來改變顏色的亮度。中間的 <div> 保留了原始的 --base-color，而左邊和右邊的 <div> 則被賦予了 --base-color 的提亮和變暗版本。

這些變體是使用相對顏色定義的——將 --base-color 自定義屬性傳入一個 lch() 函式，並透過一個 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;
}

#one {
  background-color: lch(from var(--base-color) calc(l + 15) c h);
}

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

#three {
  background-color: lch(from var(--base-color) calc(l - 15) c h);
}

結果

輸出如下：

規範

規範
CSS 顏色模組第五版 # relative-LCH
CSS 顏色模組第四版 # lab-colors

瀏覽器相容性

另見

所有顏色表示法列表
使用相對顏色
CSS 顏色模組
<hue> 資料型別
Lea Verou 的《CSS 中的 LCH 顏色：是什麼、為什麼以及如何使用？》（2020 年）

幫助改進 MDN

瞭解如何貢獻

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

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