当我们所做的工作重复 2 遍以上,就应该主动寻找其规律与解决办法。那如何利用技术手段解决重复性的设计工作呢?在设计过程中,配色是很重要的一部分。拿 Banner 设计举例,我们第一眼接收到的信息就是颜色,而在设计师做图的过程中会花大量的时间用于图片的配色上。接下来就让我们一起探究看看,有没有可能通过智能算色完成设计工作。
先来一波扫盲,我们看看最常见的 RGB、HEX、HSB、HSL 都是什么。
1.1 先来说说 RGB
RGB 是从颜色的发光原理来设定的, 相当于红、绿、蓝三个颜色通过不同亮度, 来组合成需要的颜色。用灯光来解释,0 就是没开灯,255 就是开到最亮,所以当红色光线开到最亮而其它两个色光都不开时,就是 RGB(255, 0, 0)只有红光。如果把红色光开一半,还是不开其它两个色光,RGB(127, 0, 0)那么就会变成暗红色。
1.2 再来说说 HEX
16 进位码简写为 HEX,在数学中是一种逢 16 进 1 的进位制。一般用数字 0 ~ 9 和字母 A ~ F(或 a ~ f )表示,其中:A ~ F 表示 10 ~ 15。16 进位中的第 10 位数字开始由于没办法写成「10」(因为两位数就是进位了),所以在第 10 位数开始采用 A ~ F 这些英文字母来当作数字使用。
基本上 HTML & CSS 中的 16 进位码色彩由三组数(6 个数字 / 字母)组成,HEX 与 RGB 中每个颜色又是一一对应的关系,感兴趣的同学还可以看下 RGB 与 HEX 的转化公式。
1.3 最后看看色彩三要素是什么
看完前面两种色彩模式的同学不难发现 RGB 和 HEX 是对机器很友好的色彩模式,但并不够人性化,因为我们对色彩的认识往往是 “什么颜色?鲜艳不鲜艳?亮还是暗?”。 HSB 模式和 HSL 就是基于这三个维度创造出来的,是一种更方便友好的色彩模式。
🌈 色相
色相就是颜色的色彩相貌,比如:蓝色、青色、紫色… 就是色相。通常情况,我们会根据色环进行色相调整,色环 0° 红色,120° 绿色,240° 蓝色,饼状色环和条状色环都是首位相连,两者只是在展示形式上有差别,实际用法没有区分。
🌝饱和度
以色彩预设都是 100% 饱和的情况下,若是要让色彩变得不那么鲜艳,就把色彩饱和度往 0% 的方向调整即可,饱和度越低颜色越接近灰色。
🌗明度
明度由中间开始,越是上方的越亮 (白色份量增加),增亮到最后就变成纯白。而越往下则越暗 (黑色份量增加),亮度缩减到最后就变成了黑色。
按照这三个维度计算的色彩模式不止一种。1 种叫 HSL ,另一种叫 HSB。它们俩就像一对亲兄弟,但是又有些不同,今天我们就把这两个似象非象的兄弟俩搞定!
做 UI 设计的同学对 Sketch 一定不陌生,在它的拾色器中我们是可以改变色彩模式的。
2.1 两者的色彩模型
以红色举🌰,同样都是 #FF000 红色,为啥两个色彩模式的参数在拾色器上显示的不一样呢?
先来看一下两者名称的意义:
HSB 即色相、饱和度、明度(Hue, Saturation, Brightness),又称 HSV,V 即 Value。
HSL 即色相、饱和度、亮度(Hue, Saturation, Lightness)。
从原理上讲两者的色相 H 是完全一致的,但是两者的饱和度 S 和明度 B/L 是不一样的。
🌟 HSB 中的 S 受白色混入量影响,数值越大白色越少,颜色越纯;
🌟 HSB 中的 B 受黑色混入量影响,数值越大黑色越少,明度越高;
🌟 HSL 中的 S 和黑白无关,饱和度不控制颜色混入黑白的多少;
🌟 HSL 中的 L 控制颜色中混入黑白的量;
也就是说:
饱和度概念上,HSB 中的 S 可理解为 “颜色纯不纯”,而 HSL 中的 S 可理解为 “颜色是否鲜艳”。
明亮度的概念上,对 B 的形容是 “这个光亮不亮”,对 L 的形容则是 “这个光白不白”。
以上是个简单的概述,我们再结合一下两者的色彩模型进行细致的解释。
HSL的数学模型可以表示为双圆锥(两个圆锥从圆面上下合并),Y 轴为亮度,X 轴为饱和度,两个维度直观又独立。而 HSB的数学模型为圆锥,Y 轴代表明度,X 轴为饱和度,但是当饱和度 = 0% 时,颜色却是白色,这与我们认知的 “灰色” 是不相符的,反而是 HSL 的饱和度更符合我们的感知。并且两个维度的参数在调节过程中相互影响(举个栗子:明度 = 100% 时,为颜色本身而非白色,只有将 S 调整为 0%,才能得到白色)。这也就解释了本章节中的第一个问题 “同样都是 #FF000 红色,为啥两者的数值有区别呢?”。因为 HSB 中的明度最亮就是颜色本身,而 HSL 最亮等于白色。
大多数软件为了方便拾色,会将拾色器通过数学映射的方式设计成正方形。但问题在于,拾色器设计成正方形后,颜色点的分布是 “不均匀” 的,如果你尝试用正方形拾色器理解 HSB 模型,就很容易犯错误。若 HSB 的拾色器设置为三角形就很方便理解了,但有可能被软件开发者 “暴打” 哈哈哈。
这两个模型都是为了在颜色选择方面便于人机交互设计的,两者的优劣主要在使用者的理解倾向,软件使用场景或者对具体参数的要求上。鉴于 HSL 定义标准,并且 HSL 受 W3C 支持(CSS3 规定声称 “ HSL 的优点是它对称于亮与暗,而 HSB 就不是这样)。
2.2 两者的区别
把两者的优劣势以及区别总结在了下面,方便大家查看:
🌟 区别 1: 对于饱和度理解上,HSL 更优于 HSB;
🌟 区别 2: 对于明亮度理解上,HSL 的亮度可以理解为色彩的明暗程度(一个颜色最深为黑,最亮可为白),而 HSB 的明度可以理解为图像的明亮程度(图像最暗可为黑,而图像最亮就是图像自己本身);
🌟 区别 3: 对于有设置色彩规则的人来说,HSL 更优于 HSB ,(因为 HSL 更好的反应了 “饱和度” 和“亮度”两个独立参数的直观概念);
🌟 区别 4: H5 环境下,HSL 是可以被直接识别的,而 HSB 需要转化成其他色彩模式后才可被代码识别,但 Native 环境下两者是都可以直接使用的;
🌟 区别 5: 若具有 RGB 模式,又要服务印刷的平面的软件中,使用 HSB 更优(因为 S 代表颜色纯度,更符合画家的调色方式和对颜料认知。例如:Adobe 的 Photoshop 和 Illustrator 的默认调色参数都是 HSB)
🌟 区别 6: HSB 中的明度 B 是指光实际的多少,这种定义非常适合实际计算光照射的 3D 软件。在 3D 软件里调色工具使用 HSB 的占到很大比例,例如:3D 软件 Cinema 4D。
综上所示,从 UI 角度及业务使用场景下,优先支持 HSL 是更为合理的。
3.1 算色方法
这是一个自动抓取广告元素拼合成的 H5 应用详情页。旧版方案为无算色白背景方案,为了让页面氛围感更强,尝试将「算色方法」用在新版本中。
通过对已有的底部按钮颜色进行 HSL 调整,我们可以得到更多元素的颜色。例如背景色可以降低饱和度和亮度使其变深,文字提高亮度便于阅读。评分、标签等都可以设置不同的配色规则。
我们把新旧方案做了对比实验,事实证明带有色彩倾向或者较沉浸式的效果是能都带来转化的提升。最终新方案的实验结果:点击率、下载完成率、下载安装率都得到了显著提升。
3.2 深浅颜色的校验方法
上面的案例因为只需要处理一种背景色为深色的情况,所以相对简单。但是面对不同的客户,我们改如何处理呢?因为客户爸爸们的品牌色都不是统一的,所以一种模版很难满足所有客户的需求,比如白色文字的样式的模板在浅色系背景上就行不通了。
这里我们参考了 Web 内容可访问性指南(WCAG)2.1 中的建议准则。由于我们眼睛的运作方式,白色背景上的蓝色文字比黄色文字背景更容易阅读。更重要的是约有 2.17 亿人患有视力障碍。也就是说,我们在设计页面方案时始终要注意颜色之间的相对亮度对比度,这样可以确保更多的人(包括患有视力障碍的)更容易查看你的作品。
我们把页面中的文字比做前景元素,背景色比做背景元素。前景与背景的比值标准为 4.5 : 1,最低标准可为 3:1。只有满足最低 3:1 的比值,才能保证可读性(这里我们以 4.5 : 1 为参考对象)。
友情链接 - 对比值计算网站:https://contrast-ratio.com/#%23fff-on-%23000
对比值也叫亮度比,比值越大可读性越高。既然客户爸爸的品牌色不能改动,那我们改变页面中前景元素不就好了吗!?那问题又来了,怎么让机器判断品牌色是深色还是浅色呢?我们能不能用对比值 4.5:1 反推?
这里想到一个判断方法:
🌟 首先设定一个基础的前景色,默认为白色;
🌟 输入品牌背景色,通过对比值插件进行对比值计算;
🌟 若小于「4.5:1」则说明可读性低,因此可判断此背景色是一个偏向白色的浅色系;
🌟 若比值大于等于「4.5:1」则说明可读性没问题,可推断此背景色为一个不偏向白色的深色系;
🌟 再通过深 / 浅色系的结论,分别执行不同的方案(深色系背景 1 套方案,浅色系背景 1 套方案),最终保证比值大于等于「4.5:1」;
页面中所有元素颜色都是通过基础背景色调整得来的,下面我们来看具体案例:
调节的方式有很多种,可以调高、降低或者是固定,数值的调整主要是根据自己的需要设置的,并非只有一种调整方式。总得来说,我们可以在浅色系背景上将元素的明度调低,使元素颜色变深提高可读性。反之在深色系背景上提高明亮度让元素颜色变亮,拉开前景元素与背景色的对比值。
3.3 颜色的「轻」与「重」
看完上面两组案例,其实已经可以开始实操作了。但如果想更细致的处理「算色方案」可以继续往下看。举个栗子🌰,京东的红和美团的黄,如果都是用白色文字的话会什么不同?
在彩色上,不同颜色在视觉上给人的轻重感觉不一样,我们把这种现象称之为:不同色彩的轻重不同。而实际上,他们的亮度(L)是完全一样的。这里可以引申出一个概念「颜色的轻与重」。在实践之前,我们先来理解一下「有色系」与「无色系」。两者之间的差别是无色只受亮度(L)控制,而有色系会受到色相、饱和度、亮度三个维度控制。
可以将灰度视为亮度 (L) 的尺度值,如果将饱和度 (S) 调整为 0,我们看看会发生什么变化。
总的来说,为了解决色相(H)对应的明度、饱和度不同的问题,我们可以把色相(H)按明度划分。再结合不同的色相(H)度数做更加细分的处理。通用方案是所有的色相使用一种颜色配置规则。而细分方案是对不同度数的色相(H)进行了不同的设定。相比较而言,细分方案在细节处理上更胜一筹。因为黄色属于高明度,紫色属于低明度,若使用一套配色方案可能会在调整的过程出现一些差异,如下:
无论是按钮、文字、Banner 图,甚至是一个页面,可以都可以使用「算色方法」进行设计。我们可以结合对比值来判断颜色的属性,也可以将颜色的色阶划分出来做精细的规则设定。
面对大批量页面设计制作时,我们一定要找到解决的方法,「算色规则」就是一个很不错的提升效率的方式。以上关于颜色的思考与方法设定,希望对你们有所帮助。