color-mix()

Baseline 2023

新推出

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

color-mix() 函式式表示法接收兩個 <color> 值，並返回按給定數量在給定色彩空間中混合它們的結果。

語法

css

/* Polar color space */
color-mix(in hsl, hsl(200 50 80), coral)
color-mix(in hsl, hsl(200 50 80) 20%, coral 80%)

/* Rectangular color space */
color-mix(in srgb, plum, #123456)
color-mix(in lab, plum 60%, #123456 50%)

/* With hue interpolation method */
color-mix(in lch increasing hue, hsl(200deg 50% 80%), coral)
color-mix(in lch longer hue, hsl(200deg 50% 80%) 44%, coral 16%)

引數

color-mix( <color-interpolation-method>, <color> [<percentage>], <color> [<percentage>] ) 接受以下引數：

<color-interpolation-method>: 指定混合顏色時應使用的插值方法。它由 in 關鍵字和一個色彩空間（形式化語法中列出的色彩空間之一）組成，並且可以選擇性地包含一個 <hue-interpolation-method>。
<color>: 要混合的顏色；可以是任何有效的 <color> 值。
<percentage> 可選: 一個百分比值，指定要混合的相應顏色的量；可以是 0% 到 100%（含）之間的任何 <percentage> 值。

返回值

一個 <color>；在給定的 <color-space> 中，按指定的量和色相方向混合顏色的結果。

描述

color-mix() 函式可以在給定的色彩空間中，使用更短或更長的色相插值方法，將任意型別的兩個 <color> 值按特定比例混合。瀏覽器支援多種色彩空間；color-mix() 函式可以混合多種顏色，不侷限於 sRGB 色彩空間。

這個演示允許你選擇兩種顏色，color-one 和 color-two，然後將它們混合，還可以選擇性地設定每種顏色的百分比、混合顏色的色彩空間以及插值方法。源顏色顯示在外部，混合後的顏色顯示在中間。你可以透過點選顏色，然後使用彈出的顏色選擇器來更改顏色。使用滑塊更改每種顏色的百分比值。透過下拉選單更改色彩空間。

選擇色彩空間

選擇正確的色彩空間對於產生預期的結果很重要。對於相同的待混合顏色，不同的色彩空間可能更適合不同的插值用例。

如果希望得到物理上混合兩種色光的結果，那麼 CIE XYZ 或 srgb-linear 色彩空間是合適的，因為它們在光強度上是線性的。
如果顏色需要感知上均勻分佈（例如在漸變中），那麼 Oklab（以及較早的 Lab）色彩空間是合適的，因為它們被設計為感知上均勻的。
如果希望在顏色混合中避免變灰，即在整個過渡過程中最大化色度，那麼 Oklch（以及較早的 LCH）色彩空間效果很好。
只有當你需要匹配使用 sRGB 的特定裝置或軟體的行為時，才使用 sRGB。sRGB 色彩空間既不是線性光也不是感知上均勻的，並且會產生較差的結果，例如過度暗淡或灰暗的混合色。

顏色插值方法

<color-interpolation-method> 指定混合顏色時應使用的插值方法。它由 in 關鍵字和顏色應在其中混合的色彩空間組成。色彩空間必須是形式化語法中列出的可用色彩空間之一。根據所使用的色彩空間，你可以選擇性地指定色相沿更長或更短的路徑混合。

<rectangular-color-space> 類別包括 srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、lab、oklab、xyz、xyz-d50 和 xyz-d65。

<polar-color-space> 類別包括 hsl、hwb、lch 和 oklch。對於這些，你可以在色彩空間名稱後選擇性地跟隨一個 <hue-interpolation-method>。該值預設為 shorter hue，但也可以設定為 longer hue、increasing hue 或 decreasing hue。

顏色百分比

兩種顏色中的每一種都可以宣告一個介於 0% 和 100% 之間的 <percentage> 值，用於指定要混合的相應顏色的量。如果宣告的百分比總和不等於 100%，則會對百分比進行規範化處理。

兩種顏色的百分比（我們稱之為 p1 和 p2）的規範化規則如下：

如果 p1 和 p2 都被省略，那麼 p1 = p2 = 50%。
如果省略 p1，那麼 p1 = 100% - p2。
如果省略 p2，那麼 p2 = 100% - p1。
如果 p1 = p2 = 0%，則函式無效。
如果 p1 + p2 ≠ 100%，那麼 p1' = p1 / (p1 + p2) 並且 p2' = p2 / (p1 + p2)，其中 p1' 和 p2' 是規範化後的結果。
- 如果 p1 + p2 < 100%，則會將一個 p1 + p2 的 alpha 乘數應用於結果顏色。這類似於混入 transparent，其百分比為 pt = 100% - p1 - p2。

正式語法

<color-mix()> = 
  color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]# )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

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

示例

混合兩種顏色

此示例演示了混合兩種顏色，紅色 #a71e14（以不同百分比）和白色（未指定百分比）。混合的 #a71e14 的百分比越高，輸出的顏色就越紅，白色就越少。

HTML

html

<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

CSS

color-mix() 函式用於增加紅色的百分比，直到 100%。第 6 個 <li> 沒有為任何一種顏色指定百分比。

ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  border: 2px solid;
  padding: 10px;
}

li {
  padding: 10px;
  flex: 1;
  box-sizing: border-box;
  font-family: monospace;
  outline: 3px solid #a71e14;
  text-align: center;
}

css

