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」窗格中的樣式旁建立混合內容的預覽畫面,並允許選擇替代顏色。
開發人員工具中看起來會像這樣:
祝你混亂!