國外設計師朋友分享的配色方法和一些技巧，實用性非常強，今天我們不打算介紹一些復雜的色彩理論，而且我也不太擅長這方面的內容。我們只是單純的展示一個簡單的配色流程和一些技巧，你可以直接將這個方法運用到下一個項目中。

選擇起始色

這個世界上有多少種顏色，告訴你：1000萬種。想想就覺得可怕，而且我們要從這1000萬種顏色中找到一種作為我們網站或品牌的基本色。所有的顏色都將以此為基礎，所以也特別重要。不過不要著急：跟著我來不會錯的。

如何選擇一個起始顏色

理論上是可以任性的選取一個顏色來開始配色的，這樣就容易很多，但是我們通常不這么做。在任何有甲方設計項目里，設計師都要對自己的配色方案有充分的理由和依據。不然最終會淪為設計師和客戶個人喜好之間的博弈，往往受傷的還是設計師。不過也不要想太多，我們只是希望設計師每次在選擇顏色的時候要經過認真的考慮，這樣看起來才會比較專業。

1.充分利用手中的資源

如果客戶有自己的品牌和品牌色，我們通常以此作為起始色

2.分析競品的配色方案

如果你的主要競爭對手已經有了一個比較強勢的品牌色，不要想著把它抄過來，而且要盡量把它從你的配色方案中丟掉

3.考慮你的目標用戶

一個給老年人看的網站和一個給兒童看的網站，風格肯定是不同的。要多考慮你的網站用戶，想想你希望設計的網站給他們什么樣的感覺

4.不要墨守成規

設計一個少女網站并不非得要用粉色，設計從來都沒有統一的標準。要盡量在設計中避免同質化，才能贏得用戶的青睞

5.玩文字游戲

當你一直在選色中糾結時，可以試著寫下一些和客戶業務相關聯的詞匯，這些應該可以幫助你找到一些靈感。如果還是不行，瀏覽一些關于顏色寓意的網站，看看什么顏色比較合適。

現在你腦海中應該大致已經想好了一個基本色。它可能比較抽象，像紅色，藍色，黃色，綠色這樣比較寬泛的顏色。沒關系，下一步我們來準確定位色值。

我們先假設你選的顏色是藍色

選擇精確的基本色

在這一步里，很多人可能會想到打開PS用拾色器找到一個差不多喜歡的顏色。我們不打算這樣，我們想到其他設計師的作品里去獲取一些靈感。

首先要打開Dribbble 和 Designspiration 點擊“color”鏈接，然后應該是會出現這樣的頁面：

用靈感網站來幫忙找出正確的顏色

在這里，你可找出藍色正確的色調。

如果是比較年輕，活潑一點的品牌，可以選擇淺色的，明亮的藍色（下圖的上面5種顏色比較合適），

如果是比較正式，嚴肅的，下圖的下面5種顏色就比較合適。

不同色調的藍色代表不同的含義，所以選擇還是要比較謹慎的

在網站中選擇一個色調，看看這個色調的真實設計案例。你可以使用一些顏色抓取工具來獲取瀏覽器中自己喜歡的HEX值。

這么多的藍色！你只吸取自己認為最適合的顏色就可以了，是不是很簡單

在這里，你不僅可以看到不同版本的基本色，同時也可以發現合適的顏色搭配

創建一個調色板

好了！你現在應該有一個準確的HEX色值了。我選的是#309e8。接下來我們將根據這個色值來建一個調色板。這一步其實要比想象中的要容易。

當你在思考一個配色方案的時候，你腦海里可能會有一個這樣的圖像：

這樣的色板大家應該經常看到（圖片出處: ColourLovers palettes by manekineko and sugar! )

這種類型的色板的問題在于在實際的設計中并不是非常實用，大多數這種色板的顏色數量都超過了你的需求。

而且，考慮到我們的配色方案會需要三種中性色：

白色

深灰色

淺灰色（可選）

如果你試著添加5或6種顏色到中性色中，看起來就會非常亂。其實你所需要的顏色只有兩種：

基本色（在我的案例里是：#30c9e8）

強調色（接下來我們會提到）

如果只使用上面提到的5種顏色來設計你的網站，也會比起你用了一大堆互補色系、互補色系、三色系等要好得多。

就像 Thoughtbot 和 TedTodd 這樣的網站，你并不需要復雜的顏色主題也可以設計出好看的網站

找到你的強調色

強調色在網站中用到的地方非常少，通常是為了提示用戶操作，所以一定要足夠顯眼。

下一步你只要打開Paletton網站，然后輸入基本色的HEX值：

在Paletton輸入基本色的HEX值

在這里，你可以找到你的強調色。

首先，你要點擊“Add Complementary”這個按鈕，然后就出現了一個橙色，這個就是你的強調色。

