超實用！幫你快速搞定網(wǎng)頁配色的方法（附配色神器）

編者按：完全零基礎(chǔ)的新手如何做好網(wǎng)頁配色？今天@喪心病狂十六夜貓?這篇好文，從網(wǎng)頁基色、強調(diào)色、深色到應(yīng)用整個配色方案都有詳細(xì)的流程與教學(xué)，每個步驟幾乎都不用思考，用文章提供的配色神器就可以搞定了，你只要決定整個風(fēng)格就行了。好東西千萬別錯過，來收！

目錄

1. 決定基色
2. 決定強調(diào)色
3. 決定深色
4. 讓我們應(yīng)用配色方案

01.?首先決定基色

首先，來決定網(wǎng)站的基色吧！雖然說你可以使用任何你喜歡的顏色，但為了讓別人理解你的設(shè)計意圖和理念，盡量還是需要注意以下幾點。

善于使用手邊的資料

客戶端的標(biāo)志上常用的顏色，往往是成功的。

避免使用競爭對手的顏色

品牌顏色的差異性是非常重要的。

了解你的用戶層所喜歡的顏色

不管面對的是怎樣的用戶，你都要知道他們適合什么樣的顏色。

不要使用千篇一律的顏色

少女向的設(shè)計并不意味著就是粉紅色，要將你的創(chuàng)意展現(xiàn)出來。

決定一個關(guān)鍵字

為了展現(xiàn)出品牌和項目的氛圍、將關(guān)鍵字涂上顏色，在配色遇到困難時是非常便利的方法。

為你的作品設(shè)計一個良好的配色方案，參考別人的優(yōu)秀的設(shè)計是非常有必要的！通過在下列網(wǎng)站上點擊【color】按鈕，你可以根據(jù)你的直覺來選擇一個顏色。

• Dribbble
• Designspiration

選擇喜歡的顏色之后點擊Update、與之相關(guān)聯(lián)的就以設(shè)計列表的形式表現(xiàn)出來了。這個時候你再來創(chuàng)建一個配色版，再選取顏色時我想應(yīng)該會更加順利。

在?Designspiration?這可以選擇五種顏色相互組合、在形象更相符的作品中選擇合適的配色作為參考。舉個例子，在這里選擇淡藍(lán)色和粉紅色。

點擊Search按鈕、與之相關(guān)聯(lián)的作品就顯示出來了。

在調(diào)色板中選擇顏色作為參考時、調(diào)色板的上段顯示的作品是最新的，設(shè)計思維最活躍的作品。而下面的，則是更值得信賴的，給企業(yè)的配色作為參考的作品。

如果你找到了喜歡的作品、可以用Chrome的拓展程序?qū)㈩伾槌?、你也可以也可以用Photoshop直接將顏色選取出來（在吸管工具的狀態(tài)下，先按住鼠標(biāo)左鍵，然后按住鍵盤上的Option鍵，就可以將【如果是Windows請按ALT鍵CS5以上版本可以使用】將鼠標(biāo)拖動到屏幕外面選取顏色了。）

02.?接下來決定強調(diào)色

強調(diào)色就是讓觀眾特別的引起注意的，但是使用的機會不多，起到強調(diào)效果的顏色。Paletton這個網(wǎng)站，使用色彩的基本原理，可以很輕松的創(chuàng)建一個美麗的配色方案。

Paletton

基色在前面已經(jīng)決定好了，「?淡藍(lán)色（#57CBEC）」輸入到左下角的 Base RGB中、下面的設(shè)計案例用來參考，讓我們來點擊「AddComplementary（追加上輔色）」按鈕。另外、通過點擊左上角的圖標(biāo)，有大量的可供你決定的配色方案。

在這一次，我們的強調(diào)色、就選擇顯眼的紅色（#FF6F59）吧。

03.?然后決定深色

在WEB項目中，你可能需要靈活運用同種顏色的不同深淺來進(jìn)行配色。一個是深灰色的文字文本，而另一個，則是用來作為背景設(shè)計時布置不同的內(nèi)容時所運用的較淺的灰色。

通過執(zhí)行下面的步驟，選擇配色進(jìn)行調(diào)和，你可以創(chuàng)建一個最初的灰色。

打開Photoshop、創(chuàng)建一個新文件，創(chuàng)建兩個矩形，填充色分別為#424242和#fafafa

然后創(chuàng)建一個新圖層，在上面填充基本色（#57CBEC）。

在圖層上右鍵選擇混合模式，設(shè)置為「疊加」、不透明度在「4-40%」的范圍內(nèi)調(diào)整。

然后用吸管工具將顏色選取出來就完成了。

這是基本顏色適用之前的樣子。不管怎樣的配色都可以用這個點來對應(yīng)。

然后這個基本顏色適用之后。只有一點點藍(lán)色，我們創(chuàng)建出了#404d51和#fafbfb?這兩種顏色。

最后在這里添加上白色（#ffffff），全部5種顏色配色的配色版就順利的做成了。

04.?讓我們來使用已經(jīng)弄好的配色吧

那么讓我們將已經(jīng)做成的配色板上的配色，運用到你的網(wǎng)頁中吧！這一次的設(shè)計案例，我們在這個簡單的網(wǎng)站線框上練習(xí)使用配色吧，、在這里你可以利用免費的PSD文件?One PageWebsite Wireframes ：http://pan.baidu.com/s/1eR3WMDs

然后這就是應(yīng)用了我們之前配置好的配色版之后的樣子。這是只需要五分鐘左右就能完成的工作，一個擁有你個人風(fēng)格的網(wǎng)頁設(shè)計就完成了。

我們再嘗試著做一些別的調(diào)色版，然后再相同的模版上使用。這是用橘黃色和藍(lán)色組合出來的配色。

如果你想表現(xiàn)出更平靜的氛圍時可以使用這樣的配色。

就算是相同顏色的配色版，應(yīng)用的設(shè)計要素不同，給人的印象也就不同。如果你想突出的重點沒有被凸顯出來，那就回到上色時的那一步好好想想吧。

如果你還需要更多的豐富多彩的配色方案，通過重復(fù)上面的步驟，你可以將你的調(diào)色板無限的延長。

那么，全文到這里就結(jié)束了，步驟總結(jié)起來還是很簡單的，大家不妨也去試一試，一起來感受設(shè)計的樂趣吧~

「優(yōu)設(shè)四月份人氣最高的文章」

Top 1：錘子科技設(shè)計總監(jiān)羅子雄的優(yōu)設(shè)專訪
《優(yōu)設(shè)訪談！錘子科技設(shè)計總監(jiān)羅子雄的全能自學(xué)之路》

Top 2：11個經(jīng)典的老牌設(shè)計素材網(wǎng)站
《實用干貨！11個人氣超高的設(shè)計素材匯總網(wǎng)站》

Top 3：零基礎(chǔ)也能學(xué)會的水墨字效果
《PS教程！教你五分鐘快速繪制大氣磅礴的水墨字效果》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量112萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com