告诉你前端配色的秘密：怎么配都好看

不知道大家在开发个人项目的时候，有没有遇到过以下的问题：

1. 我的页面主色调用什么颜色？
2. 背景色又用什么颜色？
3. 辅助色呢？
4. 对于可自定义主题的项目，如何根据用户选择的主色调生成其他辅助色呢？
5. …

前面3个问题，大家可以去参考专业的配色网站来，但是对于第4个问题，在页面颜色不确定的情况下，如何根据用户设置的主色调生成一整套的配色方案？而且还得保证不同颜色之间的辨识度。

…到最后，就只能使出配色终极大法：黑、白、灰，3个色调来搞了。

黑白灰虽是万能配色，但是对于有些类型的项目，黑白灰确实也显得有些不搭。例如，我目前正在做的一个小程序，其基本功能就是画图，然后在此基础之上增加更多的玩法。对于画图类的项目，本身就需要对各种颜色的支持和操控，如果主题色搞成黑白灰，那就显然不搭了。

当然，如果有专业的UI设计那就完全没有任何问题了。本篇文章只针对没有UI设计的项目，作为前端开发人员，怎么把页面的颜色搭配好。

配色原理

要配色，首先肯定要去了解颜色。可能你觉得自己写了这么多年的前端页面，颜色早就了解了。我看未必。

比如：

1. 浏览器支持哪些颜色模型？
2. 不同的颜色模型分别是怎么定义出来的？
3. RGB是通过三原色按等级来定义的，那HSL呢？HSV呢？
4. 不同颜色模型之间如何进行转换？

对于平时没怎么用过HSL的同学来说，可能都没想过这些问题。因为在平时开发中，根本就用不上，颜色全都是UI提供好的十六进制或RGB格式的，复制过来用就行了。

但如果要学会配色，肯定是要弄懂这几个问题的。当然，我也是非专业的UI，只是在做项目时遇到了这些问题，然后从一个前端开发者的角度，总结了一些个人经验，仅供参考。

为什么一定要弄懂这些问题呢？因为配色一般都不是根据RGB这种来的，而是根据HSV这种颜色模型来实现的。如果用RGB模型，配出来的的颜色基本都是乱的，很难人为去把控。而HSV就不会，它可以先确定一个色相，然后根据色相来生成一系列的颜色，这样配出来的颜色都是可以人为来掌控的。

关于这些问题的解答，大家可以参考我之前的一篇文章《颜色操控大法：如何封装一个颜色选择组件？》，有专门对颜色模型进行了一些介绍。

弄懂了上面的那些问题，接下来配色就不难了。

具体实现

比如，我要配一个红色系的主题：

1. 首先将色相H设置为0°；
2. 主题色：一般都是辨识度比较高而且看起来很鲜艳的颜色，主题嘛，就是为了突出，引起人的注意。所以，我们就可以将饱和度S设置高一些，70%到90%之间看起来就比较舒服。如果太低了，很难突出主题，太高了，又会显得刺眼。亮度V一般可以设置80%左右就好了。
3. 辅助色：一般比主题色要低一个层次，可以用于置灰、禁用、背景、辅助说明等状态。那么，我们就可以把饱和度S</