今天來(lái)介紹一下 Chrome 111+正式推出的 CSS顏色混合函數(shù)：color-mix()[1]。

所謂顏色混合，顧名思義，就是將兩種顏色按照一定的比例混合起來(lái)，和調(diào)色板比較像。到目前為止，可以說(shuō)是最強(qiáng)大、最實(shí)用的 CSS 顏色處理函數(shù)了，有了它，再也不需要用LESS、SASS等預(yù)處理工具了，還可以實(shí)現(xiàn)顏色動(dòng)態(tài)更新，一起了解一下吧。

一、color-mix語(yǔ)法

首先來(lái)看語(yǔ)法，比較簡(jiǎn)單。

color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);

通用語(yǔ)法寫作。

color-mix(method, color1[ p1], color2[ p2])

主要由 3 部分組成，分別是插值顏色法(method，這里只介紹顏色空間)、基礎(chǔ)顏色（color1）和混合顏色（color2），示意如下：

顏色空間是一個(gè)很復(fù)雜的概念，這里不做介紹，只需要知道用法就行。

• 矩形顏色空間。srgb、srgb-linear、lab、oklab、xyz、xyz-d50、xyz-d65。
• 極性顏色空間 。hsl、hwb、lch、oklch。

以紅色和白色混合為例。

color-mix(in srgb, red, white);

下面是實(shí)際混合效果：

可以看到，混合后的顏色介于紅色和白色的中間，相當(dāng)于把之前的顏色減淡了。

再比如，紅色和黃色混合，可以得到橙色。

color-mix(in srgb, red, yellow);

效果如下：

這是如何混合的呢，很簡(jiǎn)單，以rgb為例，其實(shí)就是將對(duì)應(yīng)的值取平均數(shù)。

R = (r1 + r2)/ 2
G = (g1 + g2)/ 2
B = (b1 + b2)/ 2

比如紅色是rgb(255,0,0)，黃色是rgb(255,255,0)，計(jì)算如下：

R = (255 + 255)/ 2 = 255
G = (0 + 255)/ 2 = 127.5
B = (0 + 0)/ 2 = 0

所以混合的顏色就是rgb(255,127.5,0)，也就是橙色。

你也可以在下面的 demo 中自行調(diào)整顏色體驗(yàn)。

• CSS color-mix (codepen.io)^[2]
• CSS color-mix (juejin.cn)^[3]
• CSS color-mix (runjs.work)^[4]

這應(yīng)該就是顏色混合最直觀的認(rèn)識(shí)了。

二、 color-mix 混合比例

當(dāng)然，這只是最簡(jiǎn)單的情況。在上面的語(yǔ)法中，還可以給顏色設(shè)置混合比例，也就是前面語(yǔ)法中的p1和p2。

color-mix(method, color1[ p1], color2[ p2])

由于 CSS 強(qiáng)大的“包容”性，對(duì)各種情況都做了兼容，主要分為以下幾種情況。

1. 如果 和p1都p2被省略，則p1 = p2 = 50%。
2. 如果p1省略，則p1 = 100% - p2。
3. 如果p2省略，則p2 = 100% - p1。
4. 如果p1 = p2 = 0%，則該函數(shù)無(wú)效。
5. 如果p1 + p2 ≠ 100%，則p1' = p1 / (p1 + p2)和p2' = p2 / (p1 + p2)，其中p1'和p2'是歸一化結(jié)果。

前面 4 種情況都比較好理解，就是互相補(bǔ)全，另外注意，這兩個(gè)值都位于0%~100%，超出范圍者直接不合法。

下面來(lái)看最后一種情況，也就是兩者相加不等于100%的情況。

這里其實(shí)也要分兩種，首先是p1+p2>100%的情況，比如。

color-mix(in srgb, red 100%, white 100%);

這種混合應(yīng)該怎么計(jì)算呢？

首先還是按照上面的計(jì)算規(guī)則，算出兩者的比例關(guān)系

p1' = p1 / (p1 + p2) = 100% / (100% + 100%) = 0.5
p2' = p1 / (p1 + p2) = 100% / (100% + 100%) = 0.5

也就是兩者是1:1混合的，在超過(guò)100%的情況下，仍然按照100%進(jìn)行分配，也就是等同于。

color-mix(in srgb, red 100%, white 100%);
/* 等同于 */
color-mix(in srgb, red 50%, white 50%);

效果如下：

同理，這種情況下也是等同的，因?yàn)槎际?nbsp;4:1。

color-mix(in srgb, red 100%, white 25%);
/* 等同于 */
color-mix(in srgb, red 80%, white 20%);

效果如下：

所以，在兩者相加大于100%的情況下，可以先計(jì)算兩者的比例，然后再用100%按比例分配即可。

然后是p1+p2<100%的情況。

起初，我以為也是相同的處理方式，其實(shí)不然。以下面這個(gè)為例。

color-mix(in srgb, red 20%, white 20%);
/* 等同于? */
color-mix(in srgb, red 50%, white 50%);

混合比例其實(shí)都是1:1，最后這兩者結(jié)果會(huì)相同嗎？可以先看結(jié)果。

可以明顯看到，下面的混合結(jié)果顏色跟淡一些。為什么呢，其實(shí)可以從最終的混合顏色看出原因，這里直接通過(guò)控制臺(tái)來(lái)得到計(jì)算顏色，如下：

