编辑指南:当我们看到红色时，我们可以感受到热情、兴奋和危险。当我们看到绿色时，我们经常感到安全、自然和平静。可以说颜色只需要一瞬间就能唤起我们的情绪，它能在我们的记忆中停留更久。本文作者从五个维度对色彩系统进行了分析，希望对你有所帮助。

我在前面的原子设计中说过，原子是所有元素的最小单位，没有办法再细分。它通常对应于产品设计中的一般模式和组成组件的最小粒子。色彩作为整个设计系统中最重要的原子之一，在心智模型中占有关键地位。

当我们看到红色时，我们可以感受到热情、兴奋和危险。当我们看到绿色时，我们经常感到安全、自然和平静。可以说颜色只需要一瞬间就能唤起我们的情绪，它能在我们的记忆中停留更久。

接下来我结合公司目前的业务，CROV Dropshipping(以下简称DS)，对色彩系统进行探索，输出一套完整的配色方案。希望这次探索能给你一些启发。

一、商业背景

CROV DS是面向美国市场的在线一代平台(类似于阿里巴巴的一代业务)，属于跨境电商B2C行业。该平台帮助用户顺利开展电子商务，无需任何初始成本和备货，时间灵活可控，允许用户专注于销售本身。

第二，为什么我们需要色彩系统？

1.为了生意

目前CROV DS业务越来越复杂，但是辅助色的定义除了品牌色之外太武断了。而且随着业务场景的扩展，临时添加的颜色很容易在未知角落的画板中漏掉，导致一次性使用颜色的风险。(提示:一次性是我在上一篇文章中提到的设计，扔掉了，不可重复使用)

而且颜色本身的随意使用也导致研发成果的不一致，一个地方不同颜色的现象比比皆是。

因此，我们需要根据自己的业务特点，生产一套完善的色彩体系，使业务在色彩使用上达到基本一致。

2.对于设计师

我们设计师在定义颜色的时候，经常直接在调色板上取颜色，但是这种方法有很多缺点。

1)增加决策

很多设计师选择颜色的时候可能会出现这种情况。一会儿觉得颜色脏，一会儿又觉得颜色太刺眼，有时完美主义会带来麻烦，甚至需要很长时间才能得到满意的颜色。这种情况在多种颜色搭配时尤为严重。

其实这和不使用网格系统进行布局是一个道理(注意:网格系统是一种可以大大提高布局效率的方法，后面会讲到)。

调色板中的颜色选择范围接近无穷大。如果以HSB模式下的单个H、S、B作为最小单元，我们可以选择几百万个网格。因为颗粒太细(其实根本没有颗粒度)，我们往往被迫在选色上反复微调和尝试。

2)缺乏秩序和逻辑

调色板中直接选色主要取决于“直觉”的存在，相对感性。

例如，按钮的状态可以包括正常、悬停、按下、禁用等。如果只凭直觉自由调节亮度和饱和度，最终的配色缺乏内在的逻辑和秩序。

3)难以重复使用

对于背景工具和场景比较复杂的B端商家来说，颜色的使用往往比较广泛。如果没有一个完善的色彩体系，每次新的项目和商业场景需要使用新的色彩时，很难重用以前定义的色彩，这就导致了重新定义色彩的需要。而且这种相对主观的方法也难以令人信服，难以体现专业性。

如果设计师提前定义了一套色系，一方面只需要从相应的色板中选择，大大减少了设计决策。另一方面，颜色系统提供的不同颜色梯度也促进了各种需求和业务场景的重用。而且色彩系统充满了逻辑和秩序，所以从中选择的色彩是一样的，显著降低了设计师依赖“直觉”带来的主观性和不可控性。

3.如何创建颜色系统？

支付宝设计团队提到:

同色系为主导，多色搭配为辅助。

同色系是统一的色相，可以加深对品牌色彩的感知，使界面更有层次感，保持界面在色彩上的一致性；由于业务多样化，需要多色搭配作为补充；多色辅助色，又称功能色，可以设置不同的任务属性和情感表达；搭配中性颜色黑、白、灰，变化和层次更多。这两种配色可以通过主次和使用比例灵活应用于各种业务场景，具有很好的扩展性。

接下来，我以DS项目为例，探索色彩体系——

首先，所有的颜色模型都是用HSB模型统一的。正如蚂蚁设计的设计团队所说，这种模式有利于调整色彩时对色彩有明确的心理预期，便于团队沟通。

