Recognition and prestige for Web Designers and Agencies

Trendy Web Color Palettes and Material Design Color Schemes & Tools

Data Visualization Experiment in the Awwwards Platform

  • 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.

Color Palettes

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.

#c5d5cb #9fa8a3 #e3e0cf #fff

Créations Namale By Phoenix The Creative Studio

#c0dfd9 #e9ece5 #b3c2bf #3b3a36

LEVEL By Vide Infra

#edd9c0 #c9d8c5 #a8b6bf #7d4627

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

#c9c9c9 #e3e3e3 #9ad3de #89bdd3

Dream Team Katarzyna Konkowska By BrightMedia

#6ed3cf #9068be #e1e8f0 #e62739

L'Avenir, Dental Clinic By Phoenix The Creative Studio

#dddfd4 #fae596 #3fb0ac #173e43

QED Group By madeo

#e8edf3 #e6cf8b #b56969 #22264b

Quay Restaurant By Pollen

#feffff #98dafc #daad86 #312c32

Teye By denkwerk

#1d2120 #5a5c51 #ba9077 #bcd5d1

Weber - BBQ Cultures By UncleGrey & MediaMonks

#f0eceb #729f98 #283018 #aa863a

Tens Sunglasses By Elegant Seagulls

#dbe9d8 #c2d4d8 #f2efe8 #b0aac2

Helbak Ceramics By Anders Bergh

#6534ff #62bcfa #fccdd3 #bbc4ef

Crea Carte By Dataveyes

#dbc3d0 #5e0231 #c7a693 #856046

Suspended Animations 2015 By Baptiste Briel & Flavinsky

#e6af4b #e05038 #f2cbbc #334431

Pablo The Flamingo By Pascal van der Haar & Nathan Gordon

#300032 #06000a #c43235 #e6e6e8

Baku 2015 – Follow the flame By Steven Delcourt

#16174f #963019 #f6f1ed #667467

Bonhomme By Bonhomme

#262216 #49412c #97743a #b0a18e

Well Storied By Tool and Y&R NY

#30231d #6a5750 #f6f1ed #b5a397

Austrian Summer Moments By Loop

#ede9ce #c7ad88 #64706c #935347

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

#252839 #677077 #b5b5b7 #f2b632

BRANDTS - Museum For Art & Visual Culture By Stupid Studios

#bccbde #c2dde6 #e6e9f0 #431c5d #e05915 #cdd422

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 that’s why we’ve 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

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 Google
  • Share on Stumbleupon
  • Share on Pinterest
  • Share on Linkedin
Awwwards Team

By Awwwards Team

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”.