你想過生活中的五彩繽紛的色彩都是怎么形成的嗎，我們看到的顏色在物理分析下真的就是那個顏色嗎？那么多顏色有沒有它的適用特征與場景在呢？我們又可以如何運用到色彩設計中呢？針對種種疑問，筆者將給出解答。

作為一枚交互設計師，最近在幫朋友做國際物流的項目，客串了一把視覺設計，對色彩設計做了一些研究，現在把研究心得做一個總結，想要和大家共同探討。

1. 色彩是怎么形成的？

色彩是我們生活中最具有表現力的要素之一，正是因為有了色彩，我們才有了碧海藍天、綠水青山這樣美麗的大自然景觀，才有了“白毛浮綠水，紅掌撥清波?！边@樣優美的詩詞，才有了七色彩虹這樣有意義的現實童話。

那么，色彩是怎么形成的呢？其實，色彩的形成是一個復雜的物理和人的心理相互作用的結果，它涉及到光的傳播特性、人眼結構和人的心理感知等知識。

2. 人是怎么觀察到色彩的？

2.1 色彩本質上是一種物理光線的傳播

首先，光在物理學上是用波長來表示的，也就是兩個相鄰波峰之間的距離，單位是納米（10億分之1米）；然后，大部分的光，人眼是不可見的，例如X光、紅外線、紫外線，只有很小范圍的光才可以被人眼所見；最后，可見光的波長大概在400-700納米之間，也就是我們人眼能看到的波長范圍。

不同顏色的波長也不盡相同，例如紫藍色的波長大約在400納米左右，而黃紅色的波長在700納米左右，如下圖所示：

2.2 人主要靠人眼+大腦識別色彩

人眼是人體中非常復雜的器官之一，人眼會識別出不同波長的光波信號。人眼主要由瞳孔和視網膜構成，其中光線會通過瞳孔進入人眼中，這時會采集光信號；然后再由視網膜來進一步加工，將不同波長的光波信號轉變成大腦可以理解的神經信號。

例如，人眼通過瞳孔接收了500波長的光波信號，然后通過視網膜加工成了神經信號，再傳遞給了大腦識別顏色，最終大腦就可以實現通過人眼來識別光源的顏色。

2.3 人的心理感知對色彩進一步加工

心理學家認為，人的第一感覺就是視覺，而色彩是對視覺影響最大的因素。不同的色彩，會對人的心理造成不同的影響，這是因為人腦的心理感知，會對色彩進一步加工，潛意識地聯想到不同的含義。

例如，看到藍色，會聯想到明亮的天空、壯闊的海洋，人的心理會趨于冷靜；看到粉色，就會聯想到桃花、愛心，人的心理會感到溫暖和有呵護的感覺；看到綠色，就會想起大自然，人的心理就會覺得舒適、放松。

2.4 色盲群體

對于天生有顏色缺陷，或者說部分或者完全不能通過人眼分辨顏色（通常是紅色和綠色）的人來說，我們稱之為“色盲群體”。因為色盲是X染色體伴生性遺傳缺陷，且男性只有一條X染色體，所以男性會比女性更有可能遺傳這種缺陷。

另外，據統計，我國男性色盲發生率約為5%~8%，女性約為0.5~1%，其中， 紅綠色盲人口占全球男性人口約8%，女性人口約0.5%，這是一個不少的群體數量。

所以，在設計上，我們要具有同理心，考慮這一部分群體，如何更好地使用我們的產品。

3. 色彩的重要概念和特征

3.1 三原色和RGB色彩模式

三原色：

在大自然中有三種不能再分解的基本顏色，即三原色，分別為紅色（Red）、綠色（Green）和藍色（Blue）?；谌?，把這三種顏色按照不同強度、不同比例進行混合，就可以得到其他各種各樣的色彩。

RGB色彩模式：

RGB色彩模式是工業界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB即是代表紅、綠、藍三個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是運用最廣的顏色系統之一。（來自百度百科的定義）

通過RGB色彩模式給顏色賦值，可以讓電腦顯示相應的顏色。例如紅色就表示為RGB（255，0，0），括號中的數值其實就是分別代表紅色、綠色、藍色的值，其中（255,0,0）表示紅色的發光強度最大，綠色、藍色不發光（0），所以就顯示為紅色，其他同理。

通過RGB值運算，就可以得到混合色，例如紅RGB（255,0,0）和綠RGB（0,255,0），通過“變亮”模式混合，就得到了黃色RGB（255,255,0）。

3.2 色彩的三個維度

所有的色彩，都可以用三個維度來描述，分別是：色調、飽和度和明度。

• 色調：是指人對色彩的定性感知，或者說顏色的類別，例如紅、綠、藍、黃、青、紫等。
• 飽和度：是指顏色感覺的純度和鮮艷度，或者說顏色中的灰色量含量的高低，純色擁有最大的飽和度，柔和、混合的顏色飽和度居中，灰色的飽和度為0。
• 明度：是指色彩中光的強度，或者說混合了多少白色或黑色，白色的明度最大，黑色的明度最小。

