推薦：深入淺出！從零開始學配色（內附配色工具和方案）

簡評：人人都是設計師，不論生活還是工作，對於美，對於色彩，我們應予以孜孜不倦的追求。不論你是否從事設計，都應該看看本文，因為核心說的不是顏色，而是美。

紅·白·藍 | 人人都該知道的調色板 8 原則

人機交互存在大量的 UI 圖形元素，顏色在至關重要。正如皮埃爾·伯納德所說：

Color does not add a pleasant quality to design?—?it reinforces it.

在設計時，無限的顏色方案供我們選擇，而通常也因為太多的顏色，到致我們難以抉擇。

本文，介紹八種基本規則，幫助讀者玩轉色彩。

1.限制色彩數量

馭色之道，亦為平衡之道。色彩越多，越難平衡。

根據多倫多大學的研究，人們使用 Adobe Color CC，最喜歡用簡單的顏色組合，多為兩種或三種配色。所以建議你的配色方案最多支持三種基色，這樣會獲得更好的效果。

如果你需要調色板以外的顏色，請使用漸變和渲染。

※ 如何創建一個方案

如何選擇顏色？色輪可以幫助你。

網上有許多預設好的配色方案，很適合初學者：

• Monochromatic — 單色：最簡單的方案，因為它們都是採用相同的顏色，但包括色調，色調和色調的變化。這個配色，能產生舒緩的效果。

（單色方案對眼睛很友好，正如你在 Facebook 的例子中可以看到的，該方案看起來乾淨而優雅）

• Analogous — 臨色：一種顏色用作主色，相鄰顏色輔助，用於豐富方案。這種配色方案容易產生疲憊感，訣竅在於顏色的梯度，色彩的差別表達不同的狀態。

（Clear App：色彩的深淺表達代辦事項的優先順序）

（Calm App：用臨色構築整體情緒）

• Complementary — 互補：此方案包含兩種對比強烈的顏色。該方案用於吸引用戶的注意。此方案要注意主色和從色的選擇。例如滿眼的綠色中，一點紅將脫穎而出。

（互補是脫穎而出的最簡單的方法）

• Custom — 習慣：創建一個習慣的配色方案沒有大家想想的那麼難。訣竅就是，只需要在其他中性的調色板（例如一些傳統的單色方案）中添加明亮的色調，這會讓新的方案很醒目。

（Dropbox：結合了白色、灰色和藍色）

2.接受自然的饋贈

最好的顏色組合來自大自然。為什麼？

因為這些方案看起來很自然。想得到啟發？我們只需要環顧四周。

如果你在日常生活中看到特別美麗或醒目的色彩，請嘗試創建一個方案。只需拍攝一個美麗的時刻，並從中提取顏色創建方案。

推薦文章：設計師實踐手冊：K-pop 中的五個設計元素 （極光日報）

3.遵循 60-30-10 規則

這是一個經典的裝飾規則，可以幫助你輕鬆地將配色方案放在一起。

60％，30％，10％ 的比例是為了平衡任何空間中使用的顏色。

這個概念是非常簡單的使用：60％ 主色調，30％ 次要顏色，10％ 重點色。

（60 主色，30 次要色，10 點睛的重點色，視線很容易從整體過渡到重點色的焦點上）

4.先做灰度設計

顏色設計非常有趣。但是再設計顏色之前，先強制自己設計灰度。以灰度梯度構建應用 App 的原型，並將其用作基準。在添加顏色之前，以灰度設計，讓你更專註於間距和布局等元素。

5.避免使用純黑

在現實生活中，純黑色幾乎不存在。我們周圍的所有黑色物體都有一些光線反射，這意味著它們不是真正的黑色，它們是深灰色的。

（一隻黑狼，皮色是深灰色而不是黑色）

純黑色會過於顯眼，也會讓人覺得不自然。許多 App 的黑色不是真的黑，而是深灰色，比如 Asos 的頂部並不是 #000000，而是#242424。所以記得給你的顏色加一點飽和度。

6.對比的重要性

顏色是引導視覺的工具。你如果想要吸引用戶注意力，那就要靠對比來脫穎而出。重要內容或者關鍵元素，需要高對比色來突出。

（對比度使得該區域與屏幕的其餘部分產生反差）

簡評：人人都是設計師，穿衣搭配，繪畫設計，

這是一個眾所周知的事實，顏色具有固有的意義，可以引起情緒。這些含義將直接影響到用戶感知產品的方式。

當我們構建配色方案時，我們需要思考顏色對於感知層面的影響。

紅、橙、黃

• 紅色：強大、激情、危險、重要。紅色是極其刺激的顏色，想著這力量、速度，能量。紅色已經被證明能夠增加血液循環和促進新陳代謝。這就是為什麼人們看到紅色，他們會增加閱讀速度。紅色能夠抓住用戶的注意力，或突顯出某個元素。
• 黃色：快樂，友善，刺激，注意力。黃色是一種非常多才多藝的顏色，淺黃色與太陽相關聯，因此對於傳播具有積極性和溫暖度。黃色的深色（如金色）給人的印象是復古和年齡。這些較深的色調通常與永恆和智慧有關。
• 橙色：嬉戲、活力、吸引力、便宜。橙色是一種溫暖而充滿活力的顏色。充滿精力，為用戶創造溫馨感。一些研究表明，橙色代表著廉價。

綠、藍、紫

