深入了解CSS顏色混合函數(shù)Color-mix

作者：XboxYan 2023-06-26 09:16:34

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

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

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

一、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，這里只介紹顏色空間)、基礎(chǔ)顏色（color1）和混合顏色（color2），示意如下：

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

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

以紅色和白色混合為例。

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

下面是實際混合效果：

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

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

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

效果如下：

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

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

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

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

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

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

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

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

二、 color-mix 混合比例

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

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

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

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

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

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

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

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

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

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

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

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

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，最后這兩者結(jié)果會相同嗎？可以先看結(jié)果。

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

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

這個透明度怎么來的呢？其實就是由于兩者混合相加不足100%，剛才這個例子，兩者相加20%+20%=40%，所以最終的混合出現(xiàn)了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 實際應(yīng)用

使用color-mix可以很方便的根據(jù)主題色生成與之相對應(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%);
}

效果如下：

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

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

效果如下：

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

妙用 CSS 動畫來實現(xiàn)顏色加深、減淡等混合操作^[5]
CSS 顏色混合的N種方式^[6]

四、兼容性和回退措施

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

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

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

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

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

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

:root{
  --bg: orange
}

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

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

五、總結(jié)一下

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

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

CSS 顏色處理函數(shù)真的是越來越強(qiáng)大了，后面還會介紹其他比較實用的顏色函數(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 動畫來實現(xiàn)顏色加深、減淡等混合操作: https://juejin.cn/post/7184252342882009125。

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

責(zé)任編輯：姜華來源：前端偵探

CSS color-mix