每一個設(shè)計師都是視覺動物，因為好看的包裝而購買東西事情相信誰都干過。色彩能給人很強視覺沖擊。顏色的運用除了需要考慮品牌的統(tǒng)一性之外，還需要達到信息傳遞，交互反饋等目的，規(guī)范統(tǒng)一的色彩搭配可以提高品牌的辨識度，提高產(chǎn)品視覺的規(guī)范性和一致性。

目錄：

1. 概念
2. 基礎(chǔ)知識
3. 用色原則
4. 顏色規(guī)范

一、概念

什么是顏色：顏色是通過眼、腦和我們的生活經(jīng)驗所產(chǎn)生的一種對可見光波的視覺感受。

三原色：三原色指色彩中最基礎(chǔ)的三種顏色，以三原色為基礎(chǔ)可以組成其他成千上萬種顏色，而其他顏色則調(diào)不出來三原色。三原色又分為色彩三原色、光學(xué)三原色。

光學(xué)三原色：由紅、黃、綠構(gòu)成。混合后組成顯示屏顯示的所有顏色，三原色同時相加為白色。（混合模式為加色混合，色光混合時增加光量）

色彩三原色：也叫做美術(shù)三原色。由紅、黃、藍組成?？梢曰旌铣鏊蓄伭系念伾?，同時相加為黑色。（混合模式為減色混合，每種顏料或染料都具有反射或透射一定色光的能力、而這些中有某些顏色在顏料混合中，其波長的光線被吸收）

二、基礎(chǔ)知識

1. 模式

常見的有CMYK、RGB、HSB三種模式。CMYK和RGB模式是計算機判斷顏色的方式，HSB模式基于人眼視覺細胞的模式，就是眼見看到的顏色。

CMYK

CMYK模式又稱印刷模式，屬于減色混合模式。由青（Cyan）、洋紅（Magenta）、黃（Yellow）、黑（Black）四種顏色組成其他顏色，平面設(shè)計師常用。

RGB

由紅（Red）、綠（Green）、藍（Blue）三種顏色組成其他顏色。UI設(shè)計師常用。

HSB

由色相(Hue)、飽和度(Saturation)和亮度(Brightness)構(gòu)成。把顏色三屬性進行量化，飽和度和亮度以百分比值（0% – 100%）表示，色度以角度（0°- 360°）表示。以人類對顏色的感覺為基礎(chǔ)，描述了顏色的三種基本特性。這種顏色模式比較符合人的視覺感受，讓人覺得更加直觀一些

2. 色相(Hue)

在0°- 360°的標準色輪上色相是按位置度量的。在通常的使用中，色相是由顏色名稱標識的，比如紅、綠或橙色。

3. 飽和度(?Saturation )

是指顏色的純度。飽和度表示色相中彩色成分所占的比例，用從0(灰色)~100%(完全飽和)的百分比來度量。在標準色輪上飽和度是從中心逐漸向邊緣遞增的。

4. 亮度(Brightness )

是顏色的明暗程度，通常是從0(黑) – 100%(白)的百分比來度量的。

5. 色調(diào)

色調(diào)是整體的色彩傾向。當亮度、飽和度、色相的其中一個因素占大部分比例時，就會有色彩傾向。通常由亮色調(diào)、暗色調(diào)、暖色調(diào)、冷色調(diào)、純色調(diào)、灰色調(diào)等。

同類色

色相環(huán)中15°夾角內(nèi)的顏色，色相性質(zhì)相同，但色度有深淺之分。是色相中最弱的對比。對比效果感覺統(tǒng)一、雅致、穩(wěn)重，但也易產(chǎn)生單調(diào)、呆板的弊病。

鄰近色

色相環(huán)中60°夾角內(nèi)的顏色，就是指色環(huán)上相鄰的顏色，也是弱對比類型。對比效果感覺柔和、和諧，但也會感覺單調(diào)，需調(diào)節(jié)明度差來加強效果。

