color()

Baseline 2023

新推出

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

color() 函式式表示法允許在一個特定的、指定的顏色空間中指定顏色，而不是大多數其他顏色函式所操作的隱式 sRGB 顏色空間。

可以使用 color-gamut CSS 媒體特性檢測對特定顏色空間的支援。

語法

css

/* Absolute values */
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);

/* Relative values */
color(from green srgb r g b / 0.5)
color(from #123456 xyz calc(x + 0.75) y calc(z - 0.35))

值

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

絕對值語法

color(colorspace c1 c2 c3[ / A])

引數如下：

顏色空間: 一個 <ident>，表示以下預定義顏色空間之一：srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz、xyz-d50 或 xyz-d65。
c1, c2, c3: 每個值都可以寫成 <number>、<percentage>，或關鍵字 none（在這種情況下等同於 0）。這些值表示顏色空間的元件值。使用 <number> 值時，通常 0 到 1 表示顏色空間的邊界。允許超出該範圍的值，但它們將超出給定顏色空間的色域。使用百分比值時，100% 表示 1，0% 表示 0。
A 可選: 一個 <alpha-value>，表示顏色的 alpha 通道值，其中數字 0 對應 0%（完全透明），1 對應 100%（完全不透明）。此外，關鍵字 none 可用於明確指定無 alpha 通道。如果未明確指定 A 通道值，則預設為 100%。如果包含該值，則其前面需要有一個斜槓（/）。

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

相對值語法

color(from <color> colorspace c1 c2 c3[ / A])

引數如下：

from <color>: 在定義相對顏色時，總是包含關鍵字 from，其後跟著一個 <color> 值，表示源顏色。這是相對顏色所基於的原始顏色。源顏色可以是任何有效的 <color> 語法，包括另一個相對顏色。
顏色空間: 一個 <ident>，表示輸出顏色的顏色空間，通常是以下預定義顏色空間之一：srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz、xyz-d50 或 xyz-d65。
c1, c2, c3: 每個值都可以寫成 <number>、<percentage>，或關鍵字 none（在這種情況下等同於 0）。這些值表示輸出顏色的元件值。使用 <number> 值時，通常 0 到 1 表示顏色空間的邊界。允許超出該範圍的值，但它們將超出給定顏色空間的色域。通常，使用百分比值時，100% 表示 1，0% 表示 0。
A 可選: 一個 <alpha-value>，表示輸出顏色的 alpha 通道值，其中數字 0 對應 0%（完全透明），1 對應 100%（完全不透明）。此外，關鍵字 none 可用於明確指定無 alpha 通道。如果未明確指定 A 通道值，則預設為源顏色的 alpha 通道值。如果包含該值，則其前面需要有一個斜槓（/）。

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

在 color() 函式內部使用相對顏色語法時，瀏覽器會將原始顏色轉換為指定顏色空間中的等效顏色（如果尚未指定）。顏色被定義為三個不同的顏色通道值加上一個 alpha 通道值 (alpha)。這些通道值在函式內部可用，用於定義輸出顏色通道值。

原始顏色的三個顏色通道值被解析為 <number>。對於預定義顏色空間，根據指定的顏色空間，這些值將是以下之一：
- r、g 和 b：基於 RGB 的顏色空間 srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb 和 rec2020 的顏色通道值。
- x、y 和 z：基於 CIE XYZ 的顏色空間 xyz、xyz-d50 和 xyz-d65 的顏色通道值。
  
  注意：每個值通常在 0 到 1 之間，但如上所述，它們可能超出這些界限。
  
  注意：在帶有基於 XYZ 顏色空間的 color() 函式中引用 r、g 和 b 值，在帶有基於 RGB 顏色空間的 color() 函式中引用 x、y 和 z 值，或引用任何其他字元都是無效的。函式內部可用的原始顏色通道值必須與指定的顏色空間型別匹配。
alpha：顏色的透明度值，解析為介於 0 和 1（包括 0 和 1）之間的 <number>。

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

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

讓我們從原始顏色 hsl(0 100% 50%)（等同於 red）開始。雖然你不太可能編寫以下函式，因為它們輸出與原始顏色相同的顏色，但這演示瞭如何將原始顏色通道值用作輸出通道值：

css

color(from hsl(0 100% 50%) srgb r g b)
color(from hsl(0 100% 50%) xyz x y z)

這些函式的輸出顏色分別為 color(srgb 1 0 0) 和 color(xyz-d65 0.412426 0.212648 0.0193173)。

接下來的函式對輸出顏色通道值使用絕對值，輸出與原始顏色完全不同的顏色：

css

color(from hsl(0 100% 50%) srgb 0.749938 0 0.609579)
/* Computed output color: color(srgb 0.749938 0 0.609579) */

color(from hsl(0 100% 50%) xyz 0.75 0.6554 0.1)
/* Computed output color: color(xyz-d65 0.75 0.6554 0.1 */

以下函式對輸出顏色通道值使用兩個原始顏色通道值（分別為 r 和 b，以及 x 和 y），但對另一個輸出通道值（分別為 g 和 z）使用新值，從而在每種情況下建立基於原始顏色的相對顏色：

css

color(from hsl(0 100% 50%) srgb r 1 b)
/* Computed output color: color(srgb 1 1 0) */

color(from hsl(0 100% 50%) xyz x y 0.5)
/* Computed output color: color(xyz-d65 0.412426 0.212648 0.5) */

注意：如上所述，如果輸出顏色使用的顏色模型與原始顏色不同，則原始顏色會在後臺轉換為與輸出顏色相同的模型，以便以相容的方式表示（即使用相同的通道）。例如，在上述第一個例子中，hsl() 顏色 hsl(0 100% 50%) 轉換為 color(srgb 1 0 0)，在第二個例子中轉換為 color(xyz 0.412426 0.212648 0.5)。

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

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

css

color(from hsl(0 100% 50% / 0.8) srgb r g b / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

color(from hsl(0 100% 50% / 0.8) xyz x y z / 0.5)
/* Computed output color: color(xyz-d65 0.412426 0.212648 0.0193173 / 0.5) */

以下示例使用 calc() 函式計算輸出顏色的新通道值，這些值相對於原始顏色通道值：

css

color(from hsl(0 100% 50%) srgb calc(r - 0.4) calc(g + 0.1) calc(b + 0.6) / calc(alpha - 0.1))
/* Computed output color: color(srgb 0.6 0.1 0.6 / 0.9)  */

color(from hsl(0 100% 50%) xyz calc(x - 0.3) calc(y + 0.3) calc(z + 0.3) / calc(alpha - 0.1))
/* Computed output color: color(xyz-d65 0.112426 0.512648 0.319317 / 0.9) */

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

正式語法

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<colorspace-params> = 
  <custom-params>          |
  <predefined-rgb-params>  |
  <xyz-params>             

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

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+  

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}  

<predefined-rgb> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  rec2100-pq         |
  rec2100-hlg        |
  rec2100-linear     

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

示例

在 color() 中使用預定義顏色空間

以下示例展示了改變 color() 函式的亮度、a 軸和 b 軸值所產生的效果。

HTML

html

<div data-color="red-a98-rgb"></div>
<div data-color="red-prophoto-rgb"></div>
<div data-color="green-srgb-linear"></div>
<div data-color="green-display-p3"></div>
<div data-color="blue-rec2020"></div>
<div data-color="blue-srgb"></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

css

[data-color="red-a98-rgb"] {
  background-color: color(a98-rgb 1 0 0);
}
[data-color="red-prophoto-rgb"] {
  background-color: color(prophoto-rgb 1 0 0);
}
[data-color="green-srgb-linear"] {
  background-color: color(srgb-linear 0 1 0);
}
[data-color="green-display-p3"] {
  background-color: color(display-p3 0 1 0);
}
[data-color="blue-rec2020"] {
  background-color: color(rec2020 0 0 1);
}
[data-color="blue-srgb"] {
  background-color: color(srgb 0 0 1);
}

結果

在 color() 中使用 xyz 顏色空間

以下示例展示瞭如何使用 xyz 顏色空間來指定顏色。

HTML

html

<div data-color="red"></div>
<div data-color="green"></div>
<div data-color="blue"></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

css

[data-color="red"] {
  background-color: color(xyz 45 20 0);
}

[data-color="green"] {
  background-color: color(xyz-d50 0.3 80 0.3);
}

[data-color="blue"] {
  background-color: color(xyz-d65 5 0 50);
}

結果

在 color() 中使用 color-gamut 媒體查詢

此示例展示瞭如何使用 color-gamut 媒體查詢來檢測對特定顏色空間的支援，並使用該顏色空間來指定顏色。

HTML

html

<div></div>
<div></div>
<div></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

css

@media (color-gamut: p3) {
  div {
    background-color: color(display-p3 1 0 0);
  }
}

@media (color-gamut: srgb) {
  div:nth-child(2) {
    background-color: color(srgb 1 0 0);
  }
}

@media (color-gamut: rec2020) {
  div:nth-child(3) {
    background-color: color(rec2020 1 0 0);
  }
}

結果

在 color() 中使用相對顏色

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

這些變體使用相對顏色定義 — --base-color 自定義屬性被傳遞給 color() 函式，並且輸出顏色的 g 和 b 通道透過 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: color(
    from var(--base-color) display-p3 r calc(g + 0.15) calc(b + 0.15)
  );
}

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

#three {
  background-color: color(
    from var(--base-color) display-p3 r calc(g - 0.15) calc(b - 0.15)
  );
}

/* Use @supports to add in support old syntax that requires r g b values
   to be specified as percentages (with units) in calculations.
   This is required for Safari 16.4+ */
@supports (color: color(from red display-p3 r g calc(b + 30%))) {
  #one {
    background-color: color(
      from var(--base-color) display-p3 r calc(g + 15%) calc(b + 15%)
    );
  }

  #three {
    background-color: color(
      from var(--base-color) display-p3 r calc(g - 15%) calc(b - 15%)
    );
  }
}

結果

輸出如下：

規範

規範
CSS 顏色模組第五版 # 顏色函式
CSS 顏色模組第五版 # 相對顏色函式
CSS 顏色模組第四版 # 顏色函式

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 9 月 21 日，由 MDN 貢獻者修訂。

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