This article comes from the Mockplus team, a faster and simpler prototyping tool.
Since the introduction of the Material Design concept, Google’s internal Design language has realized the transformation from the ancient user world to the modern appearance of the modern web. One of the biggest changes was the use of bold, vibrant colors. Material Design’s colour guide describes its colour style as “inspired by soft environments, dark shadows and bold hues juxtaposed with bright highlights”.
More and more websites and apps use material design in their design, and tend to use Google’s official material design color matching. Material Design borrows most of its color concepts from the flat design trend. It’s bold and bright. Typography also follows the same flat theme as simple Sans Serifs fonts.
According to the official document of Material Design:
“The colours draw inspiration from contemporary architecture, road signs, pedestrian crossings and stadiums, resulting in bold colour expressions that activate colours and contrast with their drab surroundings. Emphasize bold shadows and highlights. Lead to unexpected and vibrant colors.”
Color is one of the most important elements in a brand identity. Like blue in Facebook or black and white in UBER. In our own design, it is also a headache to use which tools and choose which colors can best highlight the brand sense. The following is my material design color tools, I hope to help you.
Material design color tool
1. Material.io
Features: Complete color scheme
Address: HTTP: www.material.io
Material. IO is Google’s official Material design and color matching tool. Users only need to select their favorite color in the right palette, and the left interface area will immediately display the effect of this color in the App interface. The color scheme area in the lower right displays the current primary color, secondary color, and text color. All you need to do is incorporate the color scheme it provides into your App design.
Tips:
(1) In Material Design, the primary color is the color that appears most frequently in your application. An auxiliary color is a color used to emphasize key parts of your UI.
(2) Secondary colors are best used for:
- Button, float action button and button text
- Text field, cursor and text selection
- The progress bar
- Select controls, buttons, and sliders
- link
- The title
2. Material Colors
Website features:
- Instant preview of color matching
- Support to download
- Online sharing
Address: www.materialui.co/colors
Material Colors is not only a palette, but also an icon tool and a color tool. The main feature of Material Palette is that it allows users to select colors and preview the effect picture in real time. In addition, users only need to select one or two colors and the system will match a set of APP UI color scheme by itself. It is worth mentioning that this website provides online sharing and download in various formats.
3. Material UI
Website features:
- Color code can be copied and pasted directly
- Supports multiple color format switching
Address: www.materialui.co/colors
This tool is primarily aimed at developers and designers who want quick access to material design color codes. The user can click on the color box and automatically copy the corresponding color code to the clipboard. The site is also known as a color cheat sheet, which conveniently brings all available colors together on one page.
4. Material Design Palette Generator
Site features: custom color palette
Address: McG.mbitson.com
If you’re interested in customizing your palette, try the Material-design-like tool. First, you’ll need to manually set a color – even if it’s not a system color – and then find your favorite graphic editor in the color selection dialog. The Material Design panel Generator will generate your palette based on the colors you choose.
5. Color – Materialize
Site features: support color shading adjustment
Address: materializecss.com/color.html
This is a palette based on the basic colors of the material design. Each of these colors is defined by a base color class and an optional brightening or darkening class.
Android material color resources
1. Sketchappsources
Address: www.sketchappsources.com
This site offers free downloads of all kinds of design-related resources. You can find android materials palette resources and download them for free here.
2. Android Material Design Colours
This is the android material color code provided by Github. Each of the main colors is covered by a variety of color codes for different hues. Directly copy and paste can be used, save a lot of time.
Application design appreciation
1. Google Hangouts
One of Google’s products, the application design well follows the design principles and color scheme of Material Design. Is a typical Google material design App case.
2. Weather Timeline
The color scheme of the app is very much in line with the principles of the Material Design color tool mentioned above. Bright and bold in primary, secondary and text colors, as well as button colors.
Appreciate web design style
1. Google
When it comes to Material Design, how can you miss Google? As Google’s own design language, of course, is the best use of its own website. Material Design style Design is to have a clean layout and simple layout, easy to understand, content is the focus.
2. WhatsApp
WhatsApp, as a timely communication tool favored by foreigners, has implemented the concept of material design in the design of its web version and mobile terminal. WhatsApp does not use very bright colors in the selection of main colors. Instead, it seems that in order to give a sense of calm, a little gray is mixed in the color scheme.
After reading the above tools and cases, have you ever thought about how to create your own website or mobile App with material design concepts and color matching?
The answer is simple. All you need is a material design style prototyping tool! As an authentic domestic prototyping tool, Mockplus has unique advantages in both website prototyping and mobile App prototyping. Combining the material design style components built into the software with the material design color scheme I’ve summarized for you above, it’s easy to design a Materia Design-style app or website!
conclusion
As the most important element of brand identity, color needs careful consideration in practical application. How to use color collocation correctly is an academic question. Hopefully, the resources listed above will help you select the most beautiful Material Design color scheme.