不晓得大家在开发集体我的项目的时候，有没有遇到过以下的问题：
- 我的页面主色调用什么色彩？
- 背景色又用什么色彩？
- 辅助色呢？
- 对于可自定义主题的我的项目，如何依据用户抉择的主色调生成其余辅助色呢？
- ...
后面3个问题，大家能够去参考业余的配色网站来，然而对于第4个问题，在页面色彩不确定的状况下，如何依据用户设置的主色调生成一整套的配色计划？而且还得保障不同色彩之间的辨识度。
...到最初，就只能使出配色终极大法：黑、白、灰，3个色调来搞了。
黑白灰虽是万能配色，然而对于有些类型的我的项目，黑白灰的确也显得有些不搭。例如，我目前正在做的一个小程序，其基本功能就是画图，而后在此基础之上减少更多的玩法。对于画图类的我的项目，自身就须要对各种色彩的反对和操控，如果主题色搞成黑白灰，那就显然不搭了。
当然，如果有业余的UI设计那就齐全没有任何问题了。本篇文章只针对没有UI设计的我的项目，作为前端开发人员，怎么把页面的色彩搭配好。
配色原理
要配色，首先必定要去理解色彩。可能你感觉本人写了这么多年的前端页面，色彩早就理解了。我看未必。
比方：
- 浏览器反对哪些色彩模型？
- 不同的色彩模型别离是怎么定义进去的？
- RGB是通过三原色按等级来定义的，那HSL呢？HSV呢？
- 不同色彩模型之间如何进行转换？
对于平时没怎么用过HSL的同学来说，可能都没想过这些问题。因为在平时开发中，基本就用不上，色彩全都是UI提供好的十六进制或RGB格局的，复制过去用就行了。
但如果要学会配色，必定是要弄懂这几个问题的。当然，我也是非专业的UI，只是在做我的项目时遇到了这些问题，而后从一个前端开发者的角度，总结了一些集体教训，仅供参考。
为什么肯定要弄懂这些问题呢？因为配色个别都不是依据RGB这种来的，而是依据HSV这种色彩模型来实现的。如果用RGB模型，配出来的的色彩根本都是乱的，很难人为去把控。而HSV就不会，它能够先确定一个色相，而后依据色相来生成一系列的色彩，这样配出来的色彩都是能够人为来掌控的。
对于这些问题的解答，大家能够参考我之前的一篇文章《如何封装一个色彩抉择ColorPicker组件？》，有专门对色彩模型进行了一些介绍。
弄懂了下面的那些问题，接下来配色就不难了。
具体实现
比方，我要配一个红色系的主题：
- 首先将色相H设置为0°；
- 主题色：个别都是辨识度比拟高而且看起来很娇艳的色彩，主题嘛，就是为了突出，引起人的留神。所以，咱们就能够将饱和度S设置高一些，70%到90%之间看起来就比拟难受。如果太低了，很难突出主题，太高了，又会显得扎眼。亮度V个别能够设置80%左右就好了。
- 辅助色：个别比主题色要低一个档次，能够用于置灰、禁用、背景、辅助阐明等状态。那么，咱们就能够把饱和度S设置低一些，10%到30%左右，依据不同场景来确定，亮度V根本也在80%左右。
- 如果还须要配置反色系，也很好办，间接将色相H旋转180°就好了。
文字描述显得有力，没有代入感，配出来的具体成果大家能够参考我的小程序来，小程序下面能够反对配置任意的主题色。
总结起来也就是：色系先由色相来确定，其余搭配色再依据色相来确定，这样搭进去的一套色彩根本不会太乱，也能很好的管制主次关系、保障不同色彩之间的辨识度。
看两个我封装的色彩生成函数（代码中用到了@moohng/dan和color-convert两个库）：
/** * 生成随机背景色 * @returns */export function generalBgColor(s = 80, v = dan.random(80, 90) as number, a = 1) { const h = dan.random(0, 360) as number; // 随机色相 const [r, g, b] = hsv.rgb([h, s, v]); // 转成RGB return `rgba(${r},${g},${b},${a})`;}/** * 依据指定色彩生成同色系的主题色 * @param color * @returns */export function generalThemeColor(color: string, s = 80, v = dan.random(80, 90) as number, a = 1) { const rgbValue = color.match(/\d+/g) as unknown as RGB; const [h] = rgb.hsv(rgbValue); // 失去色相值 const [r, g, b] = hsv.rgb([h, s, v]); return `rgba(${r},${g},${b},${a})`;}总结
这套计划是我本人摸索进去的，从开发者角度来说的确很好用。最初，放一个我的小程序码，自行体验吧。
如果感觉不错，能够关注我的公众号【末日码农】，我会将开发中遇到的理论问题和一些好的技术常识分享给大家。
最初，感激浏览。
上一篇：《如何封装一个色彩抉择ColorPicker组件？》