首页 > 网站建设 > 2015年最优秀的20款网站配色方案(附配色工具)
2019
07-26

2015年最优秀的20款网站配色方案(附配色工具)

2015年最优秀的20款网站配色方案(附配色工具) - 第1张  | 鹿鸣天涯

编者按:网页设计领域的业界良心Awwwards除了每天推荐好网站,定期做评比之外,还会在博客里面推荐各种网页设计的技巧和总结,今天的这篇文章最初是源于一个探索性的项目,项目结果炫酷然而乍一看并没有什么卵用,不过,如果将这个项目同最近选出的20个配色优秀的网站相互印证,足以看出时下配色的大趋势。当然,好人做到底,作者干脆把时下流行的基于Material Design 的配色工具连同常用而经典的配色工具一同推荐给你,这也构成了今天文章的三大部分。OK,正文开始~

几周以前,供职于 Jam 3 的图像开发者 Matt DesLauriers (@mattdesl)向我们展示了Awwwards 平台上的一个有趣的发展趋势。正如同你所看到的,Awwwards 从 2009 年开始就专注于搜集网络上最有修的网站,而这些网站就是网页设计趋势分析的重要素材和来源。

“这个项目始于一个实验:当时我刚刚开始学习Node,正打算在Awwwards上挖掘一些数据可视化的案例。”

Matt 开发了一个工具,它可以抓取每一个Awwwards的获奖网站的元数据,比如站点名称、开发者、日期、URL、缩略图,等等等等。这个工具还会分析每个网站缩略图的配色,生成一套相对粗略、包含三个主色的配色方案。

2015年最优秀的20款网站配色方案(附配色工具) - 第2张  | 鹿鸣天涯

如果将其按照日期和亮度来进行排序的话,会得到下面的图:

2015年最优秀的20款网站配色方案(附配色工具) - 第3张  | 鹿鸣天涯

获取配色方案的数据之后,工具将每个网站的三色配色方案用饼状图呈现出来,在Canvas2D的渲染下生成上方的图片。在这个过程中,Matt还使用了Node.js、d3.js、Cheerio,Browserfy 等开源工具。

由于采样巨大,信息量惊人,想一眼洞见规律并不容易,但是仔细观察你会看到配色方案演进还是隐隐遵循着某种趋势和规律的。

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

Awwwards 每天推荐的网站都是设计技术俱佳的优质案例,由于评选过程中网站的不同属性都会被打分,因此配色优劣在这里也是被量化的。所以,文章这一部分是从最近几个月的每日一站中精选的20个配色顶尖的优质网站。如果你需要现成的配色方案,直接借鉴下面的方案吧。

Créations Namale By Phoenix The Creative Studio

2015年最优秀的20款网站配色方案(附配色工具) - 第4张  | 鹿鸣天涯

LEVEL By Vide Infra

2015年最优秀的20款网站配色方案(附配色工具) - 第5张  | 鹿鸣天涯

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

2015年最优秀的20款网站配色方案(附配色工具) - 第6张  | 鹿鸣天涯

Dream Team Katarzyna Konkowska By BrightMedia

2015年最优秀的20款网站配色方案(附配色工具) - 第7张  | 鹿鸣天涯

L’Avenir, Dental Clinic By Phoenix The Creative Studio

2015年最优秀的20款网站配色方案(附配色工具) - 第8张  | 鹿鸣天涯

QED Group By madeo

2015年最优秀的20款网站配色方案(附配色工具) - 第9张  | 鹿鸣天涯

Quay Restaurant By Pollen

2015年最优秀的20款网站配色方案(附配色工具) - 第10张  | 鹿鸣天涯

Teye By denkwerk

2015年最优秀的20款网站配色方案(附配色工具) - 第11张  | 鹿鸣天涯

Weber – BBQ Cultures By UncleGrey & MediaMonks

2015年最优秀的20款网站配色方案(附配色工具) - 第12张  | 鹿鸣天涯

Tens Sunglasses By Elegant Seagulls

2015年最优秀的20款网站配色方案(附配色工具) - 第13张  | 鹿鸣天涯

Helbak Ceramics By Anders Bergh

2015年最优秀的20款网站配色方案(附配色工具) - 第14张  | 鹿鸣天涯

Crea Carte By Dataveyes

2015年最优秀的20款网站配色方案(附配色工具) - 第15张  | 鹿鸣天涯

Suspended Animations 2015 By Baptiste Briel & Flavinsky

2015年最优秀的20款网站配色方案(附配色工具) - 第16张  | 鹿鸣天涯

Pablo The Flamingo By Pascal van der Haar & Nathan Gordon

2015年最优秀的20款网站配色方案(附配色工具) - 第17张  | 鹿鸣天涯

Baku 2015 – Follow the flame By Steven Delcourt

2015年最优秀的20款网站配色方案(附配色工具) - 第18张  | 鹿鸣天涯

Bonhomme By Bonhomme

2015年最优秀的20款网站配色方案(附配色工具) - 第19张  | 鹿鸣天涯

Austrian Summer Moments By Loop

2015年最优秀的20款网站配色方案(附配色工具) - 第20张  | 鹿鸣天涯

Reebok: Be More Human Experience By Venables Bell & Partners, welikesmall

2015年最优秀的20款网站配色方案(附配色工具) - 第21张  | 鹿鸣天涯

BRANDTS – Museum For Art & Visual Culture By Stupid Studios

2015年最优秀的20款网站配色方案(附配色工具) - 第22张  | 鹿鸣天涯

Anton & Irene By Anton & Irene, Oleg Chulakov Studio

2015年最优秀的20款网站配色方案(附配色工具) - 第23张  | 鹿鸣天涯

2、Material Design 的理论与工具

随着Material Design的流行,基于Material Design 风格的配色工具也逐渐多起来了。

完美配色: Material Design 如何让配色更轻松

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

Material Design 用色准则 : 色彩应该充满活力而意想不到

2015年最优秀的20款网站配色方案(附配色工具) - 第24张  | 鹿鸣天涯

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

Material Colors

2015年最优秀的20款网站配色方案(附配色工具) - 第25张  | 鹿鸣天涯

Material Palette

2015年最优秀的20款网站配色方案(附配色工具) - 第26张  | 鹿鸣天涯

Material UP: Colors

2015年最优秀的20款网站配色方案(附配色工具) - 第27张  | 鹿鸣天涯

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

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

Coolors

2015年最优秀的20款网站配色方案(附配色工具) - 第28张  | 鹿鸣天涯

Coolors 是一款直观的配色工具,你可以以更加简单的方式创建色彩组合,还可以生成不同的格式,比如SVG、PDF或者SCSS。

Stylify me

2015年最优秀的20款网站配色方案(附配色工具) - 第29张  | 鹿鸣天涯

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

Adobe Color CC

2015年最优秀的20款网站配色方案(附配色工具) - 第30张  | 鹿鸣天涯

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

Paletine

2015年最优秀的20款网站配色方案(附配色工具) - 第31张  | 鹿鸣天涯

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

Color-Hex

2015年最优秀的20款网站配色方案(附配色工具) - 第32张  | 鹿鸣天涯

Color-Hex 是一个有趣的工具,不论是要配单色、近似色还是三色的配色方案,它都能帮你搞定。Color Hex可以根据需求生成不同色彩模式的方案,RGB、HSL和HSV和CMYK都不在话下。为了方便网页设计师,Color Hex 还可以生成CSS代码。

结语

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

2015流行的设计趋势:

原文地址:awwwards
优设译者:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量99万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

最后编辑:
作者:jacky
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。