探索APP产品色彩

       最近老张一直着手于UI规范的研究，APP产品的UI规范自然少不了产品色，今天就来聊聊这个产品色的制定。（观点有理性也有感性，客官讲究看，嘻嘻）

       说起规范有很多参考，HIG 、谷歌的材料设计、还有语雀的阿里设计DNA也实属经典。阿里设计的DNA的色相选择是在色相环选择一种符合自己产品气质的色相205 93 91，通过HSB模式以15°旋转获得24个色相，从而获得一条完整的产品色带。

       如此一来 也就是说 H变化  S  和 B的值都是一样的！一样的！一样的！

       一样的会带来一些什么问题呢?听我娓娓道来…… 

       之前在李涛老师高高手的课程中了解过一个问题，就是不同色彩有着它固有的明度、纯度（这个维度暂时没有相关的公式，小伙伴有了解的告知下我）如下图：

       确实生活中我们会觉得黄色很刺眼，蓝色很暗沉。其实在PS中也有一个命令就是灰度模式可以查看这其中的奥义。

       那adobe称这个模式为HSP模式，P 在这里指颜色的亮度，和HSL模式的L类似。阿里设计DNA是依据HSB模式，HSB和HSL的区别在哪里呢，知乎上有关于这个问题最易懂的解释：

首先， HSB 和 HSV 是同一个东西，只是名称不同，本文后面仅使用 HSB，当提到它的时候，也代表 HSV。

HSB 和 HSL 在字面意思上是一样的：

• H 指的是色相（Hue），就是颜色名称，例如“红色”、“蓝色”；

• S 指的是饱和度（Saturation），即颜色的纯度；

• L（Lightness） 和 B（Brightness）是明度，颜色的明亮程度

在原理和表现上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（饱和度）不一样， L 和 B （明度 ）也不一样：

• HSB 中的 S 控制纯色中混入白色的量，值越大，白色越少，颜色越纯；

• HSB 中的 B 控制纯色中混入黑色的量，值越大，黑色越少，明度越高

• HSL 中的 S 和黑白没有关系，饱和度不控制颜色中混入黑白的多寡；

• HSL 中的 L 控制纯色中的混入的黑白两种颜色。

  
  

  先看 Photoshop 的 HSB 颜色模型拾色器，如下图所示，HSB 的 B（明度）控制纯色中混入黑色的量，越往上，值越大，黑色越少，颜色明度越高。
  

  
  

  

  HSB 的 S（饱和度）控制纯色中混入白色的量，越往右，值越大，白色越少，颜色纯度越高。

接下来看 Affinity Designer 的 HSL 颜色模型拾色器。如下图所示，Y 轴明度轴，从下至上，混入的黑色逐渐减少，直到 50% 位置处完全没有黑色，也没有白色，纯度达到最高。继续往上走，纯色混入的白色逐渐增加，到达最高点变为纯白色，明度最高。

注意这里的明度L 是按百分比的值给的，纯白为百分之百，纯黑为0。而HSP 里面的P是一个精准值。从亮度公式网页里得知亮度的计算公式为：

亮度= √（0.299 R ² + 0.587 G ² + 0.114 B ² ）

通过公式我们也可以发现这三个系数的和为1，而且 R和G 的值对亮度的影响更大一些，R+G等于黄，这也可以解释为什么黄色这么亮，而蓝色这么暗了。

而且通过这个公式我发现了这个亮度的值和LAB 模式下的L 的数值一个意思（一个是具体数值，0为黑255为白，一个是百分比）：

我们可以发现一些规律,S=100%、B=100%，我们可以获得该色相最纯粹的颜色，HSL的L一定是为百分之50，RGB加色模式从红里加绿得到黄的过程,G增大，亮度P（接下来称之为 P）也跟着增加，而：

P/255真是LAB里面L 的值

接下来我们来看一下RGB加色模式在规则色相变化中亮度P的变化规律,如下图：

得到的留个节点正好是我们熟悉的红绿蓝 青品黄，H 从0~60°亮度从54增加到98，从60~120°亮度从98减少到88，从120~180°亮度从88增加到91，从180~240°亮度从91减少到30，从240~300°亮度从30增加到60，从300~360°亮度从60减少到54。而且从数值表单里我们可以发现HSL中的L值没有变化一直为50%，色相变化，他的亮度也在变化。

说了这么多，回到我为什么要质疑阿里设计DNA的产品色带 S、B的值一样是不妥当的呢？

之前我在公式转换网页上看过一个公式：

也就是说HSL中的L受到HSB中的S和B变化而变化，支付宝的色值205 93 91，带进去得知L=48.6%。说实话目前我还不知道关于HSL中的L是怎么转化成LAB的L（有公式的小伙伴可以私聊我），接下来我要开始YY了。

最纯的黄HSL（60°，100%，50%）的亮度为98，把98分成50份，也就是说在50%以下的话每一份等于98/50，如果在50%之上的话，每一份为2/50。因此我们可以认为不同色相，每一份的值也不一样。所以支付宝定下S、B的值，亮度的变化是黄色（60°，93%，91%）比较（60°，100%，100%）减少的亮度值是最大的，蓝色减少的最少。

带来的结果是暗色的产品色更加暗（尽管它减少的比黄色少），就是所有的色相的亮度都在做减法

这是我不赞同的点。

接下来我来说一下我找产品色的一些想法：

五个维度

色相H

S

B

P亮度

对比度（wcag提及的色彩对比度，毕竟APP大多数背景都是白色的，目前暂未研究）

先说色相的选择吧，依然是依据HSB模式确定。以0°为起点，每15°获得一个标准色，比如最红的红色，最黄的黄色。但是我没有用这个值，而是偏移了6°（就好比男生的身高范围在165cm~230cm之间，但是你不希望自己230cm,你会希望自己180cm一样），为什么是6°（15-15*0.618）？没有为什么我只是用下黄金分割显得专业一点  嘻嘻。0.0 如下图：

但是偏移6度有顺时针和逆时针，直观感受告诉我顺时针对色相的影响更大一些，所以我选择了逆时针偏移6°得到了我的产品色相值：

接下来我要以亮度为主要依据调整S、B的值，适当的时候细微调整H来保证亮度值的均衡性，我的方法是取一个均衡值比如说60（之前试了一下50，有些色相很难调），最暗的蓝色低于60我就适当加多一点，最亮的黄色高于60我就适当减一点，举个例子,

我的暗产品色相蓝色（234，100%，100%）的亮度值为31，我需要的是把它的亮度值变成|31-60|*1/3+31=41

我的亮产品色相黄色（54，100%，100%）的亮度值为91，我需要的是把它的亮度值变成91-|91-60|*1/3=81

调整亮度，S是加白，B是加黑通过这些方式（适当时候可以动下H的细微变化）所以我得到了一下的产品色彩带：

接下来就是润色的感性工作了，把自己想象成普通消费者，把一些认知相同的颜色选出一个来（我删除了五个颜色两个蓝和三个绿色，还有一些色彩在细微的调整了一下），最终结果是十九个颜色：

第一次写文章，才发现自己的阐述能力有点吃力。客官讲究看吧。

物以载道，我是老张 peace。

下期见0.0