兩個(gè)實(shí)色混合出來(lái)居然有了透明度！

這個(gè)透明度怎么來(lái)的呢？其實(shí)就是由于兩者混合相加不足100%，剛才這個(gè)例子，兩者相加20%+20%=40%，所以最終的混合出現(xiàn)了0.4的透明度。

我們?cè)贀Q個(gè)例子。

color-mix(in srgb, red 40%, white 10%);
/*等同于*/
color-mix(in srgb, red 80%, white 20%); /* 50%透明度 */

效果如下：

從控制臺(tái)可以看到，剛好就是50%的透明度。

因此，在兩者相加小于100%的情況下，可以先計(jì)算兩者的比例，然后再按比例分配，最后再疊加上透明度。這樣看來(lái)，其實(shí)大于100%的情況也可以理解為疊加了一個(gè)大于1的透明度，只不過(guò)最后解析成了1。

三、color-mix 實(shí)際應(yīng)用

使用color-mix可以很方便的根據(jù)主題色生成與之相對(duì)應(yīng)的鄰近色，例如：

:root{
  --primary-color: #ffeb3b;
  --primary-secondary-1: color-mix(in srgb, var(--primary-color), #fff 20%);
  --primary-secondary-2: color-mix(in srgb, var(--primary-color), #fff 40%);
  --primary-secondary-3: color-mix(in srgb, var(--primary-color), #fff 60%);
  --primary-secondary-4: color-mix(in srgb, var(--primary-color), #fff 80%);
}

效果如下：

這樣在實(shí)現(xiàn)一些跟隨主題色變化的按鈕就非常方便了。

button{
  color: var(--primary-color);
  background-color: var(--primary-secondary-4);
  outline: 4px solid var(--primary-secondary-4);
}

效果如下：

這些技巧在之前這些文章中都有介紹，還提供了其他解決方案，如果不考慮兼容性，color-mix無(wú)疑是最方便的。

• 妙用 CSS 動(dòng)畫來(lái)實(shí)現(xiàn)顏色加深、減淡等混合操作^[5]
• CSS 顏色混合的N種方式^[6]

四、兼容性和回退措施

兼容性文章開(kāi)頭就有提到，完整兼容性如下：

現(xiàn)在主流瀏覽器已經(jīng)全部兼容了，放心學(xué)習(xí)吧。

不過(guò)實(shí)際工作中，還需要做好回退措施，如果瀏覽器不兼容怎么辦？有些同學(xué)可能會(huì)想到用 CSS 變量來(lái)做回退處理，如下：

div{
  --bg: color-mix(in srgb, red, blue);
 background: var(--bg, var(--fallback-color));
}

很可惜，這種方式并不可取。原因在于，CSS 變量只有在未定義時(shí)，才會(huì)走后面的回退值。這種情況下，仍然取前面的值，從而導(dǎo)致顏色失效。

正確的做法是使用CSS supports進(jìn)行判斷。

:root{
  --bg: orange
}

@supports (color:color-mix(in srgb,red,blue)) {
  --bg: color-mix(in srgb, red, blue);
}

這樣，在不支持的瀏覽器中也能使用一個(gè)還能接受的回退值，只是不能動(dòng)態(tài)去混合了。

五、總結(jié)一下

以上就是本文的全部?jī)?nèi)容了，相信你會(huì)對(duì)顏色混合有更深刻的理解，下面總結(jié)一下。

1. color-mix其實(shí)就是將兩種顏色按照一定的比例混合起來(lái)，和調(diào)色板比較像。
2. 語(yǔ)法很簡(jiǎn)單，只有3個(gè)參數(shù)，分別是插值顏色法(method)、基礎(chǔ)顏色（color1）和混合顏色（color2）。
3. 插值顏色法可以先不用管，一般用來(lái)定義顏色空間，有 hsl、srgb。
4. 兩種顏色混合可以設(shè)置混合比例，由于 CSS 強(qiáng)大的“包容”性，對(duì)各種情況都做了兼容。
5. 在混合比例在兩者相加大于100%的情況下，需要先計(jì)算兩者的比例，然后再用100%按比例分配。
6. 在混合比例在兩者相加小于100%的情況下，會(huì)出現(xiàn)透明度。
7. 顏色混合最常見(jiàn)的用途是根據(jù)主題色生成與之相對(duì)應(yīng)的鄰近色。
8. 目前主流瀏覽器全兼容，在實(shí)際開(kāi)發(fā)中，需要使用CSS supports進(jìn)行回退處理。

CSS 顏色處理函數(shù)真的是越來(lái)越強(qiáng)大了，后面還會(huì)介紹其他比較實(shí)用的顏色函數(shù)。

參考資料

[1]color-mix(): https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix。

[2]CSS color-mix (codepen.io): https://codepen.io/xboxyan/pen/KKrzyBz。

[3]CSS color-mix (juejin.cn): https://code.juejin.cn/pen/7245647917632094263。

[4]CSS color-mix (runjs.work): https://runjs.work/projects/d8b793ca495346b2。

[5]妙用 CSS 動(dòng)畫來(lái)實(shí)現(xiàn)顏色加深、減淡等混合操作: https://juejin.cn/post/7184252342882009125。

[6]CSS 顏色混合的N種方式: https://juejin.cn/post/7207228091989557306。