文/阿里涛系F(x)队-42
要了解不同颜色的效果，我们首先需要知道人们是如何捕捉和感知不同颜色的。
视锥细胞和光波在我们的视网膜中有两种类型的感光细胞：视杆细胞和视锥细胞。视杆细胞与黑暗视觉有关。它们能让我们在昏暗的光线下看清东西，但没有辨色功能。另一方面，视锥细胞对光不太敏感，但它们可以帮助我们区分颜色。
我们都知道光是由不同波长的光波组成的。当光线被物体反射时，一部分波长会被吸收，而另一部分会被反射到人的眼睛里。通过视锥细胞中的三种感光细胞(S视锥、M视锥、L视锥)可以得到对颜色的感知。这三种感光细胞中的每一种都对一定范围的波长敏感。比如M视锥对绿色的感知要比L视锥敏感得多，而S视锥对绿色几乎没有感知。所以，我们对颜色的感知是这些视锥细胞受到光波的刺激，告诉我们的大脑这是什么颜色，而不是因为物理世界中有一种叫“紫色”或“浅粉色”的光波。事实上，物质世界中的颜色比我们人类所能感知的要多得多。
所以视网膜上的视锥细胞越多，你能看到的颜色就越多。而世界上有1%的男性没有L锥(即色弱或色盲)。红光和绿光以同样的方式刺激他们剩余的视锥细胞，所以对这些人来说，红色和绿色是同一种颜色。让我们看看自然界的动物能看到多少种颜色：
单色：所有海洋哺乳动物、夜猴和澳大利亚海狮都有单色视觉，所以如果你看鲸鱼的电视，黑白就够了。双色：大多数哺乳动物(除了人类)都是双色的。所以猫狗用双色电视就够了。三色：灵长类哺乳动物和人类进化出了三色视觉系统。四色动物：许多鸟类、鱼类、两栖动物、爬行动物、昆虫和一些哺乳动物。世界上有一小部分女性是四色空想家。想知道你是不是其中之一？尝试打开这个哔哩哔哩视频，看看你们是否都能通过测试(记得关闭护眼模式)。所以如果你的女朋友想和你聊红色数字，请相信他们大概真的可以徒手分辨出上百种不同的颜色数字~要知道，大部分昆虫都有五六种锥细胞，有的甲壳动物甚至有12种！所以在这些虫子眼里，我们普通人类也是色盲。
在色盲用户眼中，中国约有6000万色弱人群，2000万色盲人群。我国色盲发病率男性约为5% ~ 8%，女性约为0.5 ~ 1%。大约6%的人有三色视觉(弱色)，大约2%的人有双色视觉(色盲)，少数人有单色视觉(色盲)。我们现在对色盲和色盲有了很好的了解，因为视锥细胞中缺乏某些光感受器。颜色弱是因为某种颜色的分辨率弱(感光色素比例异常)。
事实上，一些色盲和色弱的人有严重的视觉缺陷。例如，蓝锥细胞色盲的症状之一是视力受损、畏光和严重近视。所以，除了颜色识别的困难，这些视障用户很可能正在经历更多常人无法理解的问题。
患有蓝色锥体细胞色盲的儿童在书写时必须非常靠近桌面。
所以我们平时做产品设计和研究的时候，对于这类残疾人的体验，考虑色彩的运用是极其必要的。我们做了一个素描插件，可以把一个画板渲染成每个色盲和弱视者的样子，让设计师和R & ampd学生可以知道自己产品的色彩设计中是否存在一些包容性不足的部分。
颜色模型通用颜色模型是一种数学模型，用于将颜色描述为值元组。现代印刷中经常使用CMYK色彩模型，屏幕产品上常用的色彩模型有：RGB、HSV、HSL。在RGB模式中，红、绿、蓝三原色可以混合产生特定的颜色。例如，100%的红色和绿色混合时会产生黄色。在使用中，我们将红色、绿色和蓝色映射到3D空间中的x、Y、Z、Y和Z轴上，以形成立方体。虽然RGB是大多数显示器采用的颜色模型，但是对于人类来说并不直观。因为我们对颜色的理解往往是基于：这是什么颜色？有多亮？亮度多少？从浅紫色到深紫色，会用什么值？青色的补色怎么找？RGB模型很难给我们带来直观的答案，因为人类并没有把颜色看成是红绿蓝的混合光。
因此，HSL/HSB(HSV)是一种基于RGB的改进颜色模型，对人类更友好，可扩展，使用方便。HSL和HSV颜色模型的本质是相同的，但是亮度/明度的定义有些不同：
HSL:色相H(色相)，饱和度S(饱和度)，亮度l(亮度)HSB (HSV):色相H(色相)，饱和度S(饱和度)，亮度B(亮度)或v(值)。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模式是非常流畅舒适的，因为它最符合我们人眼感知的模式。
让机器理解并生成颜色。对于智能设计，我们需要将设计师的经验转化为机器能够理解的规则或样本。
考虑到颜色使用习惯和语义的影响，很多颜色在特定的文化或领域中有特定的语义。比如，一般来说，红色代表危险或不合格，绿色代表安全或合格。在不同的领域或国家，语义也会发生变化。在国内股市，红色代表上涨，绿色代表下跌；但国际股市却反过来了。所以机器还需要对具体的应用领域和目标用户的文化背景有所了解。网络发展至今，在很多功能组件中已经形成了跨文化、跨地域、约定俗成的色彩使用习惯。比如成功、报错、失败、提醒、链接提示都有固定的颜色认知。除了色彩的语义，情绪化也是影响色彩表达的一个重要方面。不同的配色会产生不同的情感暗示，甚至会对信息的解读产生一定的心理影响。所以机器在生成颜色的时候，需要考虑在这个领域和文化中选择一种特定颜色的语义和心理含义。
元素大小对色彩的影响元素的大小对色彩饱和度和对比度值的应用有重要影响。心理物理学中有一个概念叫“最小可感知差异”，是指人类或动物对某一特定感官刺激所能感知到的最小变化。在信息可视化中，需要根据图形区域的大小来调整颜色的选择，使两种信息的表达能够清晰地区分。Connor Gramazio做了一个交互演示，展示了CIELAB颜色模型中不同大小对每个通道的影响。同样，在计算UI元素的对比度时，我们也需要看看前景和背景的大小关系。在信息读取方面，即字体大小直接影响最终的对比度值。字体大小的使用将在后面的智能设计字体部分详细介绍。
颜色以相同的色调产生：暗色调、亮色调、色调。TonesShade是一种颜色与黑色混合形成的混合色，用来降低颜色亮度的Tint是一种颜色与白色混合形成的颜色，会增加颜色的亮度。色调色调是由一种颜色与灰色混合而成的颜色。通常，色调比纯色更暗或更柔和。以上三种配色方法都是用一种中性色(灰、黑、白)混合一种颜色，会降低颜色的饱和度，但色相的色相保持不变。
最好区分一下明暗模式下选择的浓度。
一般来说，多种色调在一个色环内(端到端色谱)，科学的选色系统有以下几种选色方法：
互补色这是色谱图上180的反色。在实际应用中，除非是为了造成非常强烈的视觉差异，一般用的比较少。
分离的分离互补色比互补色具有稍小的张力，
相邻颜色相似，自然统一的颜色系统
三字三元矩形色四元最好选择其中一种为主色，其他为副色。
单色将黑色或白色添加到原色中，以获得具有不同亮度的可变颜色。
几个应用场景皮肤生成一个非常实际的应用场景是，使用换肤功能的用户有几亿，但是能换的部分仅限于首页底部的五个图标标签栏和这五个页面顶部的导航条，这显然不符合大家对全站换肤的普遍预期。那么，假设一个页面已经具备组件化配置所有模块的能力，当用户使用某个皮肤时，如何根据皮肤的主题颜色生成和替换所有信息的颜色呢？首先，每种皮肤都要有自己的主题色。以“高冷蓝”为例，其主题色为# 3173E5 (H:218，S:79，B336090)。那么我们如何为顶部的搜索按钮、图标、下方的金刚区，甚至是整个页面上各种带有“商业头脑品牌色彩”的各种元素更换皮肤主题颜色呢？
比如天猫新推出的猫头图标，就是由渐变颜色组成的(H:11，S:75，B:100-H3360347，S:100，B99)。此时，基于相同的S饱和度和B亮度，我们将H色相转换为皮肤主题色的H值，即218。这时候肯定有人跳出来说，那商业头脑呢？这是我们业务的主要品牌色彩，需要向消费者传达一以贯之的经营理念！其实这个问题取决于我们是想做一个视觉体验更好的产品，还是合理性有待商榷的商家的一些主观诉求能迫使体验让步。其实一个图标的颜色随着用户选择的皮肤而变化是一个合理的需求，因为你不能光看一个红色的猫头图标就知道这是天猫新品。
这里不多讲换皮的合理程度，应该由相关产品和设计来决定。我们更关心的是这类应用场景的解决方案，可以通过改变Hue色相来实现。以便机器可以通过应用该规则自动生成新的设计。
方案生成对于无障碍方案，一个核心概念就是对比度需要达到一定的数值，否则会影响用户阅读信息。WCAG(网页内容可访问性指南)互联网内容可访问性指南2.0建议，前景和背景的对比度至少应为4.5 : 1，即AA级。增强的AAA级需要是7: 1。如何测试对比度？有很多网上的对比度检查器可以做到这一点，比如：色彩评论WebAimContrast Checker和Assistant in Sketch，也可以直接得到结果：
那么我们如何让机器在得到对比结果后自动校正呢？首先，我们来看看“对比度”是如何计算的：对比度其实就是两种颜色的相对亮度比较值。计算公式为(L1 0.05)/(L2 0.05)，取值范围为133601到2133601。L1是较浅颜色的相对亮度，L2是较深颜色的相对亮度。注意这里的相对亮度不是HSL模型中的L，而是从最暗的0到最亮的白1的归一化值。WCAG给出的计算方法是从RGB值转换而来的(因为这也是当今大多数web系统的颜色编码模型):
对于sRGB色彩空间，颜色的相对亮度被定义为L=0.2126 * R 0.7152 * G 0.0722 *其中，G被定义为：如果RsRGB=0.03928，则R=RS RGB/12.92 elseR=((RS RGB 0.055)/1.055)2.4如果GsRGB=0.03928，则G=GsRGB/12.92 elseG
因此，要使新颜色符合对比度标准，只需将前景色或背景色下移至AA(4.5)或AAA(7)以下即可。
业内已经有一些成熟的解决方案。例如，Chrome DevTools在inspector中提供了基于对比度标准的智能颜色推荐：
Leonardo是Adobe的一个开源项目，可以根据输入的主题颜色、可变的参考颜色和预期的对比度，生成符合预期结果的颜色。
比如我们把背景当做主题色，把前景当做可变参考色。在下面的示例中，没有达到对比度标准的UI可以通过这种计算方法获得符合AA和AAA标准的新颜色值。
因此，在实际应用场景中，只需要根据对比度检查结果选择是改变前景色还是背景色(通常我们选择前景色文字或者图标颜色)，用这种计算方法生成一个满足AA或者AAA的新元素颜色值即可。
黑暗模式当我们切换到黑暗模式时，背景会从亮白色或浅灰色变成黑色或深灰色。但是，大多数前台模块和元素都没有改变颜色。这就会导致很多情况下，在黑暗的背景下看不清信息。比如下图的灰色小方块，A和B的颜色看起来是不是差别很大？但是通过拾色器，我们可以发现它们的颜色值都是#808080。我们之所以会被大脑欺骗，是因为即使是同样的颜色，基于不同的背景颜色，也会改变我们的感知。
下图中，即使是同样的图标，文字颜色甚至对比度都差不多，但是很明显，深色模式下信息的可视性远不如正常的白色UI。这是关于对比度检测中的坑。
目前对比度的计算方法在大多数情况下可以帮助我们识别问题，但在某些情况下，由于算法的缺陷，虽然通过了对比度标准测试，但人眼看起来不太会阅读，或者实际阅读体验没有通过测试是没有问题的(如下图)。这是因为人脑感知到的感知对比和用固定的数学公式计算出来的结果是有区别的。上面的例子可以说明这个问题。
因此，如果我们需要在黑暗模式下实现更好的体验，我们需要对前景元素的亮度和饱和度进行一些改变和调整。这也要求我们在构建一个网页设计系统的时候，要有适应性和变化性。莱昂纳多的演示实现了从浅色模式到深色模式的整体自动色度变化。
根据用户的环境和行为来渲染新的配色方案，往往会受到周围环境的影响。比如天气很热的时候，饱和度低、色调偏冷的颜色能带来更愉悦的心情。或者在紧张的状态下，看到红色和橙色可能会让我们更加紧张，而蓝色和绿色可以让我们平静和放松。因此，如果我们能够判断用户当前的季节、光照强度、地理环境，甚至实时意图，就可以在UI上做出相应的颜色变化，实现更智能、更体贴的产品用户体验。
打造智能设计制作色彩体系说了这么多姿势和应用场景，如何在智能设计制作体系下，打造一个可以高效灵活使用的色彩体系呢？
基本色板设计通常，为了系统地建立一套品牌VI，我们至少会设计两层品牌色板：原色、二次色、三次色(偶尔)。在UI设计系统中，我们还会选择一系列中性色(黑、白、灰)作为线条、填充、文字的颜色面板。此外，还有一系列的功能颜色(警告、提示、成功、错误、帮助等。).视觉数据色彩也将在具有强数据显示的产品中开发。另外，不同的颜色也可能表示不同的状态，比如一个按钮的背景，我们可能会用不同的浓度来表示禁用、按下等不同的状态。
现有的工具和方法TinyColors.js提供了一系列计算和生成同色相和多色相的色值的方法。Adobe color是设计师选择和生成颜色、为图片生成色板、模拟无障碍颜色的强大工具。ColorBox是Lyft设计师基于Json生成色板的工具，也可以将新色板导出到Json，制作NPM包。蚂蚁设计曾尝试用tint/shade直接生成(1.x)，用贝塞尔曲线根据冷暖色用HSL模型旋转色轮生成(2.x)。今天3.x用HSV模型分别降低/增加H，S，V三个值。但是，仍然有一些坑的对比度和不同的色调在极端的深度不一致。这些细节是很好的独立工具，但我们还没有看到太多应用于具体业务场景的案例。
工程方法首先是基于连接设计系统管理(DSM)和工程系统的设计令牌方法，应该有一套命名和定义规范，能够满足不同的需求，能够在不同的语义情境下快速应用。更科学的方法是从最广的场景和语义定义全局色票号，逐步细化，一步一步引用命名，直到具体使用场景再定义。
//无特殊语义参考样本定义purple100: rgb(184，121，240)；//薰衣草紫2003360RGB (159，101，208)；purple300: rgb(130，80，170)；//深紫色//有一些基本语义PrimaryBackgroundColor : $ purple 200；//背景原色文字颜色： $ purple300//文本颜色//特定场景PrimaryButtonBackgroundColor : PrimaryBackgroundColor；//主按钮背景色为primarybuttonquiettextcolor 3360 primarytextcolor；//主按钮文字颜色在这个命名规范下，我们只需要根据需求定义具体的场景，找到基准色样，或者根据规则生成新的颜色值，就可以拥有一个智能的、自适应的完整颜色系统。任何这样的基准颜色变化都将应用于所有相关的组件和节点，这是大规模生成新UI主题的工程基础。
暂无讨论，说说你的看法吧
