感謝觀看 Google I/O 大會！立即觀賞隨選內容。

本頁面由 Cloud Translation API 翻譯而成。

CSS color-mix()

Adam Argyle

CSS color-mix() 函式可讓您直接在 CSS 中混用任何支援的色域。

瀏覽器支援

資料來源

在 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。在下列項目中示範，兩種鮮豔的顏色 (洋紅色和檸檬) 結合在一起，同時有 HD 和 hwb 兩者都會產生鮮豔的成果，srgb 和 oklab 則會產生不飽和的色彩。

如要維持一致性和細微，請使用 oklab。在下列範例中藍色和黑色、水管和雙翼機製成，色彩鮮豔、色調轉折 srgb 和 oklab 會產生較深的藍色。

花五分鐘使用 color-mix() Playground，測試不同顏色開始體會這些空間的優勢。其他大家都會適應調整發掘更多潛在功能

調整色調內插方法

如果選擇混用圓柱型色彩空間，基本上就是所有顏色空間 (具有接受角度的 h 色調管道)，您可以指定是否內插類型為 shorter、longer、decreasing 和 increasing。這是請參閱 HD 高畫質指南一文，瞭解更多相關資訊。

注意：如果色域為圓柱狀，color-mix() Playground 會新增額外的選取下拉式選單。你可以在這裡演奏，看看這個混音效果如何。

這是一個藍到白混的範例，具有不同色調內插方式的圓柱空間。

接下來是我為了呈現色調內插法而製作的另一個 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%我們再舉幾個例子說明這一點行為

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() 提供了完善的支援。AI 可辨識並醒目顯示語法，並在「Styles」窗格可讓您選擇替代顏色。

開發人員工具中的程式碼如下所示：

Chrome 開發人員工具檢查顏色混合語法的螢幕截圖。

祝你們這些混音愉快！

CSS color-mix()

在 CSS 中混用顏色

各式各樣的色彩空間

調整色調內插方法

混用各種顏色語法

調整混合比例

建立巢狀 color-mix()

建立淺色和深色的色彩配置

基本色彩配置

中間色配置

更多有趣的應用實例

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

建立巢狀 `color-mix()`