Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

CSS color-mix()

Adam Argyle

CSS color-mix() 函式可讓您直接在 CSS 中混合顏色，並支援任何色域。

Browser Support

在 color-mix() 推出前，開發人員會使用 CSS 預處理器或色彩管道上的 calc()，將顏色調暗、調亮或降低飽和度。

使用 SCSS 前

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass 在色彩 CSS 規格方面表現出色。不過，CSS 中一直沒有真正混合顏色的方法。如要取得接近的顏色，您需要計算部分顏色值。以下是 CSS 模擬混合效果的簡化範例：

使用 HSL 前

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() 可在 CSS 中混合顏色。開發人員可以選擇要混合的色域，以及各顏色在混合中的主導程度。

晚於

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

這就是我們想要的。靈活、強大且功能完整的 API。我喜歡！

在 CSS 中混合顏色

CSS 存在於多個色彩空間和色域世界，因此指定混合的色彩空間並非選用。此外，不同的色域可能會大幅改變混色結果，因此瞭解色域的影響，有助於取得所需結果。

如需互動式簡介，請試用這個 color-mix() 工具： - 探索各色域的效果。 - 探索在圓柱色域 (lch、oklch、hsl 和 hwb) 中混合時，色相內插的效果。 - 按一下頂端的任一色塊，即可變更混合的顏色。 - 使用滑桿變更混合比例。 - 生成的 color-mix() CSS 程式碼會顯示在底部。

在各種色域中混合

混合 (和漸層) 的預設色域為 oklab。可提供一致的結果。您也可以指定替代色域，根據需求調整混合效果。

以 black 和 white 為例，混合的色域不會造成太大差異，對吧？不是，

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);

7 個色域 (srgb、linear-srgb、lch、oklch、lab、oklab、xyz) 分別顯示黑白混合的結果。畫面上會顯示大約 5 種不同的色調，表示每個色域甚至會以不同方式混合成灰色。 — 試用示範

這確實會帶來很大的影響！

再以 blue 和 white 為例，我之所以選擇這個例子，是因為色域形狀會影響結果。在本例中，大多數色域在從白色轉換為藍色時，都會變成紫色。這也顯示 oklab 是非常可靠的混色色域，最接近大多數人對混合白色和藍色 (不含紫色) 的預期。

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

7 個色域 (srgb、linear-srgb、lch、oklch、lab、oklab、xyz) 分別顯示不同結果。許多都是粉紅色或紫色，只有少數仍是藍色。 — 體驗功能

瞭解色彩空間的影響color-mix()是製作漸層的絕佳知識。Color 4 語法也允許漸層指定色域，其中漸層會顯示某個空間區域的混合。

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

如果你想知道哪種色域「最好」，答案是沒有。因此我們提供多種選項！如果有一種「最佳」色彩空間，就不會再有新的色彩空間發明出來 (請參閱 oklch 和 oklab)。每個色域都有其獨特的優勢，在特定情況下會是最佳選擇。

舉例來說，如要混合出鮮豔的色彩，請使用 hsl 或 hwb。在下列示範中，我們將兩種鮮豔的顏色 (洋紅色和萊姆色) 混合在一起，hsl 和 hwb 都會產生鮮豔的結果，而 srgb 和 oklab 則會產生不飽和的顏色。

如要保持一致性並呈現細微差異，請使用 oklab。在以下混合藍色和黑色的示範中，hsl 和 hwb 會產生過於鮮豔和色調偏移的顏色，而 srgb 和 oklab 則會產生較深的藍色。

花五分鐘使用color-mix()遊樂區，測試不同顏色和空間，就能開始瞭解各空間的優點。此外，隨著我們在使用者介面中調整色域的潛力，預計也會提供更多相關指引。

調整色調內插法

如果您選擇在圓柱色域中混合，基本上任何具有接受角度的 h 色相通道的色域，都可以指定內插是否為 shorter、longer、decreasing 和 increasing。如要瞭解詳情，請參閱這份 HD 色彩指南。

注意：如果色域為圓柱形，color-mix() 測試環境會新增一個選取下拉式選單。你可以在這裡播放，查看混音效果。

