关于前端:深入了解CSS颜色混合函数colormix

欢送关注我的公众号：前端侦探

明天来介绍一下 Chrome 111+正式推出的 CSS 颜色混合函数：color-mix()。

所谓颜色混合，顾名思义，就是将两种色彩依照肯定的比例混合起来，和调色板比拟像。到目前为止，能够说是最弱小、最实用的 CSS 色彩处理函数了，有了它，再也不须要用 LESS、SASS 等预处理工具了，还能够实现色彩动静更新，一起理解一下吧

首先来看语法，比较简单

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)/ 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 中自行调整色彩体验

CSS color-mix (codepen.io)
CSS color-mix (runjs.work)

这应该就是颜色混合最直观的意识了。

当然，这只是最简略的状况。在下面的语法中，还能够给色彩设置混合比例，也就是后面语法中的 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.5
p2' = 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 能够很不便的依据主题色生成与之绝对应的邻近色，例如

: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 动画来实现色彩加深、减淡等混合操作
CSS 颜色混合的 N 种形式

兼容性文章结尾就有提到，残缺兼容性如下

当初支流浏览器曾经全副兼容了，释怀学习吧。

不过理论工作中，还须要做好回退措施，如果浏览器不兼容怎么办？有些同学可能会想到用 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 色彩处理函数真的是越来越弱小了，前面还会介绍其余比拟实用的色彩函数。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探

关于前端:深入了解CSS颜色混合函数colormix

一、color-mix 语法

二、color-mix 混合比例

三、color-mix 理论利用

四、兼容性和回退措施

五、总结一下