关于前端:前端配色的秘密怎么配都好看

31次阅读

共计 1979 个字符，预计需要花费 5 分钟才能阅读完成。

不晓得大家在开发集体我的项目的时候，有没有遇到过以下的问题：

我的页面主色调用什么色彩？
背景色又用什么色彩？
辅助色呢？
对于可自定义主题的我的项目，如何依据用户抉择的主色调生成其余辅助色呢？
…

后面 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 组件？》

正文完