以下是相同的藍白混合範例，但這次只在圓柱空間中，使用不同的色相內插方法。

以下是我製作的另一個 Codepen，可協助以視覺化方式呈現色相內插，但特別適用於漸層。相信這有助於你瞭解，在指定色相內插時，各色域如何產生混合結果，請務必研究一下！

警告：為非圓柱色域提供色相內插方法，在 color-mix() 中會發生語法錯誤。

使用不同顏色語法混色

到目前為止，我們大多混合使用 CSS 命名顏色，例如 blue 和 white。CSS 顏色混合功能可混合來自兩種不同色域的顏色。這也是指定混合色彩的色域非常重要的另一個原因，因為如果兩種色彩不在同一個空間中，這項設定就會決定共同空間。

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

在上例中，hsl 和 display-p3 會轉換為 oklch，然後混合。這項功能很酷，而且很有彈性。

調整混合比例

您不太可能每次混合時，都想要每種顏色各占相同比例，就像目前為止的大多數範例所示。好消息是，有一種語法可以明確指出混合結果中每種顏色的比例。

首先，以下是等效的混合範例 (來自規格)：

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

我覺得這些例子能清楚說明極端情況。第一組範例顯示 50% 並非必要，但可以選擇指定。最後一個範例顯示一個有趣的情況：當比率相加超過 100% 時，系統會平均分配，使總和為 100%。

另請注意，如果只有一種顏色指定比例，系統會假設另一種顏色為剩餘的 100%。以下提供更多範例，協助您瞭解這項行為。

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

這些範例說明瞭兩項規則： 1. 如果比例超過 100%，系統會限制並平均分配。 1. 如果只提供一個比例，另一個顏色會設為 100 減去該比例。

最後一項規則較不明顯：如果兩種顏色都提供百分比，但加起來不等於 100%，會發生什麼情況？

color-mix(in lch, purple 20%, plum 20%)

這種 color-mix() 組合會產生透明度，40% 透明度。如果比例總和不等於 100%，則產生的混合顏色不會是不透明。兩種顏色都不會完全混合。

巢狀結構 `color-mix()`

與所有 CSS 一樣，巢狀結構會妥善處理，並符合預期；內部函式會先解析，並將值傳回父項結構定義。

color-mix(in lch, purple 40%, color-mix(plum, white))

請視需要盡量巢狀化，以取得您要的結果。

建構淺色和深色色彩配置

使用 color-mix() 建立色彩配置！

基本色彩配置

在下列 CSS 中，系統會根據品牌十六進位顏色建立淺色和深色主題。淺色主題會建立兩種深藍色文字顏色，以及非常淺的白色背景途徑顏色。接著，在深色偏好設定媒體查詢中，自訂屬性會指派新顏色，因此背景為深色，文字顏色為淺色。

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

只要在品牌顏色中加入白色或黑色，就能達到上述效果。

中級色彩配置

您可以進一步新增淺色和深色以外的主題。在以下示範中，變更圓形按鈕群組會更新 HTML 標記 [color-scheme="auto"] 的屬性，讓選取器能依條件套用色彩主題。

這個中級示範也展示了色彩主題設定技術，其中所有主題色彩都列在 :root 中。這樣一來，您就能輕鬆查看所有設定，並視需要調整。在樣式表後續部分，您可以使用已定義的變數。這樣就不必在樣式表搜尋顏色操控，因為這些操控都包含在初始 :root 區塊中。

使用開發人員工具偵錯 color-mix()

Chrome 開發人員工具對 color-mix() 的支援相當完善。它會辨識並醒目顯示語法，在「Styles」窗格中樣式旁邊建立混合預覽，並允許挑選替代顏色。

在開發人員工具中，看起來會像這樣：

Chrome 開發人員工具檢查 color-mix 語法。

祝大家混音愉快！

CSS color-mix() 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

在 CSS 中混合顏色

在各種色域中混合

調整色調內插法

使用不同顏色語法混色

調整混合比例

巢狀結構 color-mix()

建構淺色和深色色彩配置

基本色彩配置

中級色彩配置

更多有趣的用途

使用開發人員工具偵錯 color-mix()

CSS color-mix()

巢狀結構 `color-mix()`