最近老張一直著手于UI規(guī)范的研究，APP產(chǎn)品的UI規(guī)范自然少不了產(chǎn)品色，今天就來聊聊這個產(chǎn)品色的制定。（觀點(diǎn)有理性也有感性，客官講究看，嘻嘻）

       說起規(guī)范有很多參考，HIG 、谷歌的材料設(shè)計(jì)、還有語雀的阿里設(shè)計(jì)DNA也實(shí)屬經(jīng)典。阿里設(shè)計(jì)的DNA的色相選擇是在色相環(huán)選擇一種符合自己產(chǎn)品氣質(zhì)的色相205 93 91，通過HSB模式以15°旋轉(zhuǎn)獲得24個色相，從而獲得一條完整的產(chǎn)品色帶。

       如此一來 也就是說 H變化  S  和 B的值都是一樣的！一樣的！一樣的！

       一樣的會帶來一些什么問題呢?聽我娓娓道來…… 

       之前在李濤老師高高手的課程中了解過一個問題，就是不同色彩有著它固有的明度、純度（這個維度暫時沒有相關(guān)的公式，小伙伴有了解的告知下我）如下圖：

       確實(shí)生活中我們會覺得黃色很刺眼，藍(lán)色很暗沉。其實(shí)在PS中也有一個命令就是灰度模式可以查看這其中的奧義。

       那adobe稱這個模式為HSP模式，P 在這里指顏色的亮度，和HSL模式的L類似。阿里設(shè)計(jì)DNA是依據(jù)HSB模式，HSB和HSL的區(qū)別在哪里呢，知乎上有關(guān)于這個問題最易懂的解釋：

首先， HSB 和 HSV 是同一個東西，只是名稱不同，本文后面僅使用 HSB，當(dāng)提到它的時候，也代表 HSV。

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

• H 指的是色相（Hue），就是顏色名稱，例如“紅色”、“藍(lán)色”；

• S 指的是飽和度（Saturation），即顏色的純度；

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

在原理和表現(xiàn)上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（飽和度）不一樣， L 和 B （明度 ）也不一樣：

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

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

• HSL 中的 S 和黑白沒有關(guān)系，飽和度不控制顏色中混入黑白的多寡；

• HSL 中的 L 控制純色中的混入的黑白兩種顏色。

  
  

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

  
  

  

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

接下來看 Affinity Designer 的 HSL 顏色模型拾色器。如下圖所示，Y 軸明度軸，從下至上，混入的黑色逐漸減少，直到 50% 位置處完全沒有黑色，也沒有白色，純度達(dá)到最高。繼續(xù)往上走，純色混入的白色逐漸增加，到達(dá)最高點(diǎn)變?yōu)榧儼咨鞫茸罡摺?/p>

注意這里的明度L 是按百分比的值給的，純白為百分之百，純黑為0。而HSP 里面的P是一個精準(zhǔn)值。從亮度公式網(wǎng)頁里得知亮度的計(jì)算公式為：

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

通過公式我們也可以發(fā)現(xiàn)這三個系數(shù)的和為1，而且 R和G 的值對亮度的影響更大一些，R+G等于黃，這也可以解釋為什么黃色這么亮，而藍(lán)色這么暗了。

而且通過這個公式我發(fā)現(xiàn)了這個亮度的值和LAB 模式下的L 的數(shù)值一個意思（一個是具體數(shù)值，0為黑255為白，一個是百分比）：

我們可以發(fā)現(xiàn)一些規(guī)律,S=100%、B=100%，我們可以獲得該色相最純粹的顏色，HSL的L一定是為百分之50，RGB加色模式從紅里加綠得到黃的過程,G增大，亮度P（接下來稱之為 P）也跟著增加，而：

P/255真是LAB里面L 的值

接下來我們來看一下RGB加色模式在規(guī)則色相變化中亮度P的變化規(guī)律,如下圖：

