2015年最优秀的20款网站配色方案-yb体育官方

几周以前，供职于 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个配色顶尖的优质网站。如果你需要现成的配色方案，直接借鉴下面的方案吧。

 by phoenix the creative studio

 by vide infra

by relax, we are the good guys

 by brightmedia

by phoenix the creative studio

 by madeo

 by pollen

 by denkwerk

 by unclegrey & mediamonks

by elegant seagulls

 by anders bergh

 by dataveyes

 by baptiste briel & flavinsky

 by pascal van der haar & nathan gordon

 by steven delcourt

 by bonhomme

 by loop

 by venables bell & partners, welikesmall

by stupid studios

 by anton & irene, oleg chulakov studio

 2、material design 的理论与工具

随着material design的流行，基于material design 风格的配色工具也逐渐多起来了。

这是一个视频教程，被发布在youtube上，所以毫无疑问你得自备梯子翻越伟大的墙来观看视频……

这篇用色相关的文章是material design官方文档的配色部分的内容，当然，它在google的服务器上，你知道该怎么做了……

3、创建配色方案的常用工具

创建配色方案的常用工具绝对是设计师的日常必备工具之一。

coolors 是一款直观的配色工具，你可以以更加简单的方式创建色彩组合，还可以生成不同的格式，比如svg、pdf或者scss。

stylify me 是一个帮你创造设计风格指南的网站，包括颜色、字体、大小和间距等基本元素。

经典配色工具color cc，它的前身一直是以kulor而存在。现在的color cc 已经覆盖了各大系统平台，云端同步，还有支持社区。

paletine 是一个用来协同制作配色方案的工具。

color-hex 是一个有趣的工具，不论是要配单色、近似色还是三色的配色方案，它都能帮你搞定。color hex可以根据需求生成不同色彩模式的方案，rgb、hsl和hsv和cmyk都不在话下。为了方便网页设计师，color hex 还可以生成css代码。

        结语

厚重的色卡、海量的网站、大把的工具，即使你拥有良好的品味，制作优秀的配色方案依然是个体力活儿。这些优秀的工具和素材使得配色方案的来源丰富用法多多，用好它们，好配色方案肯定是可以搞出来的……