CSS color-mix() 函式可讓您直接從 CSS 中，使用任何支援的色彩空間混合色彩。
在 color-mix() 之前，如要調暗、調亮或降低顏色，開發人員會在色彩管道上使用 CSS 預先處理工具或 calc()。
.color-mixing-with-sass {
/* Sass: equally mix red with white */
--red-white-mix: color.mix(red, white);
}
Sass 在色彩 CSS 規格之前已做得很好。然而，在 CSS 中混合顏色並沒有真正的方法。如要縮小結果，您必須計算部分色彩值。以下提供 CSS 目前模擬混合情形的範例：
.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);
帶來莫大影響！
以 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);
使用 color-mix() 瞭解色域效果，是製作漸層的絕佳知識。顏色 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。在以下示範中，兩種鮮豔的顏色 (洋紅色和萊姆) 混合在一起，且纖細和 Hwb 同時會產生鮮豔的結果，srgb 和 oklab 則會產生不飽和的色彩。
如果要維持一致性與巧妙性，請使用 oklab。在以下的示範中，混合藍色和黑色、hsl 和 hwb 會產生過度鮮豔且色調轉化的顏色，而 srgb 和 oklab 則會產生較深的藍色。
您花五分鐘使用 color-mix() Playground，並測試不同的顏色和空間，您將會開始瞭解每個空間的優勢。此外，當所有人都根據它們在使用者介面中的潛在需求進行調整時，我們也會提供更多色域相關指引。
調整色調內插方法
如果您選擇混用圓柱色空間 (基本上就是任何包含可接受角度的 h 色調管道的色彩空間)，您可以指定內插值是 shorter、longer、decreasing 和 increasing。如要進一步瞭解相關資訊，請參閱這份 HD 色彩指南。
以下示範的藍色與白色混音範例相同，但這次僅位於有不同色調內插方法的圓柱空間中。
這是我製作的另一個 Codepen，能夠以視覺化方式呈現色調內插類型，特別是漸層。我相信這將有助於您瞭解指定色調內插時每種色域所產生的混合結果，請進行研究！
混用不同色彩語法
目前我們大多混合使用 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 區塊中。
更多有趣的用途
Ana Tudor 針對以下研究用途提供絕佳示範：
使用開發人員工具對 color-mix() 進行偵錯
Chrome 開發人員工具為 color-mix() 提供完善的支援。這項功能可辨識並醒目顯示語法，在「Styles」窗格中的樣式旁邊建立混合預覽，並可選擇其他顏色。
在開發人員工具中看起來會像這樣：
盡情享受混音吧！