從零做一款產(chǎn)品的時(shí)候，需要制定產(chǎn)品的主色。怎么制定呢？

"歸納產(chǎn)品特性和理念-提取關(guān)鍵詞-建立情緒版-選擇色相-制定色系"，這是很多文章里面歸納出來的幾步，使用的時(shí)候也有理論依據(jù)。但我想說點(diǎn)不一樣的。在這個(gè)時(shí)代，產(chǎn)品五花八門，想用哪一類別的產(chǎn)品一搜一大把，在七麥數(shù)據(jù)搜索購(gòu)物類的 APP 榜單，光第一頁單榜就有 200 多個(gè)。

我們模糊一下這張圖，你會(huì)發(fā)現(xiàn) APP 最終記憶點(diǎn)是色彩。

換做在手機(jī)看也是一樣的，打開你的 APP 列表，快速往下滑去找一個(gè) APP，你會(huì)發(fā)現(xiàn)它們最終只剩下色彩——"我想找愛奇藝，它在我記憶中是綠色的，剛才快速滑過的紅色黃色都不是"。當(dāng)然，這只是拿來舉例，通常你不需要這樣去找一個(gè)APP。用這個(gè)例子只想強(qiáng)調(diào)APP主色的意義——它是區(qū)別于競(jìng)品的第一特征，是調(diào)性概括，是一種態(tài)度，甚至是你趁手的兵器。

所以當(dāng)你去確定產(chǎn)品主色的時(shí)候，有三種思路：隨大眾；反著來；搞特殊。

隨大眾

不同的行業(yè)發(fā)展至今，已經(jīng)自帶色相了。比如電商購(gòu)物是紅黃色、醫(yī)療健康是藍(lán)綠色、商務(wù)是藍(lán)色…如果我們每次都用產(chǎn)品或者行業(yè)特性去推導(dǎo)色相，出來的大多數(shù)都是第一種思路。

反著來

使用和競(jìng)品色相相差大于 90 度（中差色、對(duì)比色、互補(bǔ)色）的，差別較大的就是反著來。這是逆向思維，通過差異較大的色相能讓你在一堆顏色同質(zhì)化的競(jìng)品中跳出來。

搞特殊

抖音和 keep 是我心中搞特殊的 top，既不使用行業(yè)相同的色相，也不使用相反的色相，而是雙色相或雙色相疊加。

用我做的小易 APP 來做例子說一下制定色系的過程吧

1. 基于行業(yè)與場(chǎng)景確認(rèn)色相
2. 色相偏移
3. WCAG 標(biāo)準(zhǔn)驗(yàn)證顏色
4. 色系拓展

基于行業(yè)與場(chǎng)景確認(rèn)色相

小易是一款助力銷售的 CRM 產(chǎn)品，主打銷售智能化。取色就要看你立足點(diǎn)是"數(shù)據(jù)智能"還是"銷售"了。與數(shù)據(jù)智能相關(guān)的繞不開藍(lán)綠色，與銷售系統(tǒng)相關(guān)的繞不開橙色。這個(gè)產(chǎn)品是內(nèi)部定制化的，不存在有競(jìng)品的情況，因此隨大眾更容易取得方案的通過。為免出現(xiàn)"這個(gè)顏色一點(diǎn)都不科技和智能"的質(zhì)疑和返工，我非?？茖W(xué)（識(shí)相）地選擇了藍(lán)色作為主要色相。

色相偏移

用 HSB 參數(shù)來看，正藍(lán)色的 H 值（色相）是 240。引用優(yōu)設(shè)大課堂態(tài)爺?shù)囊痪湓捠牵阂腩伾每?，色相別太正。那么正藍(lán)色就要偏移：往冷色偏移或者往暖色偏移。

這里加入一個(gè)空間的概念：假設(shè)產(chǎn)品是一個(gè)空間，里面主打智能和數(shù)據(jù)，我設(shè)定了大環(huán)境偏冷光，所以里面的物體會(huì)受冷光的影響。

在冷光環(huán)境下，藍(lán)色的色相受環(huán)境影響，會(huì)往冷色偏移。色相偏移 15 度是同類色，偏移 45 度是近似色。我在兩者之間取了中間值，約 25 度。對(duì)市面上的產(chǎn)品取色進(jìn)行研究的時(shí)候，會(huì)發(fā)現(xiàn)它們的色值一般在拾色器九宮格的右上格，所以 S 值（飽和度）的取值范圍大致在 77%-100%之間，我取了中間偏下的值 89%。B 值（明度）一般為 100%，除了黃綠色相本身明度偏高，則會(huì)適當(dāng)降低明度。

