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

·  阅读 480
前端配色的秘密:怎么配都好看

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

  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设置低一些,10%到30%左右,根据不同场景来确定,亮度V基本也在80%左右。
  4. 如果还需要配置反色系,也很好办,直接将色相H旋转180°就好了。

文字描述显得无力,没有代入感,配出来的具体效果大家可以参考我的小程序来,小程序上面可以支持配置任意的主题色。

总结起来也就是:色系先由色相来确定,其他搭配色再根据色相来确定,这样搭出来的一套颜色基本不会太乱,也能很好的控制主次关系、保证不同颜色之间的辨识度。

看两个我封装的颜色生成函数(代码中用到了@moohng/dancolor-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})`;
}
复制代码

总结

这套方案是我自己摸索出来的,从开发者角度来说确实很好用。最后,放一个我的小程序码,自行体验吧。

如果觉得不错,可以关注我的公众号【末日码农】,我会将开发中遇到的实际问题和一些好的技术知识分享给大家。

最后,感谢阅读。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改