編輯導(dǎo)語(yǔ)：顏色對(duì)于一些產(chǎn)品來(lái)說(shuō)也是很重要的，比如藍(lán)色我們會(huì)想到餓了么，黃色會(huì)想到美團(tuán)，橙色會(huì)想到淘寶，色彩也作為產(chǎn)品的一個(gè)代表顏色；本文作者分享了色彩這門(mén)學(xué)問(wèn)的一些思考與判斷方法，我們一起來(lái)看一下。

不知道大家有沒(méi)有聽(tīng)過(guò)這么一個(gè)故事：某家餐廳銷(xiāo)量一直不太好，老板究其原因也沒(méi)有查明白到底是為啥，明明選址在鬧市區(qū)，價(jià)格也很實(shí)惠，就是賣(mài)不出去；后來(lái)老板請(qǐng)了個(gè) “大師” 幫忙一探究竟，大師說(shuō)你家盤(pán)子顏色不行，換成橙色保準(zhǔn)牛X；老板立馬認(rèn)購(gòu)了一批橙色盤(pán)子，從那以后以后這家餐廳火爆了，王境澤都覺(jué)著他家的飯香的不行…

聽(tīng)完這個(gè)故事，自此我幼小的心靈里把橙色和食欲劃了等號(hào)，這個(gè)烙印直到我從業(yè)前幾年還一直這么覺(jué)著；同時(shí)間段，在9年義務(wù)教育的美術(shù)課本上，我得到了有生以來(lái)第一次對(duì)色彩這門(mén)學(xué)問(wèn)的細(xì)致輸入，了解到了各種顏色對(duì)應(yīng)的含義與情緒：

這種色彩與情緒的映射關(guān)系在我的腦袋里根深蒂固 / 無(wú)法磨滅，直到有那么一場(chǎng)面試或者匯報(bào)，面試官/老板問(wèn)我，“為什么你要選擇這個(gè)顏色作為品牌色呢？”

面對(duì)著一手塑造出來(lái)的社交應(yīng)用，我解釋到：“因?yàn)榧t色代表著熱鬧，這個(gè)顏色會(huì)賦予這款產(chǎn)品熱鬧的氛圍”；坦誠(chéng)的講，這個(gè)解釋自信但空洞，顏色本身并無(wú)好壞和指向，只看你用在了什么地方，不講究場(chǎng)景就別輕易定性。

這也側(cè)面反映出來(lái)慣性思維的不斷吞噬著你我的思路，過(guò)往的“經(jīng)驗(yàn)”可以讓人習(xí)以為常，也可以讓人尷尬不已，取決于是否洞察的到。

如果拋棄慣性思維，到底如何去定義一款產(chǎn)品的主色呢？

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

說(shuō)實(shí)話(huà)選取一個(gè)顏色作為品牌色是一個(gè)戰(zhàn)略決策過(guò)程，一般來(lái)說(shuō)行業(yè)里一定存在一種主流顏色，像旅游行業(yè)的攜程/去哪兒和途牛，還有以淘寶為代表的電商行業(yè)通常是喜慶的大紅大橙。

顯而易見(jiàn)基于這個(gè)邏輯下，有3個(gè)做法，一條路是順勢(shì)而為，一條是逆向而去，還有一條是另辟蹊徑。

這塊的選擇一定程度上并不是設(shè)計(jì)師可以決定的，需要結(jié)合整個(gè)業(yè)務(wù)的方向去判斷；在旅游行業(yè)里馬蜂窩選擇了逆向而去，在直播行業(yè)里抖音就選擇了另辟蹊徑。

通過(guò)抖音和馬蜂窩的例子，也許你會(huì)發(fā)現(xiàn)，黑色未必死氣沉沉，ta也可以色彩斑斕；黃色未必只象征尊貴，ta也可以代表青春和希望；顏色沒(méi)有偏向，只看使用在什么場(chǎng)景上。

主色的選擇更需要貼合業(yè)務(wù)戰(zhàn)略的發(fā)展，也更多的偏向于主觀；給業(yè)務(wù)提供思路和方向，判斷不好業(yè)務(wù)方向的時(shí)候，多提供思路幫助其更好的匹配顏色。

二、根據(jù)色相找到唯一ID

以往的面試?yán)?，我這種好事的面試官就特別喜歡問(wèn)侯選人一個(gè)問(wèn)題：“一個(gè)色相里有那么多色號(hào)，為什么你定了這個(gè)色號(hào)作為品牌色？”大部分候選人乍一聽(tīng)都是面露難色，心里大概想著這人不是傻吧，能問(wèn)這種問(wèn)題，哈哈哈哈哈哈。

廢話(huà)不多說(shuō)，我來(lái)簡(jiǎn)單分享下我的方法：

1）以黑白兩色（#000000-#FFFFFF）作為起始點(diǎn)設(shè)置10個(gè)梯度，然后把第一個(gè)模塊定義的色相扔進(jìn)去，只需要調(diào)整HSB中的H就可以，這樣一頓操作下來(lái)你就得到了一個(gè)完整的色彩序列：

2）基于序列主觀調(diào)整下顏色，確定主色的同時(shí)確保其在黑白2種背景上對(duì)比度大于4.5：1（wcag色彩可用性標(biāo)準(zhǔn)），理論上來(lái)講梯度中間是最合適的，飽和和亮度足夠就可以。

色彩可用性測(cè)試工具

三、顏色體系確定輔助色系

當(dāng)你準(zhǔn)備好了以上所有工作，最后一步就是拓展色系了；這里采用負(fù)能量補(bǔ)給站小商店的品牌色“叛逆橙” #FF774A（H15 S71 B100）作為主色并結(jié)合下google的方法開(kāi)始拓展色系。

首先：確認(rèn)同色系輔助色：我們將主色的色相加減 30° （谷歌是以10為梯度，但色相變化不大，為了效果我們以3倍作為最小單位）獲得2個(gè)新顏色，即同色系輔助色。

其次：確認(rèn)對(duì)比色輔助色，將主色的色相加上 180° 獲得其互補(bǔ)色，即對(duì)比色系輔助色；為了和主色的類(lèi)似色對(duì)應(yīng)，取互補(bǔ)色的同類(lèi)色（色相加減 15°）和類(lèi)似色（色相加減 30°）；從中選取需要的顏色作為最終的對(duì)比色系輔助色。

根據(jù)色彩需求取同類(lèi)色2和類(lèi)似色1作為最終的對(duì)比色系輔助色，這樣，我們得到了主色和四個(gè)輔助色；同理你可以推理出無(wú)色彩傾向的中性色系（這里就不展開(kāi)贅述）。

最后你可以通過(guò)編碼的方式，賦予每個(gè)顏色一個(gè)token（密鑰），方便團(tuán)隊(duì)的配合和使用。

四、總結(jié)一下

隨著工作經(jīng)驗(yàn)/時(shí)長(zhǎng)的不多增加，我們往往會(huì)對(duì)事物的存在習(xí)以為常，思維的慣性會(huì)困住我們追根溯源的想法；但需求和場(chǎng)景是千變?nèi)f化的，所有的方法也都針對(duì)的是通用場(chǎng)景，標(biāo)準(zhǔn)化的解決方案未必適用你當(dāng)下的處境；試著在熟悉的環(huán)境用敏銳的洞察和科學(xué)的方法突圍也許是最好的辦法。

本文由 @負(fù)能量補(bǔ)給站 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議