WCAG 標(biāo)準(zhǔn)驗(yàn)證顏色

WCAG 是網(wǎng)頁無障礙指南其中關(guān)于顏色的使用標(biāo)準(zhǔn)，簡(jiǎn)單來說就是色彩要在頁面中達(dá)到一定的對(duì)比度，才能讓人看清。WCAG 用色標(biāo)準(zhǔn)中普通文本與背景對(duì)比度不低于 4.5：1，那么對(duì)于高亮文字顏色（通常是產(chǎn)品主色）是不是也需要達(dá)到這個(gè)標(biāo)準(zhǔn)呢。我用幾個(gè) APP 進(jìn)行了測(cè)試，下列 APP 的對(duì)比度在白色頁面中范圍是 2.3-4.5。

我估計(jì)原因有二，一是飽和度太高有點(diǎn)太艷了，二是現(xiàn)在很多 APP 都有暗夜模式，觀察這張圖上的 APP 顏色情況，可以發(fā)現(xiàn)一個(gè)顏色在白色背景對(duì)比度越低，在黑色背景對(duì)比度就越高。且高亮文字使用的頻次相比文本文字少，多數(shù)伴隨色塊按鈕使用，所以 3-4 是較合適的對(duì)比值范圍。

有個(gè)快速計(jì)算對(duì)比度的網(wǎng)頁很好用，輸入色值就可以得出結(jié)果。

contrast ratio：https://contrast-ratio.com/#%23FF784A-on-white

還有個(gè)網(wǎng)站會(huì)更直觀，輸入色值后下面還有網(wǎng)頁例子預(yù)覽效果。

color review：https://color.review

我選擇的藍(lán)色對(duì)比值在白色背景是 3.9，黑色背景是 5.2，在正常范圍內(nèi)。其實(shí)小易 APP 大概率不會(huì)有暗夜模式，因?yàn)樾枰度敫嗟拈_發(fā)資源，淺色模式也不是不能用。在這個(gè)考量下，可以拋開黑色背景不考慮，但是話又說回來，做好準(zhǔn)備總是沒錯(cuò)的。

色系拓展

色系拓展需要拓展兩類：中性色和輔助色。

中性色相對(duì)來說比較簡(jiǎn)單，所以放在前面先講。前面我已經(jīng)選定主色是#1b7aff，打開拾色器，將明度調(diào)為 10%，就可以得到一個(gè)深色偏藍(lán)的顏色。用這個(gè)作為界面中性色最深的顏色，疊加白色（白色的透明度以 10%作為基礎(chǔ)依次遞減），得出中性色的色板。

我看過很多寫得不錯(cuò)的文章，文末會(huì)放相關(guān)參考的鏈接。下面的四種選色思路，是根據(jù)他們的歸納為基礎(chǔ)，加入一點(diǎn)其它的角度來進(jìn)行輔助色系的選定。

看到這里你應(yīng)該也發(fā)現(xiàn)規(guī)律了：

選色離不開色彩的理論知識(shí)。在理論的基礎(chǔ)上不斷嘗試搭配，組合出不一樣的色板。

而且要基于目的來選擇搭配，跟畫畫一樣。如果想要畫面和諧，就不要出現(xiàn)多組互補(bǔ)色。畫面中有一組互補(bǔ)色時(shí)，要取兩者中間的顏色來勸架，以達(dá)到和諧的目的。如果希望畫面沖擊力強(qiáng)，則相反。基于這樣的色彩理論，可以讓我們不出錯(cuò)且有依據(jù)地搭配出界面的色系。

我的選色

我希望顏色能有更細(xì)膩的色相變化，所以我把色環(huán)按照 10 度作為基準(zhǔn)細(xì)化。選擇互補(bǔ)輔助色的時(shí)候，我沒有選正互補(bǔ)色，偏移了 10 度。從黃色到綠色的亮度都很高，所以我的選色更多偏右邊。以選取的這六種顏色作為小易的基礎(chǔ)色，微調(diào)飽和度稍微降低色彩的黑白灰差值。

參考文章：

如何科學(xué)地建立色彩體系？我總結(jié)了這5個(gè)方面！

如何拋棄慣性思維，重新定義一款產(chǎn)品的主色？

授權(quán) W3G 文檔，網(wǎng)頁無障礙指南（WCAG2.1）翻譯版

優(yōu)設(shè)態(tài)爺手繪提高班關(guān)于色彩的內(nèi)容

作者：牙線y2x