文/ 阿里淘系 F(x) Team - 肆二
人眼与色彩模型
想要搞清楚不同色彩所带来的效果，我们首先需要了解人是如何如何捕捉和感知不同颜色的。
视锥细胞和光波
我们视网膜上有两类感光细胞：视杆细胞和视锥细胞。 视杆细胞与暗视觉有关，它能使我们在昏暗的光线中也能视物，但没有辨色功能。视锥细胞则刚好相反，对光线没那么敏感，但它却能帮助我们区分颜色。
我们都知道光是由不同波长的光波组成的。当光从物体上反射时，某些波长会被吸收，而另一些波长会反射到人的眼睛中。通过视锥细胞中的三种光感受器细胞（S锥，M锥和L锥），我们可以获得对于颜色的感知。这三种感光细胞中的每一个都对一定范围的波长敏感。比如M锥对于绿色就比L锥敏感的多，而S锥则几乎对绿色无感知。因此，我们对于颜色的感知是由这些视锥细胞受到光波刺激后，告诉我们的大脑，这是什么颜色，而并非是因为物理世界中有一种叫“紫色”或“淡粉”的光波。其实物理世界中所存在的颜色是比我们人类能感知到的颜色多得多的。
所以在视网膜内的视锥细胞的类型越多，可以看到的颜色就越多。而世界上有1％的男性没有L锥（也就是色弱或色盲），红色和绿色的光以相同的方式刺激他们剩余的视锥细胞，因此对于这些人来说，红色绿色就是相同的颜色。
让我们看看自然界中的动物都能看到几种颜色：
- 单色视觉系统Monochromats：所有的海洋哺乳动物、夜猴和澳洲海狮都是单色视觉，所以给鲸鱼看电视的话，黑白就够了
- 两色视觉系统Bichromats：绝大多数哺乳类动物（除了人类），都是双色视觉的，所以给猫猫狗狗看的电视两色就够了
- 三色视觉Trichromacy：灵长类哺乳动物和人类进化出了三色视觉系统
- 四色视觉Tetrachromats：许多鸟类，鱼类，两栖动物，爬行动物，昆虫和一些哺乳动物
世界上有少部分的女性是四色视觉者，想知道你是其中之一吗？可以试试打开这个B站视频测一测你是否能全部通过测试（记得关掉护眼模式哦）。所以如果你的女朋友要跟你滔滔不绝口红色号时，请相信她们是很有可能是真的能徒手分辨出几百种不同的色号呢~
要知道，大部分昆虫拥有五六种视锥细胞，一些甲壳类动物甚至拥有12种！所以在这些虫子的眼里，我们普通人类也都是色盲呢。
色盲用户眼中的世界
我国色弱人数大约为6000万，色盲人数为2000万。色盲发生率在我国男性约为5%～8%、女性0.5～1%。 其中约6%人口为三色视觉( 色弱 )，约2%人口为二色视觉( 色盲 )，极少数为单色视觉( 全色盲 )。对于色盲和全色盲我们现在就很好理解了，是因为视锥细胞中缺少某类光感受器。而色弱则是因为对某种颜色的分辨力较弱(光敏色素以异常的数量比配)。
一部分色盲色弱人群其实本身也有严重的视力缺陷，比如蓝锥体细胞性色盲的症状之一就是视力受损，以及畏光、严重近视。因此在颜色难以正常识别之外，这些视力缺陷的用户很可能正经历着更多常人无法体会的问题。
（一名蓝锥体细胞性色盲儿童在写字时不得不及其贴近桌面）
因此在我们平常做产品设计研发的时候，考虑到色彩使用对于这类障碍人群的体验是极为有必要的。 我们做了一个Sketch小插件，可以把一张画板渲染成每种色盲色弱眼中的样子，从而让设计师和研发同学可以了解到自己做出的产品在色彩设计上是否存在不够包容的部分。
通用的色彩模型
色彩模型是用于将颜色描述为值元组的数学模型。现代在印刷时常用到CMYK色彩模型, 在屏幕产品上常用到的色彩模型有:RGB, HSV和HSL.
在RGB模型中，三种基色 红色、绿色、蓝色所混合后可产生特定的颜色。 比如100%红色和绿色混合时产生黄色。在使用时我们将红色绿色和蓝色映射到3D空间中的x,y,z轴上，形成一个立方体。尽管RGB是大多数显示屏所采用的颜色模型，但对于人类来说却很不直观。因为我们对色彩的认识往往基于：这是什么颜色？鲜艳程度多少？亮度多少？从浅紫渐变到深紫色，将使用什么值？如何找到青色的互补色？RGB模型很难为我们带来直观的解答，因为人类不会将颜色视为红色，绿色和蓝色的混合光。
因此HSL/HSB(HSV)是基于RGB所改进的对于人类更加友好可拓展方便使用的色彩模型。HSL和HSV这两种色彩模型本质是一样的，但对于亮度/明度的定义有些不同：
- HSL：色相H(Hue) ，饱和度S(Saturation)，亮度L(Lightness)
- HSB(HSV)：色相H(Hue) ，饱和度S(Saturation)，明度B(Brightness) 或V(Value)
HSL和HSB中的H色相定义是完全一致的，但S饱和度不一样，L亮度和B明度也不一样：
- HSL中的S和黑白没有关系，饱和度不控制颜色中黑白的程度
- HSB中的S控制纯色中混入白色的量，值越大，白色越少，颜色越纯
- HSL中的L控制纯色中混入的黑白两种颜色
- HSB中的B控制纯色中混入黑色的量，值越大，黑色越少，明度越高
举个🌰，比如对于同样一个色值#FF5000，HSB的值和HSL的值分别是这样的：
值得注意的是，CSS里支持的是HSL，因此在取值时不要弄错了。
CIELAB则是由CIE(国际照明委员会)在1976年定义的绝对色彩空间，旨在作为感知上统一的空间，不设备依赖。 L* 代表感知的亮度，a_和b_代表人类视觉的四种独特颜色：红色、绿色、蓝色和黄色。人眼所能感知到的所有颜色都能在这张二维图中找到。每一组L_a_b*值定义了一个准确的颜色，尽管是一个抽象值，但在精确的显示设备以及合适的观测条件下，看起来就同所期望的一模一样。
而RGB或CMYK则是设备依赖的，同一RGB值在不同的显示器上看起来可能大不相同。通常在使用时需要转换到特定通用标准比如sRGB或Adobe RGB。
在实际应用中，PS中使用Lab模式调色则是非常顺滑和舒服的，因为它最符合我们人眼感知的模式。
让机器理解和生成色彩
对于智能设计，我们需要把设计师的经验转换成机器能理解的规则或样本。
考虑颜色使用习惯与语义的影响
很多颜色在特定的文化或领域中是有着特定语义的，比如一般情况下红色代表危险或者未达标，绿色代表安全或者合格。在不同领域或者国家，语义也会发生变化。在国内股票市场，红色代表上涨，绿色代表下跌；但国际股市是反的。所以机器也需要有对于应用的特定领域以及目标用户文化背景的理解。
在web发展至今，在很多功能组件中也形成了跨文化、跨地域、约定俗成的色彩使用习惯。比如对于成功、报错、失败、提醒、链接的提示，都有固定的色彩认知。
除了色彩的语义化，情感化也是影响色彩表达的重要方面。不同的配色方案会产生不同的情感暗示，这甚至会对信息的解读造成一定心理上的影响。因此在机器生成颜色的时候需要考虑在该领域下、文化中，选取特定颜色会有哪些语义和心理暗示。
元素尺寸对颜色的影响
元素的尺寸对于色彩饱和度的运用，以及对比度值都有着重要的影响。心理物理学里有一个叫“最小可觉差”的概念，是说人类或动物对于某一特定的感官刺激所能察觉的最小改变。在信息可视化中，需要根据图形面积大小来调整颜色的选取，从而可以清楚的区分两种信息的表达。Connor Gramazio做了一个可交互demo，可以看到在不同尺寸时，对于CIELAB色彩模型中各通道的影响程度。类似的，在计算UI元素对比度时，我们也需要看前景和背景的大小关系，在信息读取方面也就是说字号大小是直接影响最终对比度值的。关于字号的使用，之后会在智能设计字体篇里详细说到。
颜色生成方式
同色相：暗调Shade，明调 Tint，色调 Tones
Shade是把一种颜色和黑色混合后形成的混合颜色，用于降低该颜色的亮度 Tint是把一种颜色和白色混合后形成的颜色，这将增加该颜色的亮度 Tones色调是把一种颜色和灰色混合形成的颜色。色调通常比纯色显得更暗淡或柔和 以上3种调色方式都是将一种颜色和一种中立色（灰色，黑，白）混合，这将降低颜色的饱和度，但是hue色相不变。
在浅色和深色模式下所选取的浓度最好有所区分
多色相
一般来说在一个色环（首尾相接的彩色光谱）上，科学的颜色选择体系有如下几种选取方式：
- 互补色Complementary
这是在色谱上180°的对立色。在实际应用里除非是要造成非常强烈的视觉差异，一般用的比较少。
- 分隔互补Split complementary colors
比互补色张力略小，
- 邻近色 Analogous
自然统一的色系
- 三角色Triadic
- 矩形色Tetradic
最好是选取其中一个作为主色，其它为二级色
- 单色Monochromatic
在一种原色的基础上增加黑色或者白色来得到不同明度的变化色。
几种应用场景
皮肤生成
一个很实际的应用场景是：手淘有上亿使用换肤功能的用户，但所能换的部分只限于首页底部5个icon tab bar以及这5个页面的顶部nav bar，这显然与一般整站换肤的常规期望并不相符。那么假设一个页面上已经具备所有模块组件化可配置化的能力，当用户使用某种皮肤时，要如何根据皮肤的主题色生成并替换所有信息的颜色呢？
首先每种皮肤一定是有自己的主题色的，以“高冷蓝”为例，它的主题色为#3173E5 (H:218, S:79, B:90)。那么我们如何为顶部的搜索按钮、icon、下面的金刚区甚至整个页面上各种带有各种“业务心智品牌色”的元素都替换皮肤主题色呢？
比如天猫新品的猫头icon，是由渐变色(H:11,S:75,B:100 - H:347, S:100, B99)构成的，这时我们基于相同的S饱和度和B明度不变，把H色相转换为这个皮肤的主题色H值，也就是218，可以得到换肤后的icon。
这时肯定要有人跳出来说，那业务心智怎么办？这可是我们业务的主品牌色，需要给消费者传达一致的业务心智！这个问题其实就要看究竟我们是想做一个观感体验更佳的产品，还是说一些合理性有待讨论的业务主观诉求可以强迫体验让位。其实一个Icon的颜色跟随用户所选的皮肤变化是很合理的需求，因为单看一个红色猫头icon，也并不能知道这就是天猫新品。
我们在这里不过多讨论换肤到底要到什么程度才合理，这应该是相关产品和设计需要决策的。我们更关心对于这类应用场景的解决方案，可以通过变换Hue色相的方式去实现。从而可以让机器应用该规则实现自动生成新的设计。
无障碍方案生成
对于无障碍方案来说，一个核心的概念就是对比度需要达到一定值，否则会影响用户阅读信息。WCAG (Web Content Accessibility Guidelines) 互联网内容无障碍指南 2.0 里建议前景和背景的对比度至少需要达到 4.5 : 1 ， 即AA级。而加强版AAA级则需要做到7：1。如何检测对比度呢？有很多在线对比度检查器都可以做到，比如： Color review WebAIM CONTRAST CHECKER
以及Sketch里的Assistant也能直接得到结果：
那么在得到了对比度结果之后，我们要如何让机器实现自动校正呢？首先我们来看看“对比度”究竟是如何计算出来的：
对比度其实就是两种颜色的相对亮度比较值，计算公式为(L1 + 0.05) / (L2 + 0.05)，取值范围为1:1至21:1。L1是较浅颜色的相对亮度，L2是较深颜色的相对亮度。注意这里的相对亮度可不是HSL模型中的L，而是从最黑的0到最亮的白色1的归一化值。WCAG给出的计算方式是从RGB值转化的（因为这也是今天大部分web系统色彩编码的模型）：
For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 *R+ 0.7152 *G+ 0.0722 *B
whereR,GandBare defined as: if RsRGB<= 0.03928 thenR= RsRGB/12.92 elseR= ((RsRGB+0.055)/1.055) 2.4 if GsRGB<= 0.03928 thenG= GsRGB/12.92 elseG= ((GsRGB+0.055)/1.055) 2.4 if BsRGB<= 0.03928 thenB= BsRGB/12.92 elseB= ((BsRGB+0.055)/1.055) 2.4
and RsRGB, GsRGB, and BsRGBare defined as: RsRGB= R8bit/255 GsRGB= G8bit/255 BsRGB= B8bit/255
所以要让新的颜色满足对比度标准，只需要将前景或者背景色往下移动至AA(4.5)或AAA(7)以下就行了。
在业界已经有一些成熟的解决方案。比如，Chrome DevTools 在inspector内就提供了基于对比度标准的智能颜色推荐：
Leonardo是Adobe的一个可以基于输入主题颜色、可变基准色和预期对比度生成符合预期结果颜色的开源项目。
比如我们把背景当成主题颜色，前景当成可变基准色，在下例中，原本不符合对比度标准的UI则可以通过该计算方法得到符合AA和AAA标准的新色值。
因此在实际应用场景中，只需要根据对比度检查的结果，选定是变化前景色还是背景色（通常我们都选取前景文字或icon颜色），使用该计算方式生成符合AA或AAA的元素新色值就行了。
暗黑模式
当我们切到暗黑模式时，背景会从较亮的白色或浅灰，变为黑色或深灰。但大部分前景模块、元素却没有跟着变换颜色。这就会导致在很多情况下信息在深色背景上无法被看清。比如在下图内的灰色小方块，A和B的颜色看起来是不是很不一样？但通过拾色器我们就能发现，他们的色值都是#808080。我们被大脑欺骗的原因是即便同样的颜色，基于背景色的不同，给我们的感知也会发生变化。
在下图中，即便是同样的icon和文字颜色，甚至对比度也都差不多，但很明显在暗黑模式下的信息可见度是远不如正常白底UI的。这就要说到对比度检测中的坑了。
目前对比度的计算方式在大部分情况下是可以辅助我们去识别问题的，但在一些案例中由于算法的缺陷会出现虽然通过了对比度标准测试但人眼看起来并不太好阅读，或没有通过测试但实际阅读体验没有问题的情况（如下图所示）。这是因为人脑所感知的 Perceptual Contrast 和通过固定数学公式计算的结果是有区别的，上面的例子就能说明这个问题。
所以如果需要在暗黑模式下达到较好的体验，我们就需要将前景元素色值的亮度、饱和度都做一些变化调整。这也就需要我们在构建web设计系统的时候，是可适应可变化的。Leonardo的一个demo中就实现了从浅色模式到暗黑模式的整体自动色度变化。
根据用户所处的环境与行为渲染新的色彩方案
情绪常常会被周围的环境所影响，比如当天气十分炎热的时候，低饱和度和偏冷色调的颜色能够带来更愉悦的心境。或者处于紧张状态时，看到红色、橙色可能会让我们更紧张，而蓝色、绿色则能让我们平静和放松。因此如果我们能判断用户当前的季节、光照程度、所处地理环境，甚至是实时意图，就可以在UI上做出相应的色彩改变，做到更智能更体贴的产品用户体验。
打造一套智能设计生产的色彩系统
说了这么多姿势和应用场景，要如何创造一套在智能设计生产体系下能高效、灵活运用的色彩系统呢？
基础色板设计
通常对于系统化的建立一套品牌VI来说，我们会设计至少两层品牌色板：主色Primary colors, 副色 Secondary colors, 三级色（偶尔有） Tertiary colors 在UI设计系统里还会选取一系列中立色（黑白灰）作为线条、填充和文字的色板。此外还有一系列功能色（警告、提示、成功、错误、帮助等）。在强数据展示的产品里还会制定可视化的数据色。 另外不同颜色还有可能暗示了不同状态，比如一个按钮的背景我们可能会用不同浓度来表示禁用、按下等不同状态。
现存工具和方法
TinyColors.js提供了一系列同色相、多色相的色值计算生成的方法。Adobe color是为设计师提供颜色选取生成、图片生成色板、无障碍色模拟的利器。 ColorBox是Lyft设计师基于Json生成色板，也可以把新色板导出成Json并做成了NPM包的工具。 Ant design在渐变色板的生成上 先后尝试了用浓度tint/shade直接生成(1.x)、用贝塞尔曲线取主色值 根据冷暖色用HSL模型旋转色轮生成(2.x)，到今天3.x用HSV模型对H, S, V的三个值分别进行递减/递增。但仍然有一些对比度和不同色相在极度深浅情况下效果不一致的坑。详情 这些都是好的独立工具，但还没有看到太多应用到具体业务场景的案例。
工程化方法
首先基于设计系统管理(DSM) 和工程体系对接的Design Token方法，要有一套满足不同需求场景的、能够在不同语义情境中被快速运用的命名和定义规范。
一种比较科学的方式是，从最广泛的场景和语义开始定义全局色板色号，逐渐细化，逐级引用和命名，一直定义到特定的使用场景。
//无特殊语义的基准色板定义
purple100: rgb(184, 121, 240); // 淡紫色
purple200: rgb(159, 101, 208);
purple300: rgb(130, 80, 170); // 深紫色
//有一些基础语义
primaryBackgroundColor: $purple200; // 背景
primaryTextColor: $purple300; // 文字颜色
//具体场景
primaryButtonBackgroundColor: primaryBackgroundColor; // 主按钮背景色
primaryButtonQuietTextColor: primaryTextColor; // 主按钮文字颜色
复制代码
在这种命名规范下，我们只需要根据需求定义具体场景，找到基准色板，或根据规则生成新的色值，就可以拥有一套智能化、自适应的完整色彩系统了。这样任何一个基准色色变化都会应用到所有相关的组件和节点，是可规模化生成新UI主题的工程化基础。
作者：设计稿智能生成代码
链接：https://juejin.cn/post/6963824533782396965
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
随时随地看视频
