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

Z时代
2024-01-10
分类：综合

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

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

前面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})`;}