藍藍設計( m.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

來源：優(yōu)設網(wǎng)

編者按：網(wǎng)頁設計領域的業(yè)界良心Awwwards除了每天推薦好網(wǎng)站，定期做評比之外，還會在博客里面推薦各種網(wǎng)頁設計的技巧和總結，今天的這篇文章最初是源于一個探索性的項目，項目結果炫酷然而乍一看并沒有什么卵用，不過，如果將這個項目同最近選出的20個配色優(yōu)秀的網(wǎng)站相互印證，足以看出時下配色的大趨勢。當然，好人做到底，作者干脆把時下流行的基于Material Design 的配色工具連同常用而經(jīng)典的配色工具一同推薦給你，這也構成了今天文章的三大部分。OK，正文開始~

幾周以前，供職于 Jam 3 的圖像開發(fā)者 Matt DesLauriers （@mattdesl）向我們展示了Awwwards 平臺上的一個有趣的發(fā)展趨勢。正如同你所看到的，Awwwards 從 2009 年開始就專注于搜集網(wǎng)絡上最有修的網(wǎng)站，而這些網(wǎng)站就是網(wǎng)頁設計趨勢分析的重要素材和來源。

“這個項目始于一個實驗：當時我剛剛開始學習Node，正打算在Awwwards上挖掘一些數(shù)據(jù)可視化的案例?！?

Matt 開發(fā)了一個工具，它可以抓取每一個Awwwards的獲獎網(wǎng)站的元數(shù)據(jù)，比如站點名稱、開發(fā)者、日期、URL、縮略圖，等等等等。這個工具還會分析每個網(wǎng)站縮略圖的配色，生成一套相對粗略、包含三個主色的配色方案。

如果將其按照日期和亮度來進行排序的話，會得到下面的圖：

獲取配色方案的數(shù)據(jù)之后，工具將每個網(wǎng)站的三色配色方案用餅狀圖呈現(xiàn)出來，在Canvas2D的渲染下生成上方的圖片。在這個過程中，Matt還使用了Node.js、d3.js、Cheerio，Browserfy 等開源工具。

由于采樣巨大，信息量驚人，想一眼洞見規(guī)律并不容易，但是仔細觀察你會看到配色方案演進還是隱隱遵循著某種趨勢和規(guī)律的。

1、20個配色最佳的“每日一站”

Awwwards 每天推薦的網(wǎng)站都是設計技術俱佳的優(yōu)質(zhì)案例，由于評選過程中網(wǎng)站的不同屬性都會被打分，因此配色優(yōu)劣在這里也是被量化的。所以，文章這一部分是從最近幾個月的每日一站中精選的20個配色頂尖的優(yōu)質(zhì)網(wǎng)站。如果你需要現(xiàn)成的配色方案，直接借鑒下面的方案吧。

Créations Namale By Phoenix The Creative Studio

LEVELBy Vide Infra

Brdr. Krüger By Relax, we are the good guys

Dream Team Katarzyna KonkowskaBy BrightMedia

L’Avenir, Dental Clinic By Phoenix The Creative Studio

QED GroupBy madeo

Quay RestaurantBy Pollen

Teye By denkwerk

Weber – BBQ Cultures By UncleGrey & MediaMonks

Tens Sunglasses By Elegant Seagulls

Helbak Ceramics By Anders Bergh

Crea CarteBy Dataveyes

Suspended Animations 2015By Baptiste Briel & Flavinsky

Pablo The FlamingoBy Pascal van der Haar & Nathan Gordon

Baku 2015 – Follow the flameBy Steven Delcourt

BonhommeBy Bonhomme

Austrian Summer MomentsBy Loop

Reebok: Be More Human ExperienceBy Venables Bell & Partners, welikesmall

BRANDTS – Museum For Art & Visual Culture By Stupid Studios

Anton & IreneBy Anton & Irene, Oleg Chulakov Studio

2、Material Design 的理論與工具

隨著Material Design的流行，基于Material Design 風格的配色工具也逐漸多起來了。

完美配色: Material Design 如何讓配色更輕松

這是一個視頻教程，被發(fā)布在Youtube上，所以毫無疑問你得自備梯子翻越偉大的墻來觀看視頻……

Material Design 用色準則 : 色彩應該充滿活力而意想不到

這篇用色相關的文章是Material Design官方文檔的配色部分的內(nèi)容，當然，它在Google的服務器上，你知道該怎么做了……

Material Colors

Material Palette

Material UP: Colors

3、創(chuàng)建配色方案的常用工具

創(chuàng)建配色方案的常用工具絕對是設計師的日常必備工具之一。

Coolors

Coolors 是一款直觀的配色工具，你可以以更加簡單的方式創(chuàng)建色彩組合，還可以生成不同的格式，比如SVG、PDF或者SCSS。

Stylify me

Stylify me 是一個幫你創(chuàng)造設計風格指南的網(wǎng)站，包括顏色、字體、大小和間距等基本元素。

Adobe Color CC

經(jīng)典配色工具Color CC，它的前身一直是以Kulor而存在?，F(xiàn)在的Color CC 已經(jīng)覆蓋了各大系統(tǒng)平臺，云端同步，還有支持社區(qū)。

Paletine

Paletine 是一個用來協(xié)同制作配色方案的工具。

Color-Hex

Color-Hex 是一個有趣的工具，不論是要配單色、近似色還是三色的配色方案，它都能幫你搞定。Color Hex可以根據(jù)需求生成不同色彩模式的方案，RGB、HSL和HSV和CMYK都不在話下。為了方便網(wǎng)頁設計師，Color Hex 還可以生成CSS代碼。