CSS color-mix()
函数,您可以直接在 CSS 中混合任何受支持的颜色空间中的颜色。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
在 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);
![7 种颜色空间(srgb、Linear-srgb、lch、oklch、lab、oklab、xyz)分别显示了黑白混合的效果。显示了大约 5 种不同的色调,表明每种颜色空间甚至会以不同的方式混合到灰色。](https://developer.chrome.google.cn/static/docs/css-ui/css-color-mix/image/7-color-spaces-srgb-lin-f139be872a18a.png?authuser=0000&hl=ca)
确实有很大影响!
我们再以 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);
![7 种颜色空间(srgb、Linear-srgb、lch、oklch、lab、oklab、xyz),每个颜色空间显示不同的结果。很多颜色是粉色或紫色的,但实际上仍然是蓝色的。](https://developer.chrome.google.cn/static/docs/css-ui/css-color-mix/image/7-color-spaces-srgb-lin-5415cf7a20d75.png?authuser=0000&hl=ca)
使用 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);
}
![不同颜色空间中的黑白渐变。](https://developer.chrome.google.cn/static/docs/css-ui/css-color-mix/image/alttexthere-a16c67a3aee6c.png?authuser=0000&hl=ca)
如果您想知道哪种颜色空间“最佳”没有这个。这就是为什么
选择太多了!也不会有新的颜色空间
发明的任何一个(请参阅 oklch
和 oklab
),前提是其中一个是“最佳”。每种颜色
可能就会有独特的大放异彩,成为真正的理想之选。
例如,如果您想获得鲜艳的混音结果,请使用 hsl 或 hwb。在以下 演示中,混合了 hsl 和 hwb 中的两种鲜艳色(品红色和绿黄色) 两者都会产生鲜艳的颜色,而 srgb 和 oklab 则会产生不饱和色。
<ph type="x-smartling-placeholder">![混合结果如上一段所述。](https://developer.chrome.google.cn/static/docs/css-ui/css-color-mix/image/alttexthere-93bf2be27ac03.png?authuser=0000&hl=ca)
如果想要保持一致性并使其细微,请使用 oklab。在下面的演示中 而 hsl 和 hwb 则会导致颜色过于鲜艳,色调转换, srgb 和 oklab 会生成深蓝色。
<ph type="x-smartling-placeholder">![混合结果如上一段所述。](https://developer.chrome.google.cn/static/docs/css-ui/css-color-mix/image/alttexthere-f139d29a23359.png?authuser=0000&hl=ca)
在 color-mix()
Playground 中花五分钟时间,测试不同的颜色
和聊天室,你就会开始感受到每个空间的优势。此外,
大家期待在颜色空间方面能得到更多指导,因为我们都
发掘各种可能性
调整色调插值方法
如果您选择在圆柱形颜色空间中混合,则基本上任何颜色
空间(包含可接受角度的 h
色调通道),您可以指定
插值变为 shorter
、longer
、decreasing
和 increasing
。这是
高清配色指南。
本示例同样是蓝白混合的示例,但这一次,只在 使用不同色相插值方法的圆柱形空间。
<ph type="x-smartling-placeholder">![混合结果如上一段所述。](https://developer.chrome.google.cn/static/docs/css-ui/css-color-mix/image/alttexthere-5b90e9287d746.png?authuser=0000&hl=ca)
这是我制作的另一个 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% 不是必需的,但可以选择指定 50%。最后一个 总和为 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 中,系统根据品牌十六进制颜色值创建了浅色和深色主题 color 决定。浅色主题会创建两种深蓝色的文本颜色和一个非常浅的白色 背景颜色。然后,在深色偏好设置媒体查询中,自定义 属性会分配新颜色,因此背景颜色较暗,文本颜色也为 都是低强度
: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()
提供了出色的支持。它可以识别并
突出显示语法,
样式 窗格中,并允许选择替代颜色。
它在 DevTools 中应如下所示:
祝大家混音愉快!