我们在像SASS这样的预处理器中使用彩色functions]已经有一段时间了。这种调整和修改颜色的能力应该很快就会出现在css颜色模块级别4.)的css中我们将能够对基色应用一些颜色调整器。这在与css variables，]结合使用时变得非常方便，因为它可以将我们的基色定义为变量，然后在需要的地方应用调整器。

<$>[注意]请注意，以前，COLOR-MOD仅称为COLOR函数。最近在规范中将该名称更改为COLOR-MOD。<$>

下面是一个如何使用COLOR-MOD函数的示例：

1.box {
2  // Let's make it a little redder
3  color: color-mod(rgb(147,123,25) red(218));
4}

或者使用HEX值作为基色：

1.box {
2  color: color-mod(#937b19 contrast(25%);
3}

或者甚至使用计算属性(css变量)：

1:root {
2  --base-color: #937b19;
3}
4
5.box {
6  color: color-mod(var(--base-color) tint(59%));
7}

从上述代码片段得到的颜色将是RGB(218、123、25)。

您可以在同一颜色功能中使用多个颜色调整器：

1.box {
2  color: color-mod(purple lightness(62%) red(218) blue(202) whiteness(25%));
3}

调色器

以下是可用的颜色调整器列表：

Alpha：介于0%和100%之间的Alpha透明度的值。
红绿蓝：介于0和255之间的值。给定起始颜色RGB(140、254、255)，起始红色值将为 140** ，因此任何大于140的值都会增加颜色中的红色数量，而任何低于140的值都会减少红色的数量。绿色和蓝色的工作方式相同，都会影响它们各自的颜色。
黑白：取值范围在0%到100%之间。
对比度：介于0%和100%之间的值。
饱和度：介于0%和100%之间的值。0%为灰色。
亮度：介于0%和100%之间的值。0%为黑色，100%为白色。
tint：介于0%和100%之间的值。
色调：介于0和360之间的值。
阴影：介于0%和100%之间的值。100%是黑人。
混合：混合使您可以轻松地将一种颜色与另一种颜色混合。以下是它的用法示例：

1.box {
2  color: color-mod(hotpink blend(yellow 59%));
3}

浏览器支持

在推荐过程中，css颜色级别4仍处于工作草案阶段，还没有在任何浏览器中实现颜色功能。不过，好消息是你现在就可以开始使用它了，这要归功于postcss)和css Next插件。

颜色检出ColorMe.io，是一个帮助您使用👉功能合成颜色的伟大工具。

CSS color-mod 功能

调色器

浏览器支持