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

所謂顏色混合，顧名思義，就是將兩種顏色按照一定的比例混合起來，和調色板比較像。到目前為止，可以說是最強大、最實用的 CSS 顏色處理函數了，有了它，再也不需要用LESS、SASS等預處理工具了，還可以實現顏色動態更新，一起了解一下吧。

(資料圖片)

一、color-mix語法

首先來看語法，比較簡單。

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);

通用語法寫作。

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

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

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

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

以紅色和白色混合為例。

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

下面是實際混合效果：

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

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

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

效果如下：

這是如何混合的呢，很簡單，以rgb為例，其實就是將對應的值取平均數。

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

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

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

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

你也可以在下面的 demo 中自行調整顏色體驗。

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

這應該就是顏色混合最直觀的認識了。

二、 color-mix 混合比例

當然，這只是最簡單的情況。在上面的語法中，還可以給顏色設置混合比例，也就是前面語法中的p1和p2。

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

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

如果 和p1都p2被省略，則p1 = p2 = 50%。如果p1省略，則p1 = 100% - p2。如果p2省略，則p2 = 100% - p1。如果p1 = p2 = 0%，則該函數無效。如果p1 + p2 ≠ 100%，則p1" = p1 / (p1 + p2)和p2" = p2 / (p1 + p2)，其中p1"和p2"是歸一化結果。

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

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

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

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

這種混合應該怎么計算呢？

首先還是按照上面的計算規則，算出兩者的比例關系

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

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

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

效果如下：

同理，這種情況下也是等同的，因為都是4:1。

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

效果如下：

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

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

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

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

混合比例其實都是1:1，最后這兩者結果會相同嗎？可以先看結果。

可以明顯看到，下面的混合結果顏色跟淡一些。為什么呢，其實可以從最終的混合顏色看出原因，這里直接通過控制臺來得到計算顏色，如下：

兩個實色混合出來居然有了透明度！

這個透明度怎么來的呢？其實就是由于兩者混合相加不足100%，剛才這個例子，兩者相加20%+20%=40%，所以最終的混合出現了0.4的透明度。

我們再換個例子。

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

效果如下：

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

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

三、color-mix 實際應用

使用color-mix可以很方便的根據主題色生成與之相對應的鄰近色，例如：

: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%);}

效果如下：

這樣在實現一些跟隨主題色變化的按鈕就非常方便了。

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

效果如下：

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

妙用 CSS 動畫來實現顏色加深、減淡等混合操作^[5]CSS 顏色混合的N種方式^[6]四、兼容性和回退措施

兼容性文章開頭就有提到，完整兼容性如下：

現在主流瀏覽器已經全部兼容了，放心學習吧。

不過實際工作中，還需要做好回退措施，如果瀏覽器不兼容怎么辦？有些同學可能會想到用 CSS 變量來做回退處理，如下：

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

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

正確的做法是使用CSS supports進行判斷。

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

這樣，在不支持的瀏覽器中也能使用一個還能接受的回退值，只是不能動態去混合了。

五、總結一下

以上就是本文的全部內容了，相信你會對顏色混合有更深刻的理解，下面總結一下。

color-mix其實就是將兩種顏色按照一定的比例混合起來，和調色板比較像。語法很簡單，只有3個參數，分別是插值顏色法(method)、基礎顏色（color1）和混合顏色（color2）。插值顏色法可以先不用管，一般用來定義顏色空間，有 hsl、srgb。兩種顏色混合可以設置混合比例，由于 CSS 強大的“包容”性，對各種情況都做了兼容。在混合比例在兩者相加大于100%的情況下，需要先計算兩者的比例，然后再用100%按比例分配。在混合比例在兩者相加小于100%的情況下，會出現透明度。顏色混合最常見的用途是根據主題色生成與之相對應的鄰近色。目前主流瀏覽器全兼容，在實際開發中，需要使用CSS supports進行回退處理。

CSS 顏色處理函數真的是越來越強大了，后面還會介紹其他比較實用的顏色函數。

參考資料

[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 動畫來實現顏色加深、減淡等混合操作:https://juejin.cn/post/7184252342882009125。

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

關鍵詞：