CSS4color-modcolor
去年@Erik Jung 写了一篇文章来介绍CSS4 Color 特性，那时并没有花时间去探讨其具体的使用方式，只是略知他能让你基于某个颜色，添加调节参数，得到新的颜色。由于其还是 Color 的新特性，所以目前如果不依赖于其他的手段，你在浏览器里是看不到效果的。当然也有非常出色的工程师，比如@Ahmad Shadeed 写的一篇文章中，使用rgba()模拟出color-mod()函数的特性。
特别声明，其实并没有什么CSS4 一说，其只是 Level 4 的一种简称，比如这里所说的CSS4 Color，其实就是指CSS Color Module Level 4。为了好记，所以说是CSS4。有关于这方面的具体解释可以阅读《为什么没有 CSS4：关于 CSS 等级的解释》一文。
昨天看到@Tyler Gaw 使用 React 写的 ColorMe，非常有意思，演示了color-mod()函数如何基于一个颜色，在不同条件下的变化。
这篇文章接下来要说的就是 CSS Color Module Level 4 中的color-mod。在具体介绍它之前，我们先简单的看看下面的录屏效果。通过 ColorMe，基于#29B4F0颜色，调整不同的参数得出的颜色效果：
比如：
color(#29B4F0 a(63%) s(45%) h(176) l(54%) tint(39%) shade(63%) w(56%) b(73%) contrast(49%)) 看到的效果：
看到上面一大串的代码值，我想你肯定想知道怎么使用这个属性。
color-mod()语法
规范中对color-mod()属性的语法是这样描述的：
color-mod() = color( [ <color> | <hue> ] <color-adjuster>* ) <color-adjuster> = [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] ) | [red( | green( | blue( | alpha( | a(] '*' <percentage> ) | rgb( ['+' | '-'] [<number> | <percentage>]{3} ) | rgb( ['+' | '-'] <hash-token> ) | rgb( '*' <percentage> ) | [hue( | h(] ['+' | '-' | '*']? <angle> ) | [saturation( | s(] ['+' | '-' | '*']? <percentage> ) | [lightness( | l(] ['+' | '-' | '*']? <percentage> ) | [whiteness( | w(] ['+' | '-' | '*']? <percentage> ) | [blackness( | b(] ['+' | '-' | '*']? <percentage> ) | tint( <percentage> ) | shade( <percentage> ) | blend( <color> <percentage> [rgb | hsl | hwb]? ) | blenda( <color> <percentage> [rgb | hsl | hwb]? ) | contrast( <percentage>? ) 一大串代码，基本上让人晕了。这些东东都表示的是什么东东？不了解语法中各种符号表示的意思不要紧，你可以阅读一下@少年阿布 DX 翻译的一篇文章《理解 CSS 属性值语法》。这里就不做详细的阐述。
我们需要知道的是在实际使用依然和以前使用颜色属性一样的方法，比如：
color: color( [ <color> | <hue> ] <color-adjuster>* ); background-color: color( [ <color> | <hue> ] <color-adjuster>* ); 重点是color( [ <color> | <hue> ] <color-adjuster>* )。既然这个是重点，那简单的说一下他。
第一个参数[color | <hue>]是指基本颜色。如果使用<hue>表示这个基本颜色是一个hue颜色。第二个参数<color-adjuster>*其中<color-adjuster>是修改基本颜色的某种方式，而*表示的是可以0个或多个调整方式。目前<color-adjuster>调整颜色的方式主要有以下这些方式：
[red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] )[red( | green( | blue( | alpha( | a(] '*' <percentage> )rgb( ['+' | '-'] [<number> | <percentage>]{3} )rgb( ['+' | '-'] <hash-token> )rgb( '*' <percentage> ) |[hue( | h(] ['+' | '-' | '*']? <angle> )[saturation( | s(] ['+' | '-' | '*']? <percentage> )[lightness( | l(] ['+' | '-' | '*']? <percentage> )[whiteness( | w(] ['+' | '-' | '*']? <percentage> )[blackness( | b(] ['+' | '-' | '*']? <percentage> )tint( <percentage> )shade( <percentage> )blend( <color> <percentage> [rgb | hsl | hwb]? )blenda( <color> <percentage> [rgb | hsl | hwb]? )contrast( <percentage>? )
浏览器支持度
到目前为止，color-mod()还没有浏览器支持，也就是说，你在 CSS 文件中直接使用是看不到效果的。看到这里你可能又要嘘嘘了，其实不用嘘嘘，在实际项目中，你可以使用 PostCSS 的插件或者引入 cssnext。这样你除了使用color-mod()功能之外，你还可以使用其他 CSS Color Level 4 中的一些新特性。
如果你和我一样，喜欢使用 Codepen.io 这样的在线代码编辑器，那就更方便了，你可以直接引入 PostCSS,然后在开头引用@use cssnext;。这样你就可以使用 cssnext 中的特性了。
文章后面的 Demo 都将借助 Codepen 来演示。
color-mod()使用
在 Web 开发时，开发者很多时候都会碰到需要的颜色和网站指定的配色方案的颜色略有不同。比如说，比orange亮30%。在还没有 CSS 颜色函数之前，开发者都是借助于 CSS 的处理器来完成，比如说 Sass。因为它提供了一些颜色函数，可以帮助开发者轻易的实现想要的颜色：
body { background-color: orange; &:hover { background-color: lighten(orange, 30%); } } 效果如下：
如果我们采用color()来修改的话，上面的示例可以修改成：
body:hover { background-color: color(orange lightness(+30%)); } 得到的效果是一致的：
上面的示例只有一个调试参数，我们可以来看一个更复杂的调试参数：
body { background-color: color( orange lightness(+ 30%) /* to 30% lighter than orange */ lightness(- 30%) /* to orange again */ hue(+ 60deg) /* to magenta */ hue(+ 60deg) /* to red */ hue(- 120deg) /* to orange again */ ); } 正如 ColorMe 提供的调试器，我们在color()可以使用：
alpha()：可以简写为a()，接受一个0%至100%的值，用来调整透明度值saturation()：可以简写为s()，接受一个0%至100%的值，用来调整饱和度值hue()：可以简写为h()，接到一个0到360的整数值，用来调整色相值lightness()：可以简写为l()，接受一个0%到100%的值，用来调整亮度值tint()：接受一个0%到100%的值，用来调整色彩值shade()：接受一个0%到100%的值，用来调整暗度值whiteness()：可以简写为w()，接受一个0%到100%的值，用来调整白色值blackness()： 可以简写为b()，接受一个0%到100%的值，用来调整黑色值contrast()：接受一个0到100%的值，调整对比度
除此之外，还可以通过blend()和blenda()的混合度等。
在关于
color()中调节器的详细介绍，可以阅读@Damian Senn 写的《Modifying CSS Colors with the color() function》博文。
结合 CSS 自定义属性使用
在 CSS 处理器中有变量，通过在变量的基础上做颜色的调整。除此之外，可以采用 CSS 自定义属性来做颜色的调整。比如：
:root { --theme-bg: var(--color-white); --theme-text: var(--color-black); --theme-primary: var(--color-red); --theme-secondary: var(--color-blue); --theme-tertiary: var(--color-purple); } a { color: var(--theme-primary); } a:hover { color: var(--theme-primary-darker); } 在 CSS 自定义属性的基础上，结合color()一起使用，那么会就得更灵活：
:root { --hue-base: #d54032; --hue1: color(var(--hue-base)); --hue2: color(var(--hue-base) hue(+ 60deg)); --hue3: color(var(--hue-base) hue(+ 120deg)); --hue4: color(var(--hue-base) hue(+ 180deg)); --hue5: color(var(--hue-base) hue(+ 240deg)); --hue6: color(var(--hue-base) hue(+ 300deg)); } .hue1 { background-color: var(--hue1); } 最终效果如下：
总结
这篇文章简单的介绍了 CSS Color Level 4 中的color-mod()函数功能。在实际调用采用的是color()，但有一个细节千万要注意。这个color()和颜色模块中的color()函数是不一样的。具体的区别可以阅读规范文档。
color-mod()只是 CSS Color Level 4 中的一小块功能，里面还有很多有意思的特性。当然这些特性很多还未得到浏览器的支持，就算是采用 cssnext 特性，有些也还没得到支持。不过有空可以先行了解，如果你对 CSS Color Level 4 中的一些特性有自己独特的想法，可以参与 Github 的讨论。因为越多的人参与，会越快得到浏览器厂商的支持。最后希望这篇文章对你有所帮助。
参考资料
- Modifying Colors: the
color-mod()function - Building Themes with CSS4 Color Features
