Web開發者色彩搭配快速指南

我從來都不是色彩理論的粉絲，想來大概是由於自己總是不得要領。我也希望自己能手執色輪，挑選出令朋友、客戶和家人都驚歎的互補色、分散互補色和三色組合。

但理論總令我費解，老實說，我從來不覺得色彩理論在我的專案中有什麼作用。多少有點諷刺的是，我經常發現在選擇和使用了不錯的色彩後，我才對其背後的理論有更好的認識。在這篇文章中，你不會看到一個色輪，取而代之的是一種你可以拿來就用的簡單的色彩挑選流程。當然，閱讀過程中，你的潛意識會學到一些色彩理論，我強烈建議你在幾個月後重新閱讀本文並體會其中的理論，我保證，你會有更深的理解。

選擇基色

我們總是能碰到像是一千萬種色彩這類荒謬的事，想想吧，一千萬。而我們只需要選擇其中一種作為我們網站或品牌的基色。基色可以說是萬物之源，因此非常重要，但不用擔心，你不會選錯的。

如何選擇初始顏色

從無到有挑出一種顏色很簡單，但那不是我們要做的。對於任何一個涉及到客戶的專案，你都應該儘可能全面地驗證你的選擇。否則，事情將變成你喜歡的顏色挑戰他們喜歡的顏色，他們就是給你錢的客戶，所以他們總是贏。

但不要過於擔心，你只需要確保你的選擇是基於某種理由的。

選擇初始顏色的方法

利用手頭的素材

如果客戶有自己的Logo，logo 的主色通常就是你尋找的初始色

不要使用競爭對手的主色

如果你的競爭對手有很強的品牌主導顏色，你要做的就是在自己的產品中排除這些顏色

想想你的目標使用者

一家殯儀館的網站與一家兒童俱樂部網站在色彩搭配上通常會有很大差異，想想誰是你的目標使用者，你想讓他們有什麼樣的感受（興奮、嚴肅、被呵護等等）

不要侷限於思維定勢

即使你是在為年輕女孩設計網站，也不必非要選用粉紅色，跳出思維定勢去獲取使用者的認可。

玩一個文字遊戲

如果你糾結於色彩選擇，寫下所有與你客戶業務有關的詞語，這些詞語應該能為你提供一些線索。如果仍然糾結，找一個介紹顏色含義的網站，看看哪一個最匹配。

現在，你的腦子裡面應該有一個基色了，它應該一種簡單的顏色，像是紅色、綠色、藍色、黃色或者粉紅色。接下來我們將會選合適的明暗度。

我們假設你的選擇是藍色。

選擇漂亮的基色

與其在 Photoshop 提供的調色盤中糾結，不如像藝術家一樣去”盜取“他人的設計決策。

首先，訪問Dribbble 和 Designspiration 並點選“色彩”連結，你將看到兩個相似的介面：

通過這種方法，你可以找到具有合適明暗度的藍色。

清新活力的品牌選擇明亮一些的藍色（下圖頂部5箇中的一個），對於一些較商業和嚴肅的品牌，底部五個中的一個

在前面介紹的兩個網站中選擇一種明暗度，看真實的網站是如何使用該顏色的。你可以用CSS-Tricks 中提到的任意一種顏色拾取技術在瀏覽器中獲取顏色的值。

看到基色有這麼多明暗不同的版本只是第一步，你還將知道如何選擇適當的顏色來搭配你的基色。

建立一套內聚的色彩組合

現在你手上應該有一個 HEX 值了，我的是#30c9e8。現在要做的是從該顏色出發，建立一套色彩組合。

當提到建立色彩組合的時候，你可能會聯想到一些類似如下的圖片

這類色彩組合的問題是它們通常不太實際，大多數的色彩組合包含了太多你根本用不上的顏色，尤其是考慮到我們始終會用到三種中性的顏色：

• 白色
• 深灰色
• 淺灰色（可選）

如果你執意要把中性顏色增加到8種或者9種，結果將會是一團糟。其實你只需要再增加兩種顏色：

• 基色 （本文中是#30c9e8）
• 強調色

如果你能將網站所用顏色控制在上面提到的5中顏色中，你將會得到一個遠好於混雜了各類互補色的網站

