The awards for design, creativity and innovation on the Internet

Are you a member? Register / Login

Awwwards

Home
Winners
Nominees
Directory
Shop
Jobs
Blog
About us
Submit Your Site

Search in
Websites
Users
Blog

Blog
Category
Tag
Date

Design & Illustration

Media
News
Resources & Tools
The Best Articles
Web Design
Inspirational talks
Interviews
(*) Popular

Agencies & Studios

Animation
Apps & Web Apps
Art & Design
Business & Productivity
Case Study
Code & Front-End
Coding Techniques
Creative Advertising
Events & Conferences
Fonts
Gadgets
Giveaways
HTML5 & CSS3
Icons
Illustration
Inspiration
Interviews
JavaScript
Layout Design
Learning Resources
Motion Graphics
Packaging & Graphic
Photography
Plugins & Frameworks
Responsive
Sites of the Month
Sites of the Year
Tutorials
Typography
(*) Popular

Last 3 Months
Last 6 Months
Last Year

Menu

Home
Winners
Sites of the Day
Sites of the Month
Sites of the Year
Honorable Mentions
Winners List
Nominees
Directory
Jobs
 Blog
About
About us
Certificates
Jury 2016
Developer award
Evaluation system
Status system
SEARCH
Search... OK
Events
Awwwards Conference
Awwwards Book

Recognition and prestige for Web Designers and Agencies

Trendy Web Color Palettes and Material Design Color Schemes & Tools

June 19
By awwwards-team
In Design & Illustration

Data Visualization Experiment in the Awwwards Platform

Share on Facebook
Share on Twitter
Share on Google
Share on Stumbleupon
Share on Pinterest
Share on Linkedin

A few weeks ago, Matt DesLauriers @mattdesl, a graphics programmer working at Jam3, showed us an interesting development carried out on our platform. As you
already know, Awwwards has been collecting information on the most noteworthy websites since 2009 something which makes us an essential source for web design
trend analysis.

The project started as an experiment, I was just learning Node at the time and decided to see if I could scrape Awwwards for some data visualization.

Matt developed a tool which requests each page of the Awwwards winner gallery, then searches the HTML for all the available metadata like site name, author, date, URL,
thumbnail, etc. The RGB pixels of each thumbnail are analyzed to get a rough color palette of the 3 primary colors.

The result is this brilliant data visualization in which each site is represented as a pie graph showing the distribution of its 3 primary colors. The visualization was rendered
using Canvas2D. Matt also made use of a lot of open source tools including Node.js, d3.js, Cheerio, and Browserfy.

1. 20 Sites of the Day with Great Color Schemes

In the second part of this article, we have done a list the color palettes which have been the most present over the last few months. Said list shall include the most recent
SOTM.

Crations Namale By Phoenix The Creative Studio

LEVEL By Vide Infra

Brdr. Krger 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
Well Storied By Tool and Y&R NY

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. Color in Material Design: Theory and Tools

As is expected, lately there has been a proliferation of color tools based on the Material Design Philosophy that Google unveiled at I/O 2014. This has been the most
important trend of recent times, and thats why weve made a list of resources which will help you to understand and implement the color-cues provided to us by Material
Design.

Palette Perfect: How Material Design Makes Color Easy

Palette Perfect: How Material Design Makes Color Easy

Material Design Color Guidelines:Color should be unexpected and vibrant.

Material Colors

Material Palette
Material UP: Colors

3. Useful Tools for Creating and Understanding Color Palettes

To complement our short selection on color, we also are including a variety of tools, some of which have been necessary for many years now and others which are newer
and have brought innovation to the tough task of creating a unique color scheme.

Coolors
Coolors is an intuitive application which allows us to generate color combinations in a simple way, share palettes, and even export them to different formats like SVG,
PDF, or SCSS.
 http://coolors.co

Stylify me

Stylify me provides us with the fundamentals of the style guide of a site including colors, fonts, sizing, and spacing.

http://stylifyme.com

Adobe Color CC
A classic tool to create color schemes with the color wheel or browse thousands of color combinations from the Kuler community.
 https://color.adobe.com

Paletton

A designer tool for creating color combinations that work together well.

http://paletton.com/

Color-Hex
Color-hex is an interesting tool which helps us to select monochromatic colors, triadic colors, analogous colors, or shades. It allows us to visualize our palette in different
color models like RGB, HSL, HSV, and CMYK. It also generates the CSS code fo the selected color with suggested combinations for text-shadows, backgrounds, etc.
http://www.color-hex.com/
 http://www.color-
hex.com

Share on Facebook
Share on Twitter
Share on Google
Share on Stumbleupon
Share on Pinterest
Share on Linkedin

By Awwwards Team

awwwards.com

Awwwards recognizing the talent and effort of the best web designers, developers and agencies in the world. We aim to create a meeting point where web professionals
from across the globe can come to find inspiration; a space for debate; a place to share knowledge and experience; give and receive constructive and respectful critiques.
Always hungry.

BLOG Inspiration for web designers and developers

The Future of Design According to 7 Web
Interview
Visionaries
with Spring/Summer WinnersConverse
of Developer
Diamonds
Awardby
ofResn
the Year
Wins August's
Vote Site
Nowoffor
theAug
Mo

Design & Illustration / Interviews Interviews News News / Web Design

13 September 09 September 06 September 31 August

Solarin by MediaM
Build A Simple Javascript App The MVC Way IoT: Hardware Prototyping for the RestNews
of Us/ Web Design
12 August
Web Design Vote Now for July's #SOTM Resources & Tools
10 August 02 August
News / Web Design
01 August

Brain Food! eBoo

Web Design
28 July
Video and Takeaways from Awwwards Conference
Get Creative:
NewAwwwards
York CityNew York CityResn
Mixtape
Wins the Title of #SOTM for June
News Media Media / News
19 July 07 July 06 July
 Fusing Code and C
Conference

Inspirational talks
05 July

Twitter
Facebook
Google+

Pinterest
Vimeo Vote now for June's #SOTM The Future of the Web is Printed with Chiara Aliotta
RSS @Awwwards Conference
News / Web Design
30 June Inspirational talks
28 June

Conference and prize-giving

Read more

Certificates and prizes

Read more

Jury 2016

Read more

Mockups, Photos, Icons and more...

Official Sponsor

The Awwwards that recognize the talent and effort of the best web designers in the World.
 COPYRIGHT 2010-16

About us
Evaluation System
Legal terms
Contact us
Help