• 綠色：自然，安全，新鮮。綠色反映了環保主義和自然接近的感覺。它也意味著增長，這就是為什麼它經常與業務相關聯。綠色意味著對或錯。
• 藍色：平靜，負責任，值得信賴，可靠。藍色常常與平靜和放鬆的情緒相關聯。它也與實力和可靠性相關聯，給人以信任和敬業精神。藍色預示著內心的安全感。這就是為什麼你可能會看到銀行和技術企業使用這種顏色。社交媒體巨頭如 Facebook，Twitter 和 LinkedIn 都在網路上使用藍色的藍色。
• 紫色：豪華，神秘，浪漫，靈性。歷史上與皇室相關聯，紫色暗示了產品是高端的。

粉、黑、白、灰

• 粉色：女性，天真，青春。粉紅色以其女性氣質而聞名。
• 黑色：強大，複雜，神秘，深邃。黑色比其他顏色（包括紅色）吸引更多的注意力。這就是為什麼它最常用於文字和強調。
• 白色：純潔，健康，乾淨，無辜。白色可以突出周圍的其他顏色，白色作為次要顏色，很受歡迎。
• 灰色：中性，正式，複雜，素寫。灰色代表中立，它可以承擔黑色或白色的特徵。當用作原色時，會給人以正式的印象。

請注意，顏色的含義可能因文化和情況而異。要了解更多信息，請查看顏色的象徵意義和世界各地的顏色含義 -（極光日報）這篇文章。

8.無障礙設計

無障礙是設計色彩時候的重中之重。今天的產品必須要服務所有人，所 - 有 - 人。

※ 顏色應該對所有人友好

大約 8％ 的男性和 0.5％ 的女性會受到某種形式的色盲影響。相當於 12 名男子中有 1 名，200 名女性中有 1 名色盲。雖然有多種形式的條件，但是紅/綠色盲是最常見的。患有這種形式的色盲的人無法區分紅綠。

（左側是正常人眼中的調色盤，中、右圖是紅綠色盲眼中的調色盤）

所以，使用多種視覺線索來傳達產品中的重要狀態很重要。除了顏色之外，還可以使用筆畫，指示符，圖案，紋理或文字等元素來描述動作和內容。

（不只是顏色來傳達，還要其他的圖形來輔助）

※ 避免文字低對比度

對比是色彩理論中至關重要的一個領域。當在文本中使用顏色時，請注意，將兩個顏色相對較低的兩種顏色放在一起可能會使文本難以閱讀。

檢查對比度，以確保背景和前景顏色與色盲人或視力低的人具有足夠的對比度。

對比度表示顏色與另一種顏色的差異（通常寫為 1：1 到 21：1）。這兩個數字之間的差值越大，顏色之間的相對亮度差越大。W3C 建議對文本文字和圖像文字的對比度如下：

• 與其背景相比，小文本的對比度應至少為 4.5：1。
• 大文本（14 pt bold/18 pt regular 和更粗）應該具有至少 3：1 的對比度與其背景。

好消息是，你不必手動檢查。使用顏色對比度檢查器，只需點擊幾下就可以檢查顏色組合。

彩蛋：UX 設計師的基本工具

為了使事情變得更簡單，我還將提供一些選擇調色板的最佳工具。

※ Adobe Color CC

Adobe Color CC（以前稱為Kuler），查找、修改和創建配色方案的好工具。調色板上的每種顏色都可以單獨修改，或者選擇作為基本顏色，只需點擊幾下。調色板可以保存並添加到 library，還有一些由社區在網站上創建的優質配色方案：

※ Dribbble Search-by-color

當你想對其他設計師使用特定顏色進行視覺研究時，請到 http://dribbble.com/colors 並選擇所需的顏色。

※ Material Design

MD 指南提供了一個夢幻般的調色板，可用於圖示或開發你的產品。該調色板中的所有顏色均設計為相互協調的色調。

※ Colorzilla

ColorZilla 是 Google Chrome 和 Mozilla Firefox 的擴展程序，其中包含一系列與顏色相關的工具，包括顏色選擇器，CSS 漸變生成器和調色板瀏覽器。

※ Coolors.co

Coolors是一個強大的工具來創建多彩多姿的方案。可以簡單地鎖定所選顏色，然後按空格鍵生成新的調色板。這個工具很酷的東西是，你不僅僅只有一個結果，只需修改參考點就可以接收幾種配色方案。

我個人最喜歡的創建配色方案之一是使用照片。該工具可以上傳圖像並從中進行調色。

※ Adobe Photoshop 中的色盲模擬模式

使用 Photoshop，可以測試設計的可訪問性。只需去 View > Proof Setup，然後可以選擇兩種類型（Protanopia 型或 Deuteranopia 型）。

※ NoCoffee Vision Simulator for Chrome

為了防止設計中的無障礙問題，在設計時自己體驗色盲是個好主意。NoCoffee Vision Simulator 可用於模擬任何色差缺陷和低視力條件。例如，使用「顏色缺陷」設置「Deuteranopia」，就可以灰度查看網頁。讓我們可以站在色盲者的角度去思考。

顏色是設計師最強大的武器之一，希望上述規則能為設計師，或者對設計感興趣的你有所幫助。現在，是時候實踐了，因為色彩設計中最關鍵的一個環節，就是真的去創造，去實踐！

原文：Red, White, and Blue

日報延伸閱讀：

• - 設計師的自學手冊（附大量學習資源和工具）
• - 設計師最愛的英文字體（園長福利：附網盤資源）
• - 設計師自學手冊：配色方案指南

推薦閱讀：