在这里，简单普及一下HSB模型。h表示色相，s表示饱和度，b表示明度。s控制与白色混合的颜色量。S值越高，混白量越少，颜色越“纯”。b控制与黑色混合的颜色量。B值越高，混黑量越少，颜色越亮(通俗的说分别代表亮区和暗区)。

1.品牌颜色

Crov Dropshipping基于其自由灵活的时间、兼职副业、低成本风险的业务特点，使得相应的用户群体越来越集中在年轻一代的e-tailer(线上零售商)身上。它们在我们的常规认知上不同于传统零售商(线下实体零售商)。大多数直销员都有自己的职业和工作，并以此为副业来赚取额外的钱。所以返老还童是这类用户群体的主要标签。

因此，我们采用高饱和度的紫色和蓝色作为crov dropshipping的品牌颜色。它的HSB值是(250，80，100)。

2.根据品牌颜色生成24色“丝带”

为了覆盖Crov DS本身复杂的前后业务场景，需要添加各种辅助色。我们要提取24种色调，所以每种色调在色环中的基本角度是15°直接通过360/24。

因此，在品牌色彩色相的基础上，在HSB 360色环中，正向和反向色相(H)分别为15，饱和度(S)和明度(B)保持不变，从而得到24色色环色带。

随后，从色带上的24种颜色中提取我们的颜色系统。

3.品牌颜色搭配同色

品牌色彩同色系是指根据品牌色彩的不同饱和度和亮度变化而产生的一组深浅不同的色彩。同色配色不仅传达了品牌，而且随着多个渐变的变化，可以适应和使用尽可能多的业务场景，也方便了多个信息的分层划分。

而相同颜色匹配的输出遵循antDesign发明的色调/阴影颜色系统算法。说人类语言，在颜色中加入一定比例的黑色或白色，更科学地生成色阶。

该算法可以在草图中直接可视化，方便设计人员直接生成所有颜色的色标。需要注意的是，亮色区(即上方水平取色区，其中S从0到100从白色过渡到纯色)和暗色区(右侧垂直取色区，其中B从100到0从纯色过渡到黑色)遵循两种不同的规则。具体规则如下:

当S饱和度变化时(亮色区)，S值随着S/5的结果值的增加而减小，B值随着(100-B)/5的结果值的增加而增加。我们品牌颜色的s和B分别是80和100，所以这里的两个增量分别是16和0。

亮色区下两级品牌颜色对应的HSB参数是(250，64，100)，(250，48，100)等等。

当B的亮度变化时(暗区)，S的值随着(100-S)/5的结果值的增加而增加，而B的值随着B/5的结果值的增加而减少。两个增量分别为4和20。

暗区品牌色下两种颜色对应的HSB参数是(250，84，80)，(250，88，60)等等。

根据这两个定义规则，推导出所有不同渐变的色阶，我们可以把它们作为品牌色彩的同一个色系。

4.定义辅助颜色

我们使用品牌色彩来传达品牌价值，也需要辅助色彩来满足多元化经营场景的需求，引导不同情感的用户，同时缓解单一主色带来的用户视觉疲劳。

辅助色的定义可以直接应用于品牌色衍生的24色“丝带”。通过色环的形式，我们可以快速得到品牌颜色的相似色、相似色、相邻色、中差色、对比色和补色。

结果如下:

首先，因为相差15的相近颜色和品牌颜色差别太小，色相对比弱，传输的调性太相近，直接传到这里。但是相邻颜色生成的粉色和青色在界面中基本不作为功能色使用，所以在这里也直接丢弃。

1)颜色相似

相似色是色差在30度左右的颜色，属于弱对比色。基于30种品牌颜色的色调，我们得到了相似的颜色。由于H280的色调相似度与品牌颜色相似，在色彩系统中需要一种典型的冷色调来覆盖一些场景，所以这里使用H220的颜色作为冷系统的辅助色。

2)中等颜色

中色是一种色相相差90度左右的颜色，属于中反差色。H340偏粉，和常规红区别太大。因此，基于支付宝的色相差不能超过15的辅助色彩校正原理，将H340的色相校正调整为H355。

3)对比色

对比色是一种色相相差120度左右的颜色，属于强对比色。最后，H130的调性和中色的H160太像了，应该直接丢弃。H10在调性上与H340类似，但可以发展为橙色，所以微调为同色进行色调修正。

4)互补色

补色是一种色相相差180度左右的颜色，属于高强度对比色。最后的H70是绿色，这里修正了色调，调整到了H55。

最后得到五种辅助色。但是这些辅助色不能直接使用，感觉亮度需要修正。

5.感觉亮度校正

