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)，然后按下面的步驟操作：
- 創建兩個形狀，分別用#424242和 #fafafa 填充
- 插入一個顏色填充圖層在兩個形狀之上
- 用基色填充上一步提到的圖層
- 將混合模式（Blending model）設置為重疊（overlay），將不透明度調低至5%到40%之間（這里我們將其設置為40%）
- 用顏色拾取軟件獲取兩種新灰色的數值
我要指出的是當基色為藍色的時候，該方法效果最好。基色為其他顏色時最好將不透明度調低至5%到10%之間，或者直接選出兩種灰色。
搞定！
到此我們的色彩搭配宣告完成， 希望你為此感到驕傲！
使用你的色彩組合
我們已經有了一套色彩組合，現在的工作是將其應用到你的網站上，這完全是另一個話題了，不過為了讓你有個概念，簡單舉個例子。下面分別是一網頁的灰度設計稿和著色后版本。
小貼士：如果你糾結網站的色彩，可以先通過灰度設計稿確定布局，弄清楚元素間的層級關系，然后嘗試不同的顏色搭配。
可以看出藍色是主色，占了大量的篇幅，而且圖標中也有采用。
我們的強調色，漂亮且醒目的占據了很小的一塊區域。對強調色的使用越少，其突出。
深灰色用在了文字，標志和圖標輪廓上（即使是細小如圖標這樣的元素，也值得去研究色彩的搭配，記住細節決定整體）。
白色和淺灰色組成了背景色。實際上可以不用淺灰色，不過我發現這一細節的處理讓整個網站更加的賞心悅目。
需要強調的是，文字的顏色務必要與背景形成足夠的反差，這樣才不會對色盲和弱視人士造成困擾。有許多工具可以幫助你尋找符合 WCAG Guidelines. 的顏色。兩個流行的工具分別是 WebAim Color Contrast Checker 以及 Lea Verou 的 Contrast Ratio 。
后記
如你所見，無需更多的色彩，今天我們創建的這款色彩組合就能打造出漂亮的網頁。但這并不意味你的選擇要局限在這幾種顏色中。
在設計過程當中，你可能會說引入更多的顏色是合理的，這當然沒問題，只要細心，你完全可以利用本文介紹的技巧為你的色彩組合找到更多顏色。
重要的是，在色彩選擇這件事上，你做的越多就會變得越擅長，你會漸漸知道哪些顏色可以在一起，哪些不能。有時候，本文介紹的方法可能會產生低于你期望的結果，請隨意調整。