我從來都不是色彩理論的粉絲掉缺，想來大概是由于自己總是不得要領(lǐng)。我也希望自己能手執(zhí)色輪戈擒，挑選出令朋友眶明、客戶和家人都驚嘆的互補色、分散互補色和三色組合筐高。
但理論總令我費解搜囱，老實說，我從來不覺得色彩理論在我的項目中有什么作用柑土。多少有點諷刺的是蜀肘，我經(jīng)常發(fā)現(xiàn)在選擇和使用了不錯的色彩后，我才對其背后的理論有更好的認識冰单。在這篇文章中幌缝，你不會看到一個色輪，取而代之的是一種你可以拿來就用的簡單的色彩挑選流程诫欠。當(dāng)然涵卵，閱讀過程中凑懂，你的潛意識會學(xué)到一些色彩理論茵宪，我強烈建議你在幾個月后重新閱讀本文并體會其中的理論，我保證阅茶，你會有更深的理解被廓。
選擇基色
我們總是能碰到像是一千萬種色彩這類荒謬的事坏晦，想想吧，一千萬。而我們只需要選擇其中一種作為我們網(wǎng)站或品牌的基色昆婿∏虻铮基色可以說是萬物之源，因此非常重要仓蛆，但不用擔(dān)心睁冬，你不會選錯的。
如何選擇初始顏色
從無到有挑出一種顏色很簡單看疙，但那不是我們要做的豆拨。對于任何一個涉及到客戶的項目，你都應(yīng)該盡可能全面地驗證你的選擇能庆。否則施禾，事情將變成你喜歡的顏色挑戰(zhàn)他們喜歡的顏色，他們就是給你錢的客戶搁胆，所以他們總是贏弥搞。
但不要過于擔(dān)心，你只需要確保你的選擇是基于某種理由的渠旁。
選擇初始顏色的方法
利用手頭的素材
如果客戶有自己的Logo拓巧，logo 的主色通常就是你尋找的初始色
不要使用競爭對手的主色
如果你的競爭對手有很強的品牌主導(dǎo)顏色，你要做的就是在自己的產(chǎn)品中排除這些顏色
想想你的目標(biāo)用戶
一家殯儀館的網(wǎng)站與一家兒童俱樂部網(wǎng)站在色彩搭配上通常會有很大差異一死，想想誰是你的目標(biāo)用戶，你想讓他們有什么樣的感受（興奮傻唾、嚴肅投慈、被呵護等等）
不要局限于思維定勢
即使你是在為年輕女孩設(shè)計網(wǎng)站，也不必非要選用粉紅色冠骄，跳出思維定勢去獲取用戶的認可伪煤。
玩一個文字游戲
如果你糾結(jié)于色彩選擇，寫下所有與你客戶業(yè)務(wù)有關(guān)的詞語凛辣，這些詞語應(yīng)該能為你提供一些線索抱既。如果仍然糾結(jié)，找一個介紹顏色含義的網(wǎng)站扁誓，看看哪一個最匹配防泵。
現(xiàn)在，你的腦子里面應(yīng)該有一個基色了蝗敢，它應(yīng)該一種簡單的顏色捷泞，像是紅色、綠色寿谴、藍色锁右、黃色或者粉紅色。接下來我們將會選合適的明暗度。
我們假設(shè)你的選擇是藍色咏瑟。
選擇漂亮的基色
與其在 Photoshop 提供的調(diào)色板中糾結(jié)拂到，不如像藝術(shù)家一樣去”盜取“他人的設(shè)計決策。
首先码泞，訪問Dribbble 和 Designspiration 并點擊“色彩”鏈接兄旬，你將看到兩個相似的界面：
通過這種方法，你可以找到具有合適明暗度的藍色浦夷。
清新活力的品牌選擇明亮一些的藍色（下圖頂部5個中的一個）辖试，對于一些較商業(yè)和嚴肅的品牌，底部五個中的一個
在前面介紹的兩個網(wǎng)站中選擇一種明暗度劈狐，看真實的網(wǎng)站是如何使用該顏色的罐孝。你可以用CSS-Tricks 中提到的任意一種顏色拾取技術(shù)在瀏覽器中獲取顏色的值。
看到基色有這么多明暗不同的版本只是第一步莲兢，你還將知道如何選擇適當(dāng)?shù)念伾珌泶钆淠愕幕?/p>
創(chuàng)建一套內(nèi)聚的色彩組合
現(xiàn)在你手上應(yīng)該有一個 HEX 值了，我的是#30c9e8⌒牛現(xiàn)在要做的是從該顏色出發(fā)改艇，創(chuàng)建一套色彩組合。
當(dāng)提到創(chuàng)建色彩組合的時候坟岔，你可能會聯(lián)想到一些類似如下的圖片
[圖片上傳失敗...(image-a92d69-1525677589902)]](https://upload-images.jianshu.io/upload_images/306465-3284c48d063d0bcd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
這類色彩組合的問題是它們通常不太實際谒兄，大多數(shù)的色彩組合包含了太多你根本用不上的顏色，尤其是考慮到我們始終會用到三種中性的顏色：
- 白色
- 深灰色
- 淺灰色（可選）
如果你執(zhí)意要把中性顏色增加到8種或者9種社付，結(jié)果將會是一團糟承疲。其實你只需要再增加兩種顏色：
- 基色 （本文中是#30c9e8）
- 強調(diào)色
如果你能將網(wǎng)站所用顏色控制在上面提到的5中顏色中，你將會得到一個遠好于混雜了各類互補色的網(wǎng)站
尋找你的強調(diào)色
強調(diào)色在你的網(wǎng)站中只占很少一部分比例鸥咖，通常是為了引導(dǎo)用戶行動燕鸽，因此需要醒目。
你下一步要做的是打開Paletton并輸入基色的 HEX 值啼辣。
然后啊研，點擊“添加互補色”按鈕，然后你就得到你的強調(diào)色了——橙色
如果你對自動產(chǎn)生的強調(diào)色不滿意鸥拧，你還可以下圖左上角的按鈕進行微調(diào)
我個人而言党远，我非常喜歡點擊三角按鈕產(chǎn)生的紅色，所以紅色將會是我的強調(diào)色富弦。當(dāng)然麸锉，Paletton自動挑選顏色的背后是有科學(xué)理論可依的，但我們暫按不表舆声。
好了花沉，下面就是我們的色彩組合了柳爽，漂亮的藍色，醒目的紅色以及搭什么都漂亮的白色碱屁。
現(xiàn)在唯一還缺的就是一些灰色磷脯。
添加灰色
在我的大多數(shù)項目中，我發(fā)現(xiàn)2種明暗度的灰色非常有用——深灰和淺灰娩脾，你會經(jīng)常用到他們赵誓。
深灰通常是用在文字上，淺灰則是在你需要與白色有細微差異的時候使用（白色通常都是背景色）柿赊。
你可以通過下面兩種方式中的任意一種選擇你要的灰色：
- 還是通過 Dribbble 和Designspiration俩功，你可以在前面的搜索結(jié)果中尋找，或者采用另一種更簡單的方法碰声，輸入“藍色 網(wǎng)站”然后點擊搜索诡蜓。
- 如果你有 Photoshop 或者類似的圖像處理軟件，可以采用 Erica Schoonmaker’s technique 方法找到適合你基色的灰色胰挑。
創(chuàng)建和諧的灰色
這里我們采用 Erica Schoonmaker’s technique 方法蔓罚，首先隨意選擇兩種灰色(一明一暗，這里我們選擇使用#424242和#fafafa)瞻颂，然后按下面的步驟操作：
- 創(chuàng)建兩個形狀豺谈，分別用#424242和 #fafafa 填充
- 插入一個顏色填充圖層在兩個形狀之上
- 用基色填充上一步提到的圖層
- 將混合模式（Blending model）設(shè)置為重疊（overlay），將不透明度調(diào)低至5%到40%之間（這里我們將其設(shè)置為40%）
- 用顏色拾取軟件獲取兩種新灰色的數(shù)值
我要指出的是當(dāng)基色為藍色的時候贡这，該方法效果最好茬末。基色為其他顏色時最好將不透明度調(diào)低至5%到10%之間盖矫，或者直接選出兩種灰色团南。
搞定炼彪！
到此我們的色彩搭配宣告完成， 希望你為此感到驕傲正歼！
使用你的色彩組合
我們已經(jīng)有了一套色彩組合辐马，現(xiàn)在的工作是將其應(yīng)用到你的網(wǎng)站上，這完全是另一個話題了局义，不過為了讓你有個概念喜爷，簡單舉個例子。下面分別是一網(wǎng)頁的灰度設(shè)計稿和著色后版本萄唇。
小貼士：如果你糾結(jié)網(wǎng)站的色彩檩帐，可以先通過灰度設(shè)計稿確定布局，弄清楚元素間的層級關(guān)系另萤，然后嘗試不同的顏色搭配湃密。
可以看出藍色是主色诅挑，占了大量的篇幅，而且圖標(biāo)中也有采用泛源。
我們的強調(diào)色拔妥，漂亮且醒目的占據(jù)了很小的一塊區(qū)域。對強調(diào)色的使用越少达箍，其突出没龙。
深灰色用在了文字，標(biāo)志和圖標(biāo)輪廓上（即使是細小如圖標(biāo)這樣的元素缎玫，也值得去研究色彩的搭配硬纤，記住細節(jié)決定整體）。
白色和淺灰色組成了背景色赃磨。實際上可以不用淺灰色筝家，不過我發(fā)現(xiàn)這一細節(jié)的處理讓整個網(wǎng)站更加的賞心悅目。
需要強調(diào)的是煞躬，文字的顏色務(wù)必要與背景形成足夠的反差肛鹏，這樣才不會對色盲和弱視人士造成困擾。有許多工具可以幫助你尋找符合WCAG Guidelines.的顏色恩沛。兩個流行的工具分別是 WebAim Color Contrast Checker 以及 Lea Verou的 Contrast Ratio在扰。
后記
如你所見，無需更多的色彩雷客，今天我們創(chuàng)建的這款色彩組合就能打造出漂亮的網(wǎng)頁芒珠。但這并不意味你的選擇要局限在這幾種顏色中。
在設(shè)計過程當(dāng)中皱卓，你可能會說引入更多的顏色是合理的，這當(dāng)然沒問題部逮，只要細心娜汁，你完全可以利用本文介紹的技巧為你的色彩組合找到更多顏色。
重要的是兄朋，在色彩選擇這件事上掐禁，你做的越多就會變得越擅長，你會漸漸知道哪些顏色可以在一起颅和，哪些不能傅事。有時候，本文介紹的方法可能會產(chǎn)生低于你期望的結(jié)果峡扩，請隨意調(diào)整蹭越。
