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