Material Design Color Design

Color takes inspiration from contemporary architecture, road signs, pedestrian crossings and sports venues, which leads to bold color expressions that activate color and create a sharp contrast with the monotonous surrounding environment. Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors.

Color Swatches - 0.13 MB (.zip)

UI Palette

The color palette is based on some basic colors, which fill the spectrum to provide a complete set of usable colors for Android, Web, and iOS environments. The saturation of the basic colors is 500.

UI Color Usage

Choose Your Color Palette

Limit the number of colors to three shades of your base color and one accent color. The accent color is used for the back and is optional.

Add alpha value to gray text, icons and dividers

In order to effectively convey the visual hierarchy of information, you should use text of different shades. For text on a white background, the standard alpha value is 87% (#000000). Secondary text with a lower visual hierarchy should use an alpha value of 54% (#000000). Text used to prompt users, such as body text and labels, has an even lower visual hierarchy and should use an alpha value of 26% (#000000).

Other elements, such as icons and dividers, should also have a black alpha value rather than a solid color to ensure they blend in with any background color.

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

We strongly encourage the use of bold colors in large areas of the UI. Different elements of the UI are suitable for different colors in the theme. Toolbars and large blocks of color are suitable for a base color with a saturation of 500, which is also the main color of your application. The status bar is suitable for a darker base color with a saturation of 700.

Accent Color

Use bright accent colors for your primary call to action buttons and widgets like switches or sliders. Left-aligned section icons or chapter headings can also use an accent color.

Alternate accent color

If your accent color is too dark or too light relative to the background color, the default behavior is to choose a lighter or darker fallback color. If your accent color doesn't work, a 500 saturation base color will be used on a white background. If the background color is a 500 saturation base color, a 100% white or 54% black will be used.

theme

Themes are a way to give your app a consistent look and feel. Styles specify the brightness of surfaces, the level of shadows, and the appropriate opacity of font elements. To increase consistency across apps, you can choose from two themes:

• Light
• Dark

Theme - 1.3 MB (.ai)

Original: ColorTranslation: arjinmcProofreading: PoppinLp