一招颜色搭配小技巧，妈妈再也不用担心我的配色

开发中通常使用rgb进行色彩描述，在需要的时候可以加上透明度，即rgba，但在大多数没有设计稿的时候，想自己折腾点页面，调颜色是一个老大难。于是乎，特意向设计的同事进行一番学习。

接下来开启新世界大门。 周知，在css中，描述颜色的方式有4种：

• rgb(),rgba() 三原色通道+透明度通道
• 颜色名称，如red，yellow
• 十六进制 如#f1f1f1, #33333
• hsl(),hsla(), 色相，饱和度，亮度通道 +透明度通道

现在主要介绍hsl(hsla)

定义与用法

hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。

HSLA 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。

色相（H） 取值0-360，是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。

饱和度（S） 取 0-100% 的数值，是指色彩的纯度，越高色彩越纯，低则逐渐变灰。

亮度（L） 取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。 透明度（A） 取值 0~1 之间， 代表透明度。

小技巧就是以色相H作为主要操作项，然后饱和度s和亮度L作为辅助颜色调整； 介绍技巧之前，有几个小概念

• 十二色轮 ：将色相取值等分为12分，就形成12个区间，叫做12色轮，每个区间包含30度角的颜色范围。
• 相近色 ：当前颜色的色相±30度的范围内颜色，定义为相近色
• 互补色 ：当前颜色的色相+180度，是当前颜色的互补色，通常用于突出某些内容。

言归正传，了解以上的知识点，就可以开始一波大法了。

在开发过程中，需求方给定了一个主题色，那么我们就可以

• 1. 在网站使用相近色进行整体颜色配置，同时可以通过调节颜色的饱和度和亮度，对颜色进行微调；
• 2. 在需要突出的地方，比如按钮文字等，先取互补色,再取其相近色，再通过调节颜色的饱和度和亮度，对颜色进行微调；
• 3. 透明度，看心情看需要进行调节，设计师同事说，一般情况下不会调整透明度，默认保持1.

安利时间

最后，安利一个色彩搭配网站 colorhunt.co/ 当你拿到一个给定的需求色，直接到这个网站去找包含(或者相近)这个颜色的色卡，然后就可以取用上面的颜色，通过微调色相、饱和度和亮度，就可以愉快的配色了。

以上就是颜色搭配的小技巧了，但是这只是一个参考，具体情况，还是需要多践中不断学习，才会越来越有感觉。自己觉得有点用，就分享给大家了，欢迎在评论区分享你们的颜色小技巧，我会拿小板凳小本本来学习的。共勉。