中台设计语言-色彩

目录

1.认知色彩模型

1.1 RGB色彩模型

1.2 HSV色彩模型

1.3 HSL色彩模型

1.4 LAB色彩模型

2.Ant Design色版历程

2.1 Ant Design 1.0

2.2 Ant Design 2.0

2.3 Ant Design 3.0

3.建立色彩体系

3.1 色环建立色相

3.2 高光阴影模型建立色阶

3.3 颜色的选用-色彩空间

4.无障碍指南

4.1 Web Content Accessibility Guidelines(WCAG)值

1.认知色彩模型

颜色模型是将色谱可视化为多维模型的。而色彩空间是按照一定约束下排列而成的空间，在一个色彩模型下可以有不同的色彩空间，它们根据排列的条件的不同会有不同的色域（所能表示色彩的范围）和含义，色彩模型只有具体到一种色彩空间上才有实用性。

简要总结，色彩模型是人们描述色彩的方式，而色彩空间是人们根据色彩模型来准确定义色彩的一个环境。

1.1 RGB色彩模型

RGB颜色模型又称三原色光模式（RGB color model）或红绿蓝颜色模型，是一种加色模型，将红（Red）、绿（Green）、蓝（Blue）三原色的色光以不同的比例相加，以合成产生各种色彩光。

这些颜色就定义了一个色彩空间。我们将品红色的量定义为X 坐标轴、绿色的量定义为Y坐标轴、蓝色的量定义为Z坐标轴，这样就得到一个三维空间模型。 

 

   

红绿蓝的三原色光显示技术广泛用于电视和计算机的显示器，利用红、绿、蓝三原色作为子像素组成的真色彩的像素。三种原色光在每一象素中以0-255 (28)强度组合成从全黑色到全白色之间各种不同的颜色光，当前在计算机硬件中采取每一象素用24比特（比特）表示的方法，所以三种原色光各分到8比特，每一种原色的强度依照8比特的最高值28分为256个值。用这种方法可以组合16777216种颜色。

1.2 HSV色彩模型

HSV即色相、饱和度、明度（英语：Hue, Saturation, Value），Hue（色调、色相）Saturation（饱和度、色彩纯净度）Value（明度），又称HSB，其中B即英语：Brightness。

面这个圆柱体来表示 HSV 颜色空间，圆柱体的横截面可以看做是一个极坐标系 ，H 用极坐标的极角表示，S 用极坐标的极轴长度表示，V 用圆柱中轴的高度表示。

 

 

HSV 圆柱体的半边横截面（Hue=60） 水平方向表示饱和度，饱和度表示颜色接近光谱色的程度。饱和度越高，说明颜色纯度越高，越接近光谱色饱和度越低，说明纯度越低。饱和度为0表示纯白色。取值范围为0～100%，值越大，颜色越饱和。 

竖直方向表示明度，决定颜色空间中颜色的明暗程度，明度越高，表示颜色越明亮，范围是 0-100%。明度为0表示纯黑色。

在数学上都是圆柱，但HSV在概念上可以被认为是颜色的倒圆锥体。 通俗理解就是明度越低，色域越窄，尤其是明度为0时，颜色只有一个纯黑色。

1.3 HSL色彩模型

HSL即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）Hue（色调、色相）Saturation（饱和度、色彩纯净度）Lightness（亮度）

HSL 和 HSV 的区别就是最后一个分量不同，HSL 的是 light(亮度)，HSV 的是 value(明度)。

HSL中的 L 分量为亮度，亮度为100，表示白色，亮度为0，表示黑色；HSV 中的 V 分量为明度，明度为100，表示光谱色，明度为0，表示黑色。HSL纯度最高的色环L为50，而HSV纯度最高的色环V为100。

在数学上都是圆柱，但HSL在概念上可以被认为是颜色的双圆锥体。 

HSL的亮度和HSV的明度是有一定区别的，如下表，亮度L值是由黑变纯度再到白的。而明度V值是由纯度过度黑。 

1.4 LAB色彩空间模型

Lab色彩空间（英语：Lab color space）是颜色-对立空间，带有维度L表示亮度，a和b表示颜色对立维度，基于了非线性压缩的CIE XYZ色彩空间坐标。

 

Lab颜色模型是一种基于生理特征的颜色模型。Lab是由一个亮度通道（channel）和两个颜色通道组成的。在Lab颜色空间中，每个颜色用L、a、b三个数字表示，各个分量的含义是这样的： - L*代表明度，取值0~100 - a*代表从绿色到红色的分量 ，取值-128~127 - b*代表从蓝色到黄色的分量，取值-128~127

这样规定是根据人类的视觉原理，灵长类动物的视觉都有两条通道：红绿通道和蓝黄通道，大多数动物最多只有一条通道，如果有人缺失其中一条，就是我们所说的色盲。

在L*a*b* 模型中均匀改变对应在感知颜色中的均匀改变。所以在L*a*b* 中任何两个颜色的相对感知差别，可以透过把每个颜色看成（有三个分量：L, a, b 的）三维空间中一个点，并计算在它们之间的欧几里得距离。在Lab 空间中的这个欧几里得距离是ΔE，也就得到两个颜色之间差值。

 通过对色彩之间的直线距离的计算，我们便可以非常直观的看到两个颜色的差值，也就是相应的“色彩感知距离”。

通过计算颜色之间在坐标系里的相对距离，从而换算出的色彩差值，理论上差值越大，辨识度越高。

2.Ant Design色版历程

2.1 Ant Design 1.0 色阶