Paletton會自動為你生成一個合適的強調色

或者，你不喜歡Paletton生成的顏色，你也可以點擊網站上面的其他圖標找到更合適的。

 一個一個試，找到你喜歡的顏色

從個人角度來講，我非常喜歡Paletton生成的紅色，所以我決定把它應用到我們的配色方案中。當然，Paletton背后肯定是遵循顏色彩規律和理論，我們這里不做深入的研究。你以后會學到相關的理論，到那時就清楚了。

好了，下圖就是我們的配色方案。我們已經有了一個好看的基本色和顯眼的強調色，還把白色加到了色板中。

 我們的色板已經慢慢成型了

不過還缺少一些灰色調。

添加灰色調

在我的大多項目中，我發現了2種色調的灰色永遠都會用到——深灰色和淺灰色。在實際網頁設計中，你會經常用到的。

深灰色通常會用在字體顏色上，而淺灰色主要是當你需要和白色有一些細微區分的時候會用到（通常是背景）。

有2中方法可以幫助我們找到灰色調

你可以再次使用Dribbble 和 Designspiration 從你之前的搜索結果中去找到一些好看的灰色來搭配你的主題。

如果你用的是photoshop，也可以借用Erica Schoonmaker’s technique的方法讓你的灰色調和基本色更加協調

做出協調的灰色

下面我們用Erica的方法來找出灰色調，我們先從兩個任意的灰色開始：

新建2個形狀，分別填充顏色#424242和#fafafa

在2個形狀上面，新建一個顏色填充圖層

顏色填充圖層的顏色改為你的基本色（我的是：#30c9e8）

設置混合模式為疊加，透明度調到5%到40%之間（我的例子里是40%）

用拾色器獲取新的色值

當疊加顏色是本案例的藍色時得出的效果是非常好的，至于其他的顏色，你也可以根據實際情況調低透明到5%-10%來得到最佳結果。

選擇一個和基本色協調的灰色看似很小的細節，也會產生很不同的效果

看！我們完成了！

我們的配色方案完成了，是不是很有成就感。

完成了配色方案，接下來就是配色的應用了

應用你的配色方案

現在我們已經有了自己的配色方案，可以使用它了。配色應用其實可以用一篇全新的文章來討論，但為了加深大家的理解，我給大家展示一個網頁設計實例，這個網頁將會以灰度模式和顏色模式來展現。

提示：如果你對配色比較糾結，可以試試先用灰度模式來設計你的網頁。先區分出頁面的層次，再來進行配色嘗試.

用灰度模式來布局網頁可以幫助你更好地運用配色方案。

我們的配色方案的實際應用

正如你所看到的

藍色是我們的識別色。主要使用在大面積區域和圖標上面。

我們的強調色，紅色，很好的和基色形成反差。強調色主要使用在小塊的顏色區域，像按鈕和一些圖標上面。強調色使用的地方越少，強調的效果就會越明顯。

深灰色主要使用在文字，logo和圖標的輪廓上面。（在圖標上適當的使用深灰色，會起到很不錯的效果）。

白色和淺灰色主要是在背景上的應用。在這個例子中，淺灰色其實并不是一定非要使用，但是我發現這個小細節會讓網頁看起來更優雅。還有一點非常重要，在網頁顏色和字體的設計中，我們要保留足夠的對比度，這樣可以方便色盲或色弱的用戶閱讀你的網頁。有很多的工具可幫助你在顏色的選擇上符合WCAG（Web內容無障礙指南）標準。我給大家推薦WebAim Color Contrast Checker 和Contrast Ratio 。

結語

就像我在例子里面展示的配色方案中，只不過使用了區區幾種顏色。但是這并不意味著你只能在這在這幾種顏色里搭配色彩。

使用上面的技巧，你可以根據具體需求擴展你的調色板。

在設計過程中，你可能需要更多是顏色來表達你的想法。充分利用上面的步驟可以幫助你找到合適的顏色來配合你的主題。

配色技巧不是一朝一夕的事情，它需要長時間的實踐和積累。在這個過程中你會慢慢掌握色彩的規律，哪些顏色適合在一起，哪些不適合。有時你會覺得上面的方法不是很令人滿意， 沒關系，可以根據具體場景進行調整。

轉載來自：UI中國

本文地址：http://www.www.luhongsuye.cn/html/blogs/view-43.html

關于nicedesign奈思設計

nicedesign奈思設計是領先的用戶體驗設計與互聯網品牌建設公司,為眾多企業創造了專業與創新的設計解決方案,提供交互設計、UI界面設計、網站設計開發、網站建設、移動界面設計、軟件界面設計、互聯網品牌建設和用戶體驗咨詢服務。

查看精選案例   |  nicedesign服務體系    |  了解nicedesign動態