Color

Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.

在 Material Design 中色彩的灵感来自于在静止的环境中使用大胆的色彩对比，深沉的阴影、明亮的高光。材料需要从当代的建筑，路牌，路标，运动场上的规则线等进行隐射（功能与设计统一、简单、明了），用色也应该使用那些让人充满活力的颜色。

调色板 Color palette

This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.

这个调色板包括了可用于插图或发展开发你自己品牌的颜色及一些相关色。它们的色值已经被调整的能够很好的相互工作了。

The color palette starts with primary colors and fills in the spectrum to create a complete and usable palette for Android, Web, and iOS. Google suggests using the 500 colors as the primary colors in your app and the other colors as accents colors.

调色板中主色（原色），包含以这个色调在光谱中的范围其它颜色，都是可以在 Android、 Web、 iOS的应用中创完整的调色板。Google 建议使用 500 色作为应用的主色（原色），其它颜色作为辅助色。

调色板链接（需翻墙）：Material Design 调色板

Color schemes 色彩方案

Choosing a color palette 选择一个调色板

Your app's color palette may be defined by using a custom palette suited to your brand, such as monochromatic, black and white, full color, or neutral. Alternatively, you may use the material design color palette. All color palettes should include sufficient contrast between different UI elements.

你应用的调色板可以通过你品牌的主色（原色）调进行匹配，如单色的，黑白，彩色，或混合色。活着，你可以使用 Material Design 的调色板。所有调色板中的颜色应保证不同的UI元素之间有足够的对比度。

Using the material design color palette 使用 Material Design 的调色板

Apps that don’t have existing color schemes may select colors from the material design color palette. Limit your selection of colors to three hues from the primary palette and one accent color from the secondary palette.

如果你的应用没有确定配色方案的可以直接从 Material Design 的调色板中挑选配色。挑选中不要选择超过三个主色（原色），挑选的主色（原色）中要有一个是从二级调色板选出来的。

Example of a color palette using two purple hues from the primary palette and one accent green hue.

例如使用了两种紫色的为主色（原色）绿色为强调色的调色版

Example of UI color application

UI颜色应用举例

Primary color 原色（主色）

When using a primary color in your palette, this color should be the most widely used across all screens and components.

当你使用了调色板中的原色（主色），那么这个颜色应该是你屏幕中使用最广泛的颜色。

Example of a primary color palette with variations for when a darker or lighter version of the color is needed

需要变化原色（主色）彩调色板，选择更深或更浅的主色（原色）进行替代的例子。

Secondary color 间色（第二次色）

Palettes with a secondary color may use this color to indicate a related action or information.

你从调色板中挑选的间色主要用于展现相关的操作或信息。

The secondary color may be a darker or lighter variation of the primary color.

间色可以选择以原色（主色）为基准，挑选那些更深或更浅的颜色。

Example of a secondary palette with variations for when a darker or lighter version of the color is needed

间色（第二次色）需要变化的时候，选择更深或更浅的间色（第二次色）进行替代的例子。

Accent color 强调色

The accent should be used for the floating action button and interactive elements, such as:

强调色一般用于漂浮的按钮和功能元素例如：

• Text fields and cursors / 文本字段和游标
• Text selection / 文本选择
• Progress bars / 进度条
• Selection controls, buttons, and sliders / 选择控制器，按钮，滑块
• Links / 链接

Floating action button using the accent color

浮动功能按钮使用强调色

Switch using the accent color

滑块使用强调色

Do : Only use the accent color for body text to accent a web link.

正确：正文内容只有网页链接的文字使用强调色进行强调

Don't : Don’t use the accent color for body text color.

不要将正文全部用强调色

Do : Use the accent color for your primary action button and components like switches or sliders.

正确：在主要功能按钮和开关或滑块这样的部分零件上使用强调色

Don't : Don’t use the accent color for app bars or larger areas of color. Avoid using the same color for the floating action button and the background.

不要将强调色使用在应用程序栏或大面积的色块上。在浮动按钮与背景的选择上避免使用相同的颜色

The App bar, toolbar and system status bar can be customized using your palette accent color. In this example, the toolbar uses the 500 version of indigo, while the status bar uses the 700 version.

应用程序栏与系统状态栏可以从你的调色板中使用强调色系中的颜色。在这个例子中，工具栏使用的是 500 indigo色，系统状态栏使用的是 700 indigo色

Web links and buttons can be customized using your palette accent color.

网页链接和按钮可以使用你调色板中强调色系的颜色

Text fields and selection controls can be customized using your palette accent color.