尋找你的強調色

強調色在你的網站中只佔很少一部分比例，通常是為了引導使用者行動，因此需要醒目。

你下一步要做的是開啟Paletton並輸入基色的 HEX 值。

然後，點選“新增互補色”按鈕，然後你就得到你的強調色了——橙色

如果你對自動產生的強調色不滿意，你還可以下圖左上角的按鈕進行微調

我個人而言，我非常喜歡點選三角按鈕產生的紅色，所以紅色將會是我的強調色。當然，Paletton自動挑選顏色的背後是有科學理論可依的，但我們暫按不表。

好了，下面就是我們的色彩組合了，漂亮的藍色，醒目的紅色以及搭什麼都漂亮的白色。

現在唯一還缺的就是一些灰色。

新增灰色

在我的大多數專案中，我發現2種明暗度的灰色非常有用——深灰和淺灰，你會經常用到他們。

深灰通常是用在文字上，淺灰則是在你需要與白色有細微差異的時候使用（白色通常都是背景色）。

你可以通過下面兩種方式中的任意一種選擇你要的灰色：

• 還是通過 Dribbble 和Designspiration，你可以在前面的搜尋結果中尋找，或者採用另一種更簡單的方法，輸入“藍色 網站”然後點選搜尋。
• 如果你有 Photoshop 或者類似的影象處理軟體，可以採用 Erica Schoonmaker’s technique 方法找到適合你基色的灰色。

建立和諧的灰色

這裡我們採用 Erica Schoonmaker’s technique 方法，首先隨意選擇兩種灰色(一明一暗，這裡我們選擇使用#424242和#fafafa)，然後按下面的步驟操作：

1. 建立兩個形狀，分別用#424242和 #fafafa 填充
2. 插入一個顏色填充圖層在兩個形狀之上
3. 用基色填充上一步提到的圖層
4. 將混合模式（Blending model）設定為重疊（overlay），將不透明度調低至5%到40%之間（這裡我們將其設定為40%）
5. 用顏色拾取軟體獲取兩種新灰色的數值

我要指出的是當基色為藍色的時候，該方法效果最好。基色為其他顏色時最好將不透明度調低至5%到10%之間，或者直接選出兩種灰色。

搞定！

到此我們的色彩搭配宣告完成， 希望你為此感到驕傲！

使用你的色彩組合

我們已經有了一套色彩組合，現在的工作是將其應用到你的網站上，這完全是另一個話題了，不過為了讓你有個概念，簡單舉個例子。下面分別是一網頁的灰度設計稿和著色後版本。

小貼士：如果你糾結網站的色彩，可以先通過灰度設計稿確定佈局，弄清楚元素間的層級關係，然後嘗試不同的顏色搭配。

可以看出藍色是主色，佔了大量的篇幅，而且圖示中也有采用。

我們的強調色，漂亮且醒目的佔據了很小的一塊區域。對強調色的使用越少，其突出。

深灰色用在了文字，標誌和圖示輪廓上（即使是細小如圖示這樣的元素，也值得去研究色彩的搭配，記住細節決定整體）。

白色和淺灰色組成了背景色。實際上可以不用淺灰色，不過我發現這一細節的處理讓整個網站更加的賞心悅目。

需要強調的是，文字的顏色務必要與背景形成足夠的反差，這樣才不會對色盲和弱視人士造成困擾。有許多工具可以幫助你尋找符合WCAG Guidelines.的顏色。兩個流行的工具分別是 WebAim Color Contrast Checker 以及 Lea Verou的 Contrast Ratio。

後記

如你所見，無需更多的色彩，今天我們建立的這款色彩組合就能打造出漂亮的網頁。但這並不意味你的選擇要侷限在這幾種顏色中。

在設計過程當中，你可能會說引入更多的顏色是合理的，這當然沒問題，只要細心，你完全可以利用本文介紹的技巧為你的色彩組合找到更多顏色。

重要的是，在色彩選擇這件事上，你做的越多就會變得越擅長，你會漸漸知道哪些顏色可以在一起，哪些不能。有時候，本文介紹的方法可能會產生低於你期望的結果，請隨意調整。