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。在下列示範中，兩種鮮豔的顏色 (洋紅色和萊姆) 混合搭配 hsl 和 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」窗格中的樣式旁建立混合內容的預覽畫面，並允許選擇替代顏色。
開發人員工具中看起來會像這樣：
祝你混亂！