類似色

色相環(huán)中90°夾角內(nèi)的顏色，為中對比類型，對比效果感覺明快、活潑、有趣，對比既有相當力度，但又不失調(diào)和之感。

對比色

色相環(huán)中120°夾角左右的顏色。為強對比類型，對比效果有力、活潑、豐富，但也容易感覺雜亂、刺激、造成視覺疲勞。一般需要采用多種調(diào)和手段來改善對比效果。

互補色

色相環(huán)中180°夾角左右的顏色。為極端對比類型，對比效果強烈、響亮，但若處理不當，易產(chǎn)生不安定、不協(xié)調(diào)的感覺。

三、用色原則

識別清晰：保持足夠的對比度，使信息可以輕易的被識別。同時遵守WACG2.0標準，以保證有視力障礙的用戶使用。

檢驗網(wǎng)站：https://contrast-ratio.com/

含義清晰：根據(jù)顏色的情感表達和用戶認知使用顏色。區(qū)分哪些是可操作的、哪些是裝飾的、哪些是危險的等。

品牌清晰：用顏色塑造統(tǒng)一、優(yōu)秀的品牌形象，保證品牌的獨特性和傳播性。

四、顏色規(guī)范

1. 品牌色

品牌色是體現(xiàn)品牌形象和文化理念的最直觀的元素之一。每種色彩都有很深刻的文化沉淀和視覺感受。

需要根據(jù)自家的行業(yè)定位、產(chǎn)品特性、產(chǎn)品理念慎重的選擇一個合適的、辨識度高的顏色作為品牌色。

每種顏色都有積極地和負面的情感

• 紅： 正面：積極、活力、開放、激情；負面：危險、碰撞、激烈、禁止
• 橙：?正面：陽光、歡快、快捷、舒適；負面：浮躁、喧鬧、陳舊
• 黃：?正面：陽光、輕松、輕量、愉快；負面：廉價、軟弱、低俗
• 綠：?正面：自然、生命、新鮮、和平；負面：土氣、嫉妒
• 藍： 正面：理智、精密、嚴謹、商務(wù)；負面： 孤獨、嚴格、悲傷、冷酷
• 紫：?正面：優(yōu)雅、高貴、神秘、高級；負面：距離、虛幻、冰冷
• 粉：?正面：柔軟、優(yōu)雅、甜美、可愛；負面：?柔弱、膚淺、幼稚
• 白：?正面：和平、干凈、清淡、純潔；負面：空、平淡、靜止、無趣
• 灰：?正面：?高雅、樸素、復(fù)古、舒適；負面：保守、壓抑、無力
• 黑： 正面：力量、莊重、正式、高級；負面：孤獨、沉默、陰暗、沉重

暫定一個藍色HSB（238，88，88）為品牌色。（這么多8，老板應(yīng)該會給加雞腿的）

把品牌色疊加上一個20%不透明度的白色（#fff）得到懸浮色

把品牌色疊加上一個20%不透明度的黑色（#000）得到點擊色

2. 功能色

功能色起到輔助說明 信息狀態(tài)的作用，減少用戶的理解成本和理解時間。功能色一般分為提示色、警告色、成功色、失敗色、鏈接色。選取輔助色時一定的符合用戶對顏色的基本認知。

（例如看到綠色的符號一般就知道操作成功了，并不需要閱讀完所有的文字。在文章里看到藍色的文字一般就是可點擊的鏈接。）

根據(jù)最普遍的認知，我們選取了藍色為提示色，橙色為警告色，綠色為成功色，紅色為是失敗色并在色環(huán)上找到這些顏色。

使用品牌色的藍為提示色，色相H（30）的橙色為警告色，色相H（120）的綠色為成功色，色相H（0）的紅色為是失敗色。同時所有顏色的飽和度和亮度與品牌色保持一致，都是88。