3.3 互補色、對比色、臨近色和類似色

• 互補色：在12種顏色組成的色相環中，相隔180°的顏色，或者說處于直線相對位置上的顏色，我們稱之為互補色。例如紅色和綠色互補、黃色和紫色互補、藍色和橙色互補。
• 對比色：指在色相環中相隔120°-180°的顏色，任意選擇兩個顏色，我們稱之為對比色。例如紅色和藍紫色為對比色，紅色和黃色為對比色，藍紫色和黃色為對比色。
• 臨近色：指在色相環中相隔60-90°的顏色，或者相隔三個位置的顏色，我們稱之為臨近色。例如紅色和橙色。
• 類似色：也稱之為相似色，指在色相環中，相隔30°的顏色。例如紅色和紅橙色。

3.4 冷暖色

在上面，我們有提到，不同的色彩，會對人的心理造成不同的影響?；诖?，我們就形成了色彩心理上的冷暖感覺。

例如，看到紅色，我們就會聯想到火焰，心理上會感到溫暖，所以，我們把紅、橙、黃這些顏色歸為暖色調；同理，看到藍色，我們可能會想到海水藍，心理上會感到冷意，所以，我們把藍、綠、紫這些顏色，稱之為冷色調。

當然，除了冷暖色，還有一些中性的色調，例如黑色、白色或者灰色。

3.5 漸變色

大家對漸變色肯定不陌生，趨于成熟的香蕉、秋天泛黃的葉子、絢麗多彩的晚霞，這些從明到暗、從深到淺或者從一個色彩到另一個色彩過渡，充滿浪漫氣息的顏色，就是大自然中最為常見的美麗的漸變色。

和純色相比，漸變色顯得更年輕、活潑和多變，會被廣泛應用在產品設計上，特別是一些年輕化的產品。

3.6 色彩的顏色代碼和不透明度

在計算機上，色彩可以用RGB的值來表示，例如上面我們所講的紅色，其值為RGB（255,0,0），也可以轉換為十六進制代碼來展示，也就是#ff0000。一般地，設計師都會標注顏色代碼給到前端開發工程師。

另外，顏色還有不透明度的概念，用百分比來表示，例如60%的紅色，設計師采用不透明度色值來做設計，同樣也需要用百分比標注出來。

4. 色彩的設計案例

4.1 設計與生理：不宜使用明度、飽和度過高的顏色

本文上面有提到，我們主要通過人眼（瞳孔+視網膜）來識別色彩的信號，據研究表明，色彩的明度和飽和度過高，會對人的視網膜過渡刺激，導致眼睛疲勞，例如純黃色、純綠色或者飽和度過高的紅藍搭配。所以，我們在色彩設計時，要盡量避免使用明度、飽和度過高的顏色。

具體的常見應用場景，小到日常警方的通告，大到整個網站或者App的配色，都可以用得到。

4.2 設計與心理：粉色的護士服

人對色彩的心理加工，必然會對設計造成影響，例如，兒科的護士服通常被設計成粉色，在視覺上具有柔和、溫暖和呵護的效果，可以減輕孩子對醫院的恐懼心理。

4.3 互補色：經典的互補色logo設計

互補色通常有紅綠互補、藍橙互補和紫黃互補等，由于互補色有很強的分離性，可以有效提高整體配色的分離度，所以經常會用在logo設計中。例如7-11、visa、湖人球隊這些知名的logo設計，就是運用了互補色來做設計。

4.4 對比色：圖表對比

在產品設計中，特別是后臺的產品，通常會有很多的圖表，例如柱狀圖、折線圖、餅圖等，而且圖表中通常會有兩組以上的數據作為對比，這個時候，我們就可以運用對比色，來區分不同組別的數據。

4.5 臨近/類似色：漸變過渡更自然

臨近色，或者類似色，都是在十二色環中相隔不遠的顏色，且它們的色調具有漸進過渡的特點。所以，在使用漸變色設計時，我們可以采用臨近/類似色進行漸變，讓漸變過渡更自然。

4.6 一致性：整體網站配色

網站的整體色調，至少在主色調的使用上，都會跟它的logo保持一致，這樣整體看起來就會非常協調，另外，主色調最好不要超過2種，不然色調越多，越難保持一致，還容易引起視覺噪點。

4.7 同理心：站在色盲群體的角度來做設計

同理心，又稱換位思考，是指能設身處地體會對方的情緒、想法，并站在對方的角度去思考和處理問題。對于普通人而言，很難體會得到色盲群體的感受，這個時候，就需要設計師具備同理心，站在色盲群體的角度來做設計。

例如，高德地圖就針對色盲群體，推出了色盲模式設置，方便這一部分人群的日常使用，這是非常具有同理心的設計。

#專欄作家#

夜雨，微信公眾號：iueuxd，人人都是產品經理專欄作家。圖書《Sketch交互設計之美：從零基礎從完整項目實現》作者，高級交互設計師。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議