最近做一个没有设计师参与的项目，发现 scss 内置的颜色函数还挺好用。记录分享下

能省掉手工转换 hex 到 rgb 格式的工作，如以下 SCSS 代码

生成的 CSS 代码

还可以通过 opacify 增加，通过 transparentize 来减少透明度值，如：

lighten / darken 是基于 HSL 明度变换，这个比较适合 button 按钮的 normal 态和 hover 态变换，

saturate / desaturate 是基于 HSL 饱和度 变换，

效果可以参考这个在线工具 http://scg.ar-ch.org/

然而生成的颜色很丑，不实用。

阿里的 Ant Design 早期版本使用了 tint / shade 色彩算法，通过增加 白色（tint） 和 黑色（shade） 的占比来生成系列色。

这个在项目中会更加实用，不过要注意新生成的颜色与文本对比度需满足 WCAG 2.0 对比度要求。

在线 checker：http://webaim.org/resources/contrastchecker/

在色彩理论中，如果一种颜色与另一种颜色混合后，呈现中性的灰黑色，那么这两种颜色就互为补色。

好莱坞电影比较常用补色后期手法，强烈的互补色对比，能渲染出比较冲击的视觉系氛围。如下图《天使爱美丽》海报的红绿互补。

不过现在还没用到这个函数，怕有点 hold 不住：）