li:nth-child(1) {
  background-color: color-mix(in oklab, #a71e14 0%, white);
}

li:nth-child(2) {
  background-color: color-mix(in oklab, #a71e14 25%, white);
}

li:nth-child(3) {
  background-color: color-mix(in oklab, #a71e14 50%, white);
}

li:nth-child(4) {
  background-color: color-mix(in oklab, #a71e14 75%, white);
}

li:nth-child(5) {
  background-color: color-mix(in oklab, #a71e14 100%, white);
}

li:nth-child(6) {
  background-color: color-mix(in oklab, #a71e14, white);
}

結果

在 color-mix() 函式中，兩種顏色的總值為 100%，即使開發者設定的值總和不為 100%。在此示例中，由於只有一種顏色被分配了百分比，另一種顏色被隱式地賦予了一個百分比值，以使總和等於 100%。在最後一個 <li> 中，兩種顏色都未分配百分比，因此它們都預設為 50%。

增加透明度

此示例演示瞭如何使用 color-mix() 函式透過將任何顏色與 transparent 混合來為顏色增加透明度。

HTML

html

<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

CSS

color-mix() 函式用於增加 red 的百分比，該顏色使用在 :root 上定義的名為 --base 的自定義屬性宣告。第 6 個 <li> 未包含百分比，建立了一個不透明度為 --base 顏色一半的輸出顏色。我們在 <ul> 上添加了條紋背景，以使透明度可見。

ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  border: 2px solid;
  padding: 10px;
}

li {
  padding: 10px;
  flex: 1;
  box-sizing: border-box;
  font-family: monospace;
  outline: 1px solid var(--base);
  text-align: center;
}

css

:root {
  --base: red;
}

ul {
  background: repeating-linear-gradient(
    45deg,
    chocolate 0px 2px,
    white 2px 12px
  );
}

li:nth-child(1) {
  background-color: color-mix(in srgb, var(--base) 0%, transparent);
}

li:nth-child(2) {
  background-color: color-mix(in srgb, var(--base) 25%, transparent);
}

li:nth-child(3) {
  background-color: color-mix(in srgb, var(--base) 50%, transparent);
}

li:nth-child(4) {
  background-color: color-mix(in srgb, var(--base) 75%, transparent);
}

li:nth-child(5) {
  background-color: color-mix(in srgb, var(--base) 100%, transparent);
}

li:nth-child(6) {
  background-color: color-mix(in srgb, var(--base), transparent);
}

結果

透過這種方式，color-mix() 函式可以用於為任何顏色增加透明度，即使該顏色本身已經是不完全不透明的（alpha 通道值小於 1）。但是，color-mix() 不能用於使半透明顏色完全不透明。為此，請使用帶有 CSS 顏色函式的相對顏色。相對顏色可以改變任何顏色通道的值，包括增加顏色的 alpha 通道以使顏色完全不透明。

在 color-mix() 中使用色相插值

此示例演示了 color-mix() 函式可用的色相插值方法。當使用色相插值時，結果的色相介於被混合的兩種顏色的色相值之間。根據在色輪上所選的路徑，該值會有所不同。

更多資訊，請參閱 <hue-interpolation-method>。

<p>longer</p>
<ul>
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>
<p>shorter</p>
<ul>
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>
<p>increasing</p>
<ul>
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>
<p>decreasing</p>
<ul>
  <li>100%</li>
  <li>80%</li>
  <li>60%</li>
  <li>40%</li>
  <li>20%</li>
  <li>0%</li>
</ul>

CSS

shorter hue 插值方法沿色輪走較短的路徑，而 longer hue 插值方法則走較長的路徑。使用 increasing hue 時，路徑從增加的值開始。使用 decreasing hue 時，值會減少。我們混合兩種 <named-color> 值來建立一系列 lch() 中間色，這些顏色根據在色輪上所選的路徑而不同。混合的顏色包括 red、blue 和 yellow，其 LCH 色相值分別約為 41deg、301deg 和 100deg。

為了減少程式碼冗餘，我們對顏色和插值方法都使用了 CSS 自定義屬性，並在每個 <ul> 上設定了不同的值。

body {
  font-family: monospace;
}
ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  padding: 10px;
  margin: 0;
}

li {
  padding: 10px;
  flex: 1;
  outline: 1px solid var(--base);
  text-align: center;
}

css

ul:nth-of-type(1) {
  --distance: longer; /* 52 degree hue increments */
  --base: red;
  --mixin: blue;
}
ul:nth-of-type(2) {
  /* 20 degree hue decrements */
  --distance: shorter;
  --base: red;
  --mixin: blue;
}
ul:nth-of-type(3) {
  /* 40 degree hue increments */
  --distance: increasing;
  --base: yellow;
  --mixin: blue;
}
ul:nth-of-type(4) {
  /* 32 degree hue decrements */
  --distance: decreasing;
  --base: yellow;
  --mixin: blue;
}

li:nth-child(1) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 100%,
    var(--mixin)
  );
}

li:nth-child(2) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 80%,
    var(--mixin)
  );
}

li:nth-child(3) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 60%,
    var(--mixin)
  );
}

li:nth-child(4) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 40%,
    var(--mixin)
  );
}

li:nth-child(5) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 20%,
    var(--mixin)
  );
}

li:nth-child(6) {
  background-color: color-mix(
    in lch var(--distance) hue,
    var(--base) 0%,
    var(--mixin)
  );
}

結果

使用 longer hue 時，顏色之間的增量或減量將總是等於或大於使用 shorter hue 時的值。當色相值變化的方向比值之間的距離更重要時，請使用 increasing hue 或 decreasing hue。

規範

規範
CSS 顏色模組第五版 # color-mix

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

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

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