感官亮度修正法来自支付宝设计团队，是确认辅助色的最后一个关键环节。每种颜色都有自己的“感官亮度”，即光度。品牌色彩的光度不一致，即辅助色，会导致明暗差别明显。因此，我们需要通过光度进行最终的颜色校正。

明度越高的灰色表示光度越高，明度越低表示光度越低。保持品牌色光度不变，我们微调其他辅助色。

我们只需要调整视觉差异明显的颜色。注意，不是所有的颜色都要调整到品牌颜色的感官亮度，这些数值只是参考。最后的修正还是要看我们的眼光！比如黄色的感官亮度很高，但是视觉比较温和，没有绿色那么刺激，所以基本不需要矫正。

最后，校正后的辅助颜色如下获得。蓝色、绿色、黄色和红色可以作为界面中的功能颜色，分别代表一般、成功、警告和错误状态。橙色则可以作为高亮类的提醒，比加粗高一级。

6.辅助色的同色匹配

与品牌颜色一样，色调/阴影规则用于推导具有不同渐变的所有辅助颜色的色阶。具体过程不再赘述~

7.定义文本颜色

CROV DS的文字颜色不是纯中性的颜色。我们加入一点品牌色彩，让文字呈现色彩倾向，增强页面的活力和青春，同时让界面更有吸引力，减缓B端产品长期使用的视觉疲劳。

具体方法是在#222、#555、#888、# b3b3b3三级中性文字颜色分别代表的色块上覆盖一层10%透明的品牌色。最终得到四个层次的文本颜色。当然也可以参考antDesign中通过透明度定义中性文字颜色的方法，不一定需要基于特定的颜色值。

四.WCAG无障碍测试

我们不得不承认，设计师定义的颜色在苹果电脑上看起来很棒，但这并不能代表所有的用户。可能用户里还有一部分人，显示器配置低，老。而且我们无法判断用户的使用环境，可能是在刺眼的阳光下，也可能是在昏暗的环境下。如果颜色没有经过可用性测试，在许多情况下会有体验降低的风险。

而wcag (Web内容可访问性指南)解决了这些障碍。WCAG的无障碍原则包括:可感知、可操作、可理解和稳健。

而颜色恰恰对应这种容易感知的无障碍原则。网站中的文本和图像应该有足够高的颜色对比度，使它们更容易被用户感知和识别。

WCAG彩色对比度无障碍的两个标准分别是【1.4.3规定:最低对比度标准】和【1.4.6规定:增强对比度标准】，分别对应AA和AAA。

AA级的定义是普通文本的视觉呈现与背景的对比度至少要达到4.5: 1，大文本与背景的对比度至少要达到3: 1

AAA级定义为:普通文字的视觉呈现与背景的对比度至少为7: 1，大文字与背景的对比度至少为4.5: 1

(这里的大文本表示≥18pt的常规文本或≥14pt的粗体文本)

这两个规定在大厂家的产品颜色标准中得到了广泛应用。

例如，MD规范中文本移动性标准中的数据是来自WCAG的1.4.3法规标准。

同样，无障碍acs指数和阿里巴巴不久前发布的B-Design中的WCAG，本质上是一样的。

动词 （verb的缩写）色彩对比验证

怎么才能验证自己的颜色符合这两个标准？

简单.直接去最后一个网站，https://contrast-ratio.com/#%23373247-on-%23fff

我们可以通过分别在背景和文本中输入颜色值来获得最终的对比度数据。比如我输入了白色和一级文字的颜色值，最后的12.28是两者的对比，这个，呃，达到了AAA标准。

在同一步骤中，分别测试了其他文本颜色的对比度(产品没有深色模式，这里只验证白色背景下的颜色对比度)，分别达到7.59、4.71和2.38。可以看出，除了2.38，其他文字颜色的对比度都符合最低可见度标准。

然而，WCAG指出，在某些特殊情况下，文本的最小对比度没有限制，这包括表单域的占位符。2.38对比度对应的文字颜色主要用于暗提示，这种情况可以忽略~

不及物动词最后

这是色彩体系初步探索的结束，但是长度原因不全面，比如渐变色彩，实际落地效果等等。另外，有些地方我也处于探索阶段，所以很多分析可能是不够的。文章仅供参考。

希望这篇文章对你有帮助。

参考文献:

蚂蚁设计调色板生成算法的进化

antdesign-颜色

色彩无障碍设计中的“对比”探索

用一个实际的项目帮助你掌握科学的UI配色方法

内部教程！支付宝设计规范超详细配色篇