得到的留個節(jié)點(diǎn)正好是我們熟悉的紅綠藍(lán) 青品黃，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。而且從數(shù)值表單里我們可以發(fā)現(xiàn)HSL中的L值沒有變化一直為50%，色相變化，他的亮度也在變化。

說了這么多，回到我為什么要質(zhì)疑阿里設(shè)計(jì)DNA的產(chǎn)品色帶 S、B的值一樣是不妥當(dāng)?shù)哪兀?/b>

之前我在公式轉(zhuǎn)換網(wǎng)頁上看過一個公式：

也就是說HSL中的L受到HSB中的S和B變化而變化，支付寶的色值205 93 91，帶進(jìn)去得知L=48.6%。說實(shí)話目前我還不知道關(guān)于HSL中的L是怎么轉(zhuǎn)化成LAB的L（有公式的小伙伴可以私聊我），接下來我要開始YY了。

最純的黃HSL（60°，100%，50%）的亮度為98，把98分成50份，也就是說在50%以下的話每一份等于98/50，如果在50%之上的話，每一份為2/50。因此我們可以認(rèn)為不同色相，每一份的值也不一樣。所以支付寶定下S、B的值，亮度的變化是黃色（60°，93%，91%）比較（60°，100%，100%）減少的亮度值是最大的，藍(lán)色減少的最少。

帶來的結(jié)果是暗色的產(chǎn)品色更加暗（盡管它減少的比黃色少），就是所有的色相的亮度都在做減法

這是我不贊同的點(diǎn)。

接下來我來說一下我找產(chǎn)品色的一些想法：

五個維度

色相H

S

B

P亮度

對比度（wcag提及的色彩對比度，畢竟APP大多數(shù)背景都是白色的，目前暫未研究）

先說色相的選擇吧，依然是依據(jù)HSB模式確定。以0°為起點(diǎn)，每15°獲得一個標(biāo)準(zhǔn)色，比如最紅的紅色，最黃的黃色。但是我沒有用這個值，而是偏移了6°（就好比男生的身高范圍在165cm~230cm之間，但是你不希望自己230cm,你會希望自己180cm一樣），為什么是6°（15-15*0.618）？沒有為什么我只是用下黃金分割顯得專業(yè)一點(diǎn)  嘻嘻。0.0 如下圖：

但是偏移6度有順時針和逆時針，直觀感受告訴我順時針對色相的影響更大一些，所以我選擇了逆時針偏移6°得到了我的產(chǎn)品色相值：

接下來我要以亮度為主要依據(jù)調(diào)整S、B的值，適當(dāng)?shù)臅r候細(xì)微調(diào)整H來保證亮度值的均衡性，我的方法是取一個均衡值比如說60（之前試了一下50，有些色相很難調(diào)），最暗的藍(lán)色低于60我就適當(dāng)加多一點(diǎn)，最亮的黃色高于60我就適當(dāng)減一點(diǎn)，舉個例子,

我的暗產(chǎn)品色相藍(lán)色（234，100%，100%）的亮度值為31，我需要的是把它的亮度值變成|31-60|*1/3+31=41

我的亮產(chǎn)品色相黃色（54，100%，100%）的亮度值為91，我需要的是把它的亮度值變成91-|91-60|*1/3=81

調(diào)整亮度，S是加白，B是加黑通過這些方式（適當(dāng)時候可以動下H的細(xì)微變化）所以我得到了一下的產(chǎn)品色彩帶：

接下來就是潤色的感性工作了，把自己想象成普通消費(fèi)者，把一些認(rèn)知相同的顏色選出一個來（我刪除了五個顏色兩個藍(lán)和三個綠色，還有一些色彩在細(xì)微的調(diào)整了一下），最終結(jié)果是十九個顏色：

第一次寫文章，才發(fā)現(xiàn)自己的闡述能力有點(diǎn)吃力。客官講究看吧。

物以載道，我是老張 peace。

下期見0.0