Ant Design Colors提供了一套Primary Color，并介绍了每种颜色的含义，色板由9种基本色彩组成，每种基本色又衍生出九宫格色板，通过在基础颜色上叠加黑白图层的方式实现色彩明暗的效果。

 其色彩系统算法

选取一个主色作为5号色，将主色与纯白色（#fff）混合，主色与纯白色之间分成100份，20/40/60/80的位置分别分割，得到4/3/2/1号色。

再将主色5号色与纯黑色（#000）混合，主色与纯黑色之间分成100份，20/40/60/80的位置分别分割，得到6/7/8/9号色。通过以上方式得到一条完整渐变色板。 

色彩换算工具：https://1x.ant.design/docs/spec/colors

2.2 Ant Design 2.0 色阶

1.0的算法有个弊端，大自然中并没有纯白或者纯黑的物体，所以颜色过渡不自然。经过设计师和程序员的精心调教，结合了色彩加白、加黑、加深，贝塞尔曲线【在源码中我看到了获取贝塞尔曲线的四个参数为 (0.26, 0.09, 0.37, 0.18)】，以及针对冷暖色的不同旋转角度，得出一套色板生成算法。使用者只需指定主色，便可导出一条完整的渐变色板。 

Ant Design 2.0 的色板由 8 种基本色彩组成，每种基本色（6号色）又按上述算法衍生出 10 种渐变色。 

色彩换算工具：https://2x.ant.design/docs/spec/colors-cn

2.3 Ant Design 3.0 色阶

基于2.0版本的算法，过于复杂，且迭代算法也比较难更新，所以3.0的色板重新从轻量明确简单的角度出发，重新调整算法。相对于第二版，增加了几种主色，整个色板的饱和度更高，不再使用贝塞尔曲线。

使用了HSB模型：此版本没有继续使用与某个浅色/深色值进行混合的形式获取渐变色板，而是直接用HSB模型的值进行递减/递增得到完整渐变色板。

通过对比3个色板的迭代色阶，能很明显的看出其区别。 

3.建立色彩体系

品牌色是体现产品特性和传播理念最直观的视觉元素之一，定义一套有先进性的色阶，不仅能提升工作效率，同时也是品牌价值观的体现。

3.1 色环建立色相

按照RGB色彩模型正方体的角点色色相差异性最大，去除黑白不算，总共6个色彩颜色，在选取相对色相差异较大的中间色，如蓝（255，0，0）和黄（255，255，0）的中间色橙色（255，128，0）。像这样共建立相对色相差异较大的12个色卡颜色。

设计师都习惯于使用色环表示，下图是色环上的样子，就相当于色环上每隔30选区一个颜色。为了保证色彩体系特征性，对色环进行旋转（根据个人对颜色的理解），确认色相后，再调整饱和度Saturation、明度Brightness。建立的12个基础色板如下图。

 

3.2 高光阴影模型建立色阶

确定好基础颜色后，基于HSV模型，对颜色的深浅色阶进行扩赞，通过Tint&Shade Generator可快速生产色阶表。

以500号色为基础色，拓展其衍生色，12个主色+其衍生色，共计120个颜色，这些颜色基本满足设计中对颜色的需求。

Tint&Shade Generator的基本推倒公式是：基准色500往浅色拓展时，100、200、300、400色值饱和度的S以S0/5递减，明度B以 （100-B0）/5递增；50色值饱和度的则是以S0/10减少，明度则是以（100-B0）/10增加；基准色500往深色拓展时，600、700、800、900色值饱和度S以（100-S0）/5递增，明度B以B0/5递减。

 

3.3 颜色的选用-色彩空间

当我们面临需要选取取多个颜色，甚至更多数量的时候，在没有专业设计师辅助的情况下，就往往比较难去具体操作，颜色数量越多，越不容易辨别；因此，我们是不是可以用一个更科学的方式，量化“辨识度”这个指标，帮助我们更好去使用我们的色板，做到默认即优的效果。

基于LAB色彩空间模型，它是人眼感知最为均衡的一个色彩空间模型，符合人眼感知系统，通过色相、饱和度、亮度为视觉通道去描述颜色的一个色彩空间，同时可被定性、定量。

把两个颜色“L”“a”“b”进行计算，得到欧几里得距离也就是色彩差值，那我们已经知道了距离越远差异度越大这个点了，反问，人眼最小可辨识的感知距离，这个阈值是多少呢？

 

当色彩差值值小于30时，两个颜色辨识度过于相近，不建议使用，当色彩差值大于120时，两个颜色辨识度过于大，会导致对比度过于强力，阅读舒适感下降，也不建议使用。

 

4.无障碍指南

4.1 Web Content Accessibility Guidelines(WCAG)

Web内容无障碍指南（WCAG）2.1涵盖了使Web内容更易于访问的各种建议。遵循这些准则将使更多残疾人更容易获取网站内容，其中包括失明和弱视、耳聋和听力丧失、运动受限、言语障碍、光敏性和多种残疾组合的残疾人，以及有学习障碍和认知局限的残疾人; 但不会满足这些残疾用户的所有需求。这些准则旨在解决台式机，笔记本电脑，平板电脑和移动设备上的Web内容的无障碍问题。遵循这些准则通常也会使网站内容对用户更有用。

简单的说我们的色彩要遵守 WCAG 2.0 的标准，保证足够的对比度，让色彩更容易被视障（色盲）用户识别。（参考校对工具：https://contrast-ratio.com/#%23454545-on-%23fff）

WCAG2.0中要求：

文本视觉呈现以及文本图像至少要有4.5:1的对比度；

大号文本以及大文本图像至少有3:1的对比度。