由于色相不同的顏色視覺亮度感受是不一樣的，所以需要把選出的顏色進行微調(diào)。

注意：色相的調(diào)整上下不能超過15°，這樣調(diào)整后顏色會保持為同類色。

3. 輔助色

輔助色起到烘托主色調(diào)、支持主色調(diào)、融合主色調(diào)的作用。輔助色在整體的畫面中能平衡主色的沖擊效果和減輕視覺疲勞，起到一定的視覺分散的效果。

品牌色的色相為 H = 238。根據(jù)上文中同類色、鄰近色、類似色、對比色、互補色的定義，可以得出9個輔助顏色。

同類輔助色：H=223(H-15)、H=253(H+15)

鄰近輔助色：H=208(H-30)、H=268(H+30)

類似輔助色：H=148(H-90)、H=328(H+90)

對比輔助色：H=118(H-120)、H=358(H+120)

互補輔助色：H=58(H-180)

由于同類色H=223和品牌色十分相似、對比輔助色和功能色中綠色、紅色十分相似且不易區(qū)分，所以進行舍棄。再經(jīng)過微調(diào)之后便得到以6個顏色。

4. 色板

支付寶團隊有一個配色原則“保持色相值不變，純度變化時，S值以S/5遞減、B值以 (100-B)/5依次做遞增；明度變化時，S值以(100-S)/5 遞增、B值以B/5做遞減”，把品牌色的數(shù)值代入后即可得到色板。

很厲害的一套方法，受到啟發(fā)后我想了一種很簡單也很快速的方法來得到色板。

下面我介紹這個超級簡單的生成色板的方法：

第一步：

在PS里建一個 1100×100 px 的長方形。填充漸變：最左端為黑色，最右端為白色，中間為品牌色。

第二步：

執(zhí)行濾鏡–像素化-馬賽克，數(shù)值為100。然后把頭尾的兩個色塊去掉，就生成了一個色板。由于中間的兩個顏色十分相似，就合并調(diào)整為輔助色。

第三步：

對其他5個輔助色執(zhí)行同樣操作即得到色板。

5. 中性色

中性色又稱為無彩色系，指黑色、白色及和的深淺不同的灰色系列。中性色本身不帶有感情色彩，最常在文字、背景、邊框、分割等場景中應(yīng)用。

黑色沒有任何顏色傾向，是一種很高級的顏色，用的好了很出彩，用的不好就會很突兀，新手盡量避免使用純黑色。（從剛學(xué)水粉的時候，老師就不讓使用黑色顏料）。

我們在文字的黑色里添了一下品牌色的藍色，使顏色有了傾向，也更耐看。

6. 顏色規(guī)范

小貼士

對顏色的使用應(yīng)該保持克制的、理性的，最終目的是信息的傳遞、方便用戶理解，在保證信息傳遞的情況下，增加其美觀性、趣味性。

沒有難看的顏色，只有用錯地方的顏色?。?

名詞解釋

【感覺太粉了】 ?翻譯過來就是：大部分顏色的亮度都很高，整體顯得過于蒼白。重顏色和純顏色較少，畫面的對比較弱。

【感覺太臟了】 ?翻譯過來就是：畫面的顏色不和諧。暗顏色放到了亮部、暖色放在了冷部等，顏色沒放到合適位置，破壞了整體的色調(diào)，所以就會顯得臟。

【感覺太花了】 ?翻譯過來就是：畫面的顏色太多了，各種顏色所占的比重差不多，區(qū)分不明顯，表達的情感模糊。減少配色數(shù)量，選定一種顏色作為主色，使其比重占大比重就行了。可遵守631法則。

【感覺太純了】 ?翻譯過來就是：畫面使用的顏色純度過高，每種顏色表達情感過于強烈，發(fā)生沖突所致。

下篇更新【文字規(guī)范】~

作者：Iron設(shè)計邦；微信公眾號?IRON設(shè)計邦

本文由 @Iron設(shè)計邦 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。