文本字段和选择控制器可以使用你自定调色板中强调色系的颜色

Text selection can be customized using your palette accent color.

文本选择可以使用你自定调色板中强调色系的颜色

Alternative accent colors 辅助强调色

Darker shades and lighter tints 深色调和浅色调

If your accent color is too light or dark to sufficiently contrast with the background color, use a darker shade or lighter tint of the accent color instead.

如果你的强调色太轻或者太暗，并且与背景色没有足够的对比度。你可以选择使用更暗或者更轻的强调色进行替代。

Do : Use a fallback accent color over background colors that are too light or too dark.

正确：可以使用比背景色更亮或者更深的强调色

Don't : Don’t use the accent color over a background color if there isn’t enough contrast.

错误：但是强调色与背景色的对比度一定要充足

Primary color variations 原色（主色）的变化

Another alternative accent color is the 500 version of your primary color on white backgrounds.

另外一种选择强调色为 500 个主色（原色）中挑选一个，选择白色为背景。

However, if your background color is already the 500 version of your primary color, make your accent color either white 100% or black 54%.

但是，如果你的背景色已经选择了 500 种原色（主色）中的一种，那么你的强调色也可以选择 100% 的白色和 54% 的黑色。

Text and background colors 文本和背景色

Text opacity 文本的透明度

Text may be displayed with different degrees of opacity to convey how important certain information is relative to other information. The level of opacity used for text depends on whether your background is darker or lighter.

文本使用透明度来展现文本相互之间内容的重要程度。文本的透明程度的级别取决于你背景的深浅。

Dark text on light backgrounds 深色文本浅色背景

For dark text on light backgrounds, apply the following opacity levels:

对于深色文本在浅色背景上的表现，透明度的标准应遵循以下几点：

• The most important text has an opacity of 87%. / 最重要的文本透明度为87%
• Secondary text, which is lower in the visual hierarchy, has an opacity of 54%. / 第二重要内容，在这个视觉环境下，透明度应该选择为 54%
• Text hints (like those in text fields and labels) and disabled text have even lower visual prominence with an opacity of 38%. / 文字提示（例如出现在文本框和标签的提示）和禁用文本应该选择 38％ 的透明度，显示更低的视觉提示。

Dark text on light backgrounds

深色文本与浅色背景

White text on dark backgrounds 白色文本深色背景

The table values relay relative levels of importance for white text on dark backgrounds.

表格的数值显示着白色文字的不同重要性内容在深色背景的数值。

White text on dark backgrounds

白色文本在深色背景上

Use opacity instead of grey 使用透明度代替灰色

Black or white text that is transparent remains legible and vibrant against background color changes. This makes it more flexible than grey text in the same contexts.

即使在背景改变的情况下，黑色或者白色的文字以不同的透明度仍然表现的清晰而且充满活力。这样使得文字在同样得条件下比灰色更加灵活。

Don't : Grey text (hex value of #727272) on a white background becomes hard to read if the background color changes to magenta.

灰色文本（设置色值为 #727272 ）在白色的背景转移到粉色背景的过程中，易读性变的很差了。

Do : Black text, set to a 0.54 opacity, ensures a minimum degree of legibility and color harmony with new background colors.

黑色的文本，设置0.54的透明度，即使在新的背景色上，也能够保持很好的易读性。

Icons, dividers, and other elements 图标，分割元件和其他元素

Elements like icons and dividers benefit from having a hex value of black or white (rather than a specific color) so that they work on backgrounds of any color.

类似 icon 和分割元件受益于白色和黑色（不是一个特定的颜色）所以它们可以很好的在任何背景下使用。

Themes 主题

Themes let you apply a consistent tone to an app. The theme specifies the darkness of the surfaces, level of shadow, and appropriate opacity of ink elements. To promote greater consistency between apps, light and dark themes are available to choose from.

主题可以让你的应用程序使用统一的色调。主题指表面明暗，阴影的等级，墨水元素和透明度。为了促进应用的一致性，这里提供 light 和 dark 两种可选的主题。

Light theme 浅色主题

1. Status bar / 状态栏
2. App bar / 应用程序栏
3. Background / 背景
4. Cards/Dialogs / 卡片、单元

Light theme palette

浅色主题调色板

UI application

应用 UI

Dark theme 深色主题

1. Status bar / 状态栏
2. App bar / 应用程序栏
3. Background / 背景
4. Cards/Dialogs / 卡片、单元

Dark theme palette

深色主题调色板

UI application

应用 UI