網頁設計領域的業界良心Awwwards除了每天推薦好網站，定期做評比之外，還會在部落格裡面推薦各種網頁設計的技巧和總結，今天的這篇文章最初是源於一個探索性的專案，專案結果炫酷然而乍一看並沒有什麼卵用，不過，如果將這個專案同最近選出的20個配色優秀的網站相互印證，足以看出時下配色的大趨勢。當然，好人做到底，作者乾脆把時下流行的基於Material Design 的配色工具連同常用而經典的配色工具一同推薦給你，這也構成了今天文章的三大部分。OK，正文開始~
幾周以前，供職於 Jam 3 的影象開發者 Matt DesLauriers （@mattdesl）向我們展示了Awwwards 平臺上的一個有趣的發展趨勢。正如同你所看到的，Awwwards 從 2009 年開始就專注於蒐集網路上最有修的網站，而這些網站就是網頁設計趨勢分析的重要素材和來源。
“這個專案始於一個實驗：當時我剛剛開始學習Node，正打算在Awwwards上挖掘一些資料視覺化的案例。”
Matt 開發了一個工具，它可以抓取每一個Awwwards的獲獎網站的後設資料，比如站點名稱、開發者、日期、URL、縮圖，等等等等。這個工具還會分析每個網站縮圖的配色，生成一套相對粗略、包含三個主色的配色方案。
如果將其按照日期和亮度來進行排序的話，會得到下面的圖：
獲取配色方案的資料之後，工具將每個網站的三色配色方案用餅狀圖呈現出來，在Canvas2D的渲染下生成上方的圖片。在這個過程中，Matt還使用了Node.js、d3.js、Cheerio，Browserfy 等開源工具。
由於取樣巨大，資訊量驚人，想一眼洞見規律並不容易，但是仔細觀察你會看到配色方案演進還是隱隱遵循著某種趨勢和規律的。
1、20個配色最佳的“每日一站”
Awwwards 每天推薦的網站都是設計技術俱佳的優質案例，由於評選過程中網站的不同屬性都會被打分，因此配色優劣在這裡也是被量化的。所以，文章這一部分是從最近幾個月的每日一站中精選的20個配色頂尖的優質網站。如果你需要現成的配色方案，直接借鑑下面的方案吧。
Créations Namale By Phoenix The Creative Studio
LEVEL By Vide Infra
Brdr. Krüger By Relax, we are the good guys
Dream Team Katarzyna Konkowska By BrightMedia
L’Avenir, Dental Clinic By Phoenix The Creative Studio
QED Group By madeo
Quay Restaurant By Pollen
Teye By denkwerk
Weber – BBQ Cultures By UncleGrey & MediaMonks
Tens Sunglasses By Elegant Seagulls
Helbak Ceramics By Anders Bergh
Crea Carte By Dataveyes
Suspended Animations 2015 By Baptiste Briel & Flavinsky
Pablo The Flamingo By Pascal van der Haar & Nathan Gordon
Baku 2015 – Follow the flame By Steven Delcourt
Bonhomme By Bonhomme
Austrian Summer Moments By Loop
Reebok: Be More Human Experience By Venables Bell & Partners, welikesmall
BRANDTS – Museum For Art & Visual Culture By Stupid Studios
Anton & Irene By Anton & Irene, Oleg Chulakov Studio
2、Material Design 的理論與工具
隨著Material Design的流行，基於Material Design 風格的配色工具也逐漸多起來了。
完美配色: Material Design 如何讓配色更輕鬆
這是一個視訊教程，被髮布在Youtube上，所以毫無疑問你得自備梯子翻越偉大的牆來觀看視訊……
Material Design 用色準則 : 色彩應該充滿活力而意想不到
這篇用色相關的文章是Material Design官方文件的配色部分的內容，當然，它在Google的伺服器上，你知道該怎麼做了……
Material Colors
Material Palette
Material UP: Colors
3、建立配色方案的常用工具
建立配色方案的常用工具絕對是設計師的日常必備工具之一。
Coolors
Coolors 是一款直觀的配色工具，你可以以更加簡單的方式建立色彩組合，還可以生成不同的格式，比如SVG、PDF或者SCSS。
Stylify me
Stylify me 是一個幫你創造設計風格指南的網站，包括顏色、字型、大小和間距等基本元素。
Adobe Color CC
經典配色工具Color CC，它的前身一直是以Kulor而存在。現在的Color CC 已經覆蓋了各大系統平臺，雲端同步，還有支援社群。
Paletine
Paletine 是一個用來協同製作配色方案的工具。
Color-Hex
Color-Hex 是一個有趣的工具，不論是要配單色、近似色還是三色的配色方案，它都能幫你搞定。Color Hex可以根據需求生成不同色彩模式的方案，RGB、HSL和HSV和CMYK都不在話下。為了方便網頁設計師，Color Hex 還可以生成CSS程式碼。
結語
厚重的色卡、海量的網站、大把的工具，即使你擁有良好的品味，製作優秀的配色方案依然是個體力活兒。這些優秀的工具和素材使得配色方案的來源豐富用法多多，用好它們，好配色方案肯定是可以搞出來的……