color

基本概念

色彩模型

Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。

系统级色彩体系

Ant Design 系统级色彩体系同样源于「自然」的设计价值观。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。

RGB

RGB 就是我们对颜色的一种标准化，通过红蓝绿三个基础颜色，通过对它们进行不同的 叠加混合 产生其它的颜色，这三种颜色也是产生其它颜色的三基色，能够组成我们所有见过的颜色，根据每一个的比例不同产生的各种各样的颜色系统就是常说的 RGB。

**从 0 开始到 255，这都是一个亮度三个颜色有三个 256 亮度，**这其中的 0 不想是我们生活中似的可以忽略不计，这也是一个亮度，每一种基色都有 256 种亮度所以它们的组合颜色数就是 256 的三次方，大约是 1678 万种颜色，所以我们也一般称为千万色。

有时候也称之为 24 位色，就是指 2 的 24 次方，它们存在的越多那么我们看到的世界的颜色也就越真实，像是 白色在电脑上的组成就是 255.255.255，相对的黑色就是 0.0.0 这是在电脑上颜色数值代码。

色阶

8 位色阶就相当于把 0-1 分为了 256 份

10 位就分的更细，这就是所谓的色阶。

这里就要知道，红绿蓝相加不一定为白，只有最亮的红绿蓝相加才是白，否则是不同亮度的灰色。

RGB 色环

色环就是根据 RGB 加色配比制成的色彩环形图。

简单的色环图不考虑色彩饱和度和亮度

看图（注意 颜色**位置）：**红绿等比混合是黄色，红蓝等比混合是洋红。绿蓝等比混合是青色。前面讲到红绿蓝等比相加是白色（也就是中间位置）

红蓝 2：1 时，颜色会偏红，因此是粉红。（看比例和位置）

红绿 2：1 时，同样会偏红，因此是橙色。

蓝绿 2：1 时，青蓝。

绿蓝 2：1 时，青绿。

到这里应该能看懂配比规律！请朗读色环，并背诵色环！（调色必备）

RGB 色环的应用

知道了色环，就知道了怎么调色了！！！比如，我们想把纯红色，也就是 RGB 为 255.0.0 的红色，调成黄色。

看色环，加绿色就可以！一比一配比，+255 的绿色。

如果要调成橙色，就是 1/2 的绿色的量，也就是 128。

举一反三，如果调成紫色、洋红、粉红怎么调。

现在要将红色变为青色，如何做？做法一：青色由蓝 + 绿组成，没有红色

因此，减红，加蓝 + 绿，即可。

你也可以这样理解，做法二：现在只有红色，再加入绿和蓝，变为白色。

此时，再加入青，即可，青有绿和蓝两个原色组成，也就是加入绿和蓝。

（这两种涉及到 相对，绝对 的概念，这个日后在讲）

还有一个非常重要的知识！（此处可能较难，请细品！）前面讲到：① 红 + 蓝 + 绿=白

② 蓝 + 绿=青所以：红 + 青=白

红=白 - 青

青=白 - 红

所以，减少青色时，红色会增加。

减少红色时，青色会增加。（看色环位置）得出结论，当色环的颜色的位置处于 180° 时，减少一方的色，相当于加另一方的色。

不理解，下面还有！先上色环

前面讲到，红 + 绿=黄

是不是可以推出，橙 + 青绿=黄绿、黄 + 青=绿也就是任意处于 120° 位置两个颜色相加等于中间位置的色（你可以自己去证明怎么推出来的）

前面讲到，红绿 2：1 时，会偏红，因此是橙色。

也就是说:1 红色中加入 1/2 的绿色是橙色。依据刚刚的结论: 洋红 + 黄=红，（任意处于 120° 位置两个颜色相加等于中间色）1/2 洋红 + 黄=橙（依据比例关系）

同时看上两个公式：是不是等于红色减去 1/2 洋红

所以得出结论，减洋红等于加绿在得出更结论，当色环的颜色的位置处于 180° 时，减少一方的色，相当于加另一方的色。数学老师曾说，不理解就把公式背下来。

总结

任意处于 120° 位置两个颜色相加等于中间色 可以说 任意位置两个颜色相加等于中间色！！！任意处于 180° 位置的两个颜色，减少一方的色，等于加 另一方的色。任意几个颜色相加，只要这几个颜色之间位置角度总和为 360°，结果都为 白色，或者灰色（灰色是不同亮度的白）。

比如给出的色环图所有颜色相加一定是白色！

比如青 + 洋红 + 黄=白色

比如橙 + 粉红 + 青=白色

比如黄 + 绿 + 洋红 + 蓝=白色前面可以看不懂，但结论一定要记住。

以上仅为后期色彩的规律，并不完全代表物理光线色彩原理

几何表示

RGB 颜色模型映射到一个立方体上。水平的 x 轴代表红色，向左增加。y 轴代表蓝色，向右下方向增加。竖直的 z 轴代表绿色，向上增加。原点代表黑色，遮挡在立方体背面。

颜色通常都是用三种成分来定义的，不仅 RGB 颜色模型是这样，其它比如 CIELAB 和 YUV 也是如此。于是便采用三维空间来进行描述，把三种成分的数值当做欧几里得空间中普通笛卡尔坐标系的坐标值。在 RGB 模型中使用 0 到 1 之间的非负数作为立方体的坐标值，将原点（0,0,0）作为黑色，强度值沿坐标轴方向递增到达位于对角线（1,1,1）处的白色。

一个 RGB 组合（r,g,b）表示代表一个给定颜色的点在立方体内部、表面或者边上的三维坐标。这种表示方法使得在计算两个颜色相近程度时只需简单计算它们之间的距离：距离越短颜色越接近。

HSL和HSV

HSL 和 HSV 都是一种将 RGB色彩模型中的点在圆柱坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。

HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
明度（V），取 0-100%。

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

色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
亮度（L），取 0-100%。

这两种表示在目的上类似，但在方法上有区别。二者在数学上都是圆柱，但 HSV（色相、饱和度、明度）在概念上可以被认为是颜色的倒圆锥体（黑点在下顶点，白色在上底面圆心），HSL 在概念上表示了一个双圆锥体和圆球体（白色在上顶点，黑色在下顶点，最大横切面的圆心是半程灰色）。注意尽管在 HSL 和 HSV 中“色相”指称相同的性质，它们的 饱和度 的定义是明显不同的。