如何制定產品主色？試試超容易上手的色彩理論取色法

從零做一款產品的時候，需要制定產品的主色。怎么制定呢？

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

我們模糊一下這張圖，你會發現 APP 最終記憶點是色彩。

換做在手機看也是一樣的，打開你的 APP 列表，快速往下滑去找一個 APP，你會發現它們最終只剩下色彩——“我想找愛奇藝，它在我記憶中是綠色的，剛才快速滑過的紅色黃色都不是”。當然，這只是拿來舉例，通常你不需要這樣去找一個APP。用這個例子只想強調APP主色的意義——它是區別于競品的第一特征，是調性概括，是一種態度，甚至是你趁手的兵器。

所以當你去確定產品主色的時候，有三種思路：隨大眾；反著來；搞特殊。

隨大眾

不同的行業發展至今，已經自帶色相了。比如電商購物是紅黃色、醫療健康是藍綠色、商務是藍色...如果我們每次都用產品或者行業特性去推導色相，出來的大多數都是第一種思路。

反著來

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

搞特殊

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

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

1. 基于行業與場景確認色相
2. 色相偏移
3. WCAG 標準驗證顏色
4. 色系拓展

基于行業與場景確認色相

小易是一款助力銷售的 CRM 產品，主打銷售智能化。取色就要看你立足點是“數據智能”還是“銷售”了。與數據智能相關的繞不開藍綠色，與銷售系統相關的繞不開橙色。這個產品是內部定制化的，不存在有競品的情況，因此隨大眾更容易取得方案的通過。為免出現“這個顏色一點都不科技和智能”的質疑和返工，我非常科學（識相）地選擇了藍色作為主要色相。

色相偏移

用 HSB 參數來看，正藍色的 H 值（色相）是 240。引用優設大課堂態爺的一句話是：要想顏色好看，色相別太正。那么正藍色就要偏移：往冷色偏移或者往暖色偏移。

這里加入一個空間的概念：假設產品是一個空間，里面主打智能和數據，我設定了大環境偏冷光，所以里面的物體會受冷光的影響。

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

WCAG 標準驗證顏色

WCAG 是網頁無障礙指南其中關于顏色的使用標準，簡單來說就是色彩要在頁面中達到一定的對比度，才能讓人看清。WCAG 用色標準中普通文本與背景對比度不低于 4.5：1，那么對于高亮文字顏色（通常是產品主色）是不是也需要達到這個標準呢。我用幾個 APP 進行了測試，下列 APP 的對比度在白色頁面中范圍是 2.3-4.5。

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

有個快速計算對比度的網頁很好用，輸入色值就可以得出結果。

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

還有個網站會更直觀，輸入色值后下面還有網頁例子預覽效果。

color review：https://color.review

我選擇的藍色對比值在白色背景是 3.9，黑色背景是 5.2，在正常范圍內。其實小易 APP 大概率不會有暗夜模式，因為需要投入更多的開發資源，淺色模式也不是不能用。在這個考量下，可以拋開黑色背景不考慮，但是話又說回來，做好準備總是沒錯的。

色系拓展

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

中性色相對來說比較簡單，所以放在前面先講。前面我已經選定主色是#1b7aff，打開拾色器，將明度調為 10%，就可以得到一個深色偏藍的顏色。用這個作為界面中性色最深的顏色，疊加白色（白色的透明度以 10%作為基礎依次遞減），得出中性色的色板。

我看過很多寫得不錯的文章，文末會放相關參考的鏈接。下面的四種選色思路，是根據他們的歸納為基礎，加入一點其它的角度來進行輔助色系的選定。

看到這里你應該也發現規律了：

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

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

我的選色

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

參考文章：

授權 W3G 文檔，網頁無障礙指南（WCAG2.1）翻譯版

優設態爺手繪提高班關于色彩的內容（課程鏈接）

歡迎關注作者微信公眾號：「牙線y2x」