In the field of web design, the industry's conscience awwwards to recommend a good website every day, on a regular basis, but also in the blog to recommend a variety of web design skills and summary, today's article originally originated from an exploratory project, the project results cool yet at first glance there is no egg to use, however, If the project with the recent selection of 20 excellent color matching site mutually confirmed, enough to see the current trend of color matching. Of course, the good guys do the bottom, the author simply put the current popular based on the material design of the color tool together with the common and classic color tools to recommend to you, which also constitute the three parts of today's article. OK, the text begins ~
A few weeks ago, Jam 3, the image developer Matt Deslauriers, showed us an interesting development trend on the Awwwards platform. As you can see, Awwwards has been focused on collecting the most Web sites on the Web since 2009, and these sites are important sources of web design trend analysis.
"This project started with an experiment: I was just starting to learn node and was going to dig up some data visualization cases on awwwards." ”
Matt developed a tool that captures the metadata of every awwwards-winning site, such as site names, developers, dates, URLs, thumbnails, and so on. The tool also analyzes the color of each site thumbnail to produce a relatively rough set of color schemes that contain three primary colors.
If you sort it by date and brightness, you get the following figure:
After you get the data for the color scheme, the tool renders the three-color scheme of each Web site in a pie chart, creating a picture above the canvas2d rendering. In the process, Matt also used open source tools such as Node.js, D3.js, and Cheerio,browserfy.
Because of the huge sampling and the amazing amount of information, it's not easy to think about the rules of insight, but if you look closely you'll see that the color scheme evolves or follows a certain trend and pattern.
1, 20 color best "one stop per day"
Awwwards every day recommended by the site are good design technology excellent case, because the selection process of the site's different attributes will be graded, so the color of the pros and cons here is also quantified. So, this part of the article is a selection of 20 top quality websites from the daily one stop in recent months. If you need a ready-made color scheme, use the following options directly.
Créations Namale by Phoenix the Creative Studio
Level by vide Infra
Brdr. Krüger 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
Austrian Summer Moments by Loop
Reebok:be more Human experience by Venables Bell &, Welikesmall
Brandts–museum for Art & Visual Culture by Stupid Studios
Anton & Irene by Anton & Irene, Oleg Chulakov Studio
2, Material design theory and tools
With the popularity of material design, the color tools based on the material design style are becoming more and more.
Perfect color: Material design How to make color matching easier
This is a video tutorial that is posted on YouTube, so there is no doubt that you have to bring your own ladder over the Great Wall to watch the video ...
Material Design Color guidelines: Color should be full of vigor and unexpected
This color-related article is the color of the material design Official document, of course, it's on Google's server, you know what to do ...
Material Colors
Material Palette
Material up:colors
3, create a color scheme of common tools
The most common tools for creating color schemes are definitely one of the designer's daily necessities.
Coolors
Coolors is an intuitive color tool that you can use to create color combinations in a simpler way and generate different formats, such as SVG, PDFs, or SCSS.
Stylify Me
Stylify me is a Web site that helps you create a design style guide, including basic elements such as color, font, size, and spacing.
Adobe Color CC
The classic Color tool color CC, its predecessor has always been in Kulor. The color CC now covers a wide range of system platforms, cloud synchronization, and support communities.
Paletine
Paletine is a tool used to collaborate on the creation of color schemes.
Color-hex
Color-hex is an interesting tool, whether it's a monochrome, an approximate color or a three-color color scheme, it can help you get it done. Color hex can generate different color patterns based on requirements, RGB, HSL, and HSV and CMYK. For the convenience of web designers, Color Hex can also generate CSS code.
Conclusion
Thick color cards, a huge web site, a lot of tools, even if you have good taste, making excellent color scheme is still a manual job. These excellent tools and materials make the color scheme rich in usage, use them well, good color scheme can definitely be made out ...