Color Design of Material Design

Color Design of Material Design

Colors are inspired by contemporary buildings, road signs, crosstab charts, and sports ground pavilions. This creates a bold color expression that activates the color and is in stark contrast to the monotonous surrounding environment. Emphasize bold shadows and highlights. Creates unexpected and vibrant colors.

Color sample-0.13 MB (.zip)

UI palette

The color palette is based on some basic colors and provides a complete set of available colors for Android, Web, and iOS environments through the filling spectrum. The saturation of base colors is 500.

UI color usage

Select your palette

Restrict the number of colors. Select three colors and one highlighted color among the many base colors. The highlighted color is used for the back.

Add an alpha value to the gray text, icon, and Separator

To effectively convey the visual hierarchy of information, different texts should be used. For text on a white background, the standard alpha value is 87% #000000 ). Secondary text with a low visual level should use the alpha value of 54% #000000. For text and labels used to prompt the user's text, the visual level is lower, and the alpha value of 26% #000000 should be used.

Other elements, labels, and separators should also have black alpha values, rather than solid colors, to ensure they can adapt to any color background.

For white or black text on the color background, you can find the appropriate color contrast and alpha value through the color palette in the table.

We strongly encourage eye-catching colors in large areas of the UI. Different elements in the UI are suitable for different colors in the subject. The toolbar and the large color block are suitable for the basic color with a saturation of 500, which is also the main color of your application. The status bar is suitable for basic colors with a higher saturation of 700.

Emphasis color

Highlighted colors are used for your main operation buttons and components, such as switches or slides. Highlight colors can also be used for left-aligned icons or chapter titles.

Secondary emphasis color

If you emphasize that the color is too deep or too light for the background color, the default method is to select a lighter or deeper alternative color. If the highlighted color cannot be displayed normally, the base color with a saturation of 500 will be used on the white background. If the background color is the base color of the saturation of 500, it will use the white color of 100% or the black color of 54%.

Topic

Theme is a method that provides consistent tones for applications. The style specifies the brightness of the surface, the level of the shadow, and the opacity of the font element. To improve application consistency, two theme options are available:

• Light Color
• Dark color

Topic-1.3 MB (. ai)

Original article: Color Translation: arjinmc Proofreader: PoppinLp