颜色工具
颜色工具可以帮你创建、分享配色方案、以及把配色方案应用到 UI 中，以及测试颜色组合的可访问性。
创建配色方案
创建配色方案，包含主色和辅助色的较深和较浅的变化。
预览 UI 的颜色
通过一系列的 Material Design 组件，来预览配色方案的效果，并可以在 Codepen 中编辑 HTML、CSS 和 JavaScript。
样式– 颜色
颜色
调色板
调色板
该调色板包含了主色和强调色，可以用于插图或开发你的品牌色。这些经过设计的颜色可以灵活的搭配。调色板从主色开始，通过填充光谱为 Android、Web、iOS 创建了完整可用的调色板。Google 建议使用 500 色号的颜色作为主色，其他颜色作为强调色。
主题通过设置表面阴影、阴影深度和墨迹不透明度来构建统一的应用样式。
Red
500#F44336
50#FFEBEE
100#FFCDD2
200#EF9A9A
300#E57373
400#EF5350
500#F44336
600#E53935
700#D32F2F
800#C62828
900#B71C1C
A100#FF8A80
A200#FF5252
A400#FF1744
A700#D50000
Pink
500#E91E63
50#FCE4EC
100#F8BBD0
200#F48FB1
300#F06292
400#EC407A
500#E91E63
600#D81B60
700#C2185B
800#AD1457
900#880E4F
A100#FF80AB
A200#FF4081
A400#F50057
A700#C51162
Purple
500#9C27B0
50#F3E5F5
100#E1BEE7
200#CE93D8
300#BA68C8
400#AB47BC
500#9C27B0
600#8E24AA
700#7B1FA2
800#6A1B9A
900#4A148C
A100#EA80FC
A200#E040FB
A400#D500F9
A700#AA00FF
Deep Purple
500#673AB7
50#EDE7F6
100#D1C4E9
200#B39DDB
300#9575CD
400#7E57C2
500#673AB7
600#5E35B1
700#512DA8
800#4527A0
900#311B92
A100#B388FF
A200#7C4DFF
A400#651FFF
A700#6200EA
Indigo
500#3F51B5
50#E8EAF6
100#C5CAE9
200#9FA8DA
300#7986CB
400#5C6BC0
500#3F51B5
600#3949AB
700#303F9F
800#283593
900#1A237E
A100#8C9EFF
A200#536DFE
A400#3D5AFE
A700#304FFE
Blue
500#2196F3
50#E3F2FD
100#BBDEFB
200#90CAF9
300#64B5F6
400#42A5F5
500#2196F3
600#1E88E5
700#1976D2
800#1565C0
900#0D47A1
A100#82B1FF
A200#448AFF
A400#2979FF
A700#2962FF
Light Blue
500#03A9F4
50#E1F5FE
100#B3E5FC
200#81D4FA
300#4FC3F7
400#29B6F6
500#03A9F4
600#039BE5
700#0288D1
800#0277BD
900#01579B
A100#80D8FF
A200#40C4FF
A400#00B0FF
A700#0091EA
Cyan
500#00BCD4
50#E0F7FA
100#B2EBF2
200#80DEEA
300#4DD0E1
400#26C6DA
500#00BCD4
600#00ACC1
700#0097A7
800#00838F
900#006064
A100#84FFFF
A200#18FFFF
A400#00E5FF
A700#00B8D4
Teal
500#009688
50#E0F2F1
100#B2DFDB
200#80CBC4
300#4DB6AC
400#26A69A
500#009688
600#00897B
700#00796B
800#00695C
900#004D40
A100#A7FFEB
A200#64FFDA
A400#1DE9B6
A700#00BFA5
Green
500#4CAF50
50#E8F5E9
100#C8E6C9
200#A5D6A7
300#81C784
400#66BB6A
500#4CAF50
600#43A047
700#388E3C
800#2E7D32
900#1B5E20
A100#B9F6CA
A200#69F0AE
A400#00E676
A700#00C853
Light Green
500#8BC34A
50#F1F8E9
100#DCEDC8
200#C5E1A5
300#AED581
400#9CCC65
500#8BC34A
600#7CB342
700#689F38
800#558B2F
900#33691E
A100#CCFF90
A200#B2FF59
A400#76FF03
A700#64DD17
Lime
500#CDDC39
50#F9FBE7
100#F0F4C3
200#E6EE9C
300#DCE775
400#D4E157
500#CDDC39
600#C0CA33
700#AFB42B
800#9E9D24
900#827717
A100#F4FF81
A200#EEFF41
A400#C6FF00
A700#AEEA00
Yellow
500#FFEB3B
50#FFFDE7
100#FFF9C4
200#FFF59D
300#FFF176
400#FFEE58
500#FFEB3B
600#FDD835
700#FBC02D
800#F9A825
900#F57F17
A100#FFFF8D
A200#FFFF00
A400#FFEA00
A700#FFD600
Amber
500#FFC107
50#FFF8E1
100#FFECB3
200#FFE082
300#FFD54F
400#FFCA28
500#FFC107
600#FFB300
700#FFA000
800#FF8F00
900#FF6F00
A100#FFE57F
A200#FFD740
A400#FFC400
A700#FFAB00
Orange
500#FF9800
50#FFF3E0
100#FFE0B2
200#FFCC80
300#FFB74D
400#FFA726
500#FF9800
600#FB8C00
700#F57C00
800#EF6C00
900#E65100
A100#FFD180
A200#FFAB40
A400#FF9100
A700#FF6D00
Deep Orange
500#FF5722
50#FBE9E7
100#FFCCBC
200#FFAB91
300#FF8A65
400#FF7043
500#FF5722
600#F4511E
700#E64A19
800#D84315
900#BF360C
A100#FF9E80
A200#FF6E40
A400#FF3D00
A700#DD2C00
Brown
500#795548
50#EFEBE9
100#D7CCC8
200#BCAAA4
300#A1887F
400#8D6E63
500#795548
600#6D4C41
700#5D4037
800#4E342E
900#3E2723
Grey
500#9E9E9E
50#FAFAFA
100#F5F5F5
200#EEEEEE
300#E0E0E0
400#BDBDBD
500#9E9E9E
600#757575
700#616161
800#424242
900#212121
Blue Grey
500#607D8B
50#ECEFF1
100#CFD8DC
200#B0BEC5
300#90A4AE
400#78909C
500#607D8B
600#546E7A
700#455A64
800#37474F
900#263238
Black#000000
White#FFFFFF
颜色系统
选择配色方案
你可以自定义应用的调色板，以适配你的品牌颜色。或者，你可以使用 Material Design 的调色板创建一个全新的配色方案。
创建配色方案时：
- 使用颜色工具创建调色板，并在应用中使用
- 确保应用的颜色满足无障碍标准，且元素之间有充分的对比度
在 Material Design 中保持品牌化的分步指导
Material Design 的颜色系统
在 Material Design 中，主色应该是应用中出现最频繁的颜色，辅助色则是用来强调 UI 中关键部分的颜色。
使用 Material Design 调色板中的颜色是可选的。
该配色方案中有一个主色，以及颜色较深和较浅版本的主色，和一个辅助色。
在使用主色的区域下方，相关信息使用了颜色更浅的主色进行着色。浮动操作按钮使用辅助色进行强调。
此配色方案包含主色，和颜色较深和较浅版本的主色。
主色应用于工具栏和状态栏，同时也被用于强调浮动操作按钮。
主色
主色是应用中出现最频繁的颜色。如果没有使用辅助色的话，也可以用主色来强调元素。
要在元素之间创造对比度，可以使用较浅或较深色调的主色。较浅和较深的色调之间的对比度有助于区分不同的表面，例如区分状态栏和工具栏。
此配色方案包含不同色调的主色，因为需要用到较浅和较深色调之间的对比度。
辅助色
辅助色用于强调 UI 中的选择部分。辅助色可以是和主色互补的，也可以是和主色类似的，但它不应该只是简单的对主色进行加深或变浅。辅助色应该和它周围的元素形成对比，并作为强调，且应谨慎使用。
辅助色最适合用于：
- 按钮、浮动操作按钮、按钮文本
- 文本框、光标、文本选择
- 进度条
- 选择控件、按钮、滑块
- 链接
- 标题
使用辅助色是可选的。如果你使用了主色的变体来强调元素，则不需要辅助色。
具有不同色调的辅助色配色方案。
辅助色配色方案不需要有多种颜色。它只需要和周围的元素形成对比，且应在 UI 中谨慎使用。
在应用中使用颜色
大型 UI 区域和元素应该使用主色进行着色。辅助色可用于强调较小的区域。如果没有辅助色，则可以在这些区域中使用主色。
浮动操作按钮使用辅助色进行强调，但是电话图标使用了主色。
开关使用辅助色进行强调。系统栏使用主色，而工具栏使用了较浅的主色。
使用主色来强调元素，例如按钮和复选框。
罕见的元素（如警告）应该和其他元素有明显的区分，不能使用主色。
使用主色作为强调，来表明按钮和复选框已被选中。
辅助色可以用在有代表性的元素上，例如按钮和链接。
辅助色，以及其他的用于强调 UI 中某部分的颜色，应该谨慎使用。
正确示例
对某些文本使用强调色，例如链接文本。
错误示例
不要在正文中使用明亮的颜色，即使你的主色或辅助色是明亮的。
有关颜色的更多排版易读性的指南，请参阅颜色工具。
正确示例
你可以使用主色来强调链接。
正确示例
使用主色或强调色来强调较短的文本，如标题。
正确示例
在主要操作按钮上使用辅助色。
错误示例
不要在应用栏、较大的色块区域上使用辅助色。如果浮动操作按钮位于辅助色背景上，则不要在浮动操作按钮上使用辅助色。
正确示例
使用单色作为强调色，使图像和其他彩色的元素更加突出。
正确示例
在主色区域上的元素，可以使用不同色调的主色（例如这个浮动操作按钮）。
正确示例
文本框和开关可以使用辅助色作为强调。
正确示例
文本选择可以使用辅助色作为强调。
替代辅助色
如果你的辅助色太浅或太深，不足以与背景色形成充分对比，请使用较浅或较深的辅助色代替。
正确示例
在很深或很浅的背景色中，使用不同色调的辅助色。
错误示例
如果主色和辅助色没有足够的对比度，不要在主色背景上使用辅助色。
可用性
层次结构
层次结构是指根据重要性级别来组织内容。颜色可以表达出一些内容相对与其他内容的重要性。
例如，无色背景上的亮色按钮，会使该按钮更突出。或者，无色的应用栏和按钮使 UI 中明亮的内容更突出。
大胆的颜色强调了浮动操作按钮和工具栏，使信息的创建和导航更突出。
无色的应用栏和按钮使亮色的内容更突出，不强调状态栏和导航栏。
含义
颜色可以用来表达屏幕中不同元素的含义。天气应用可能会使用表示当前天气状况的颜色，地图应用可能会用红色或绿色的道路颜色，来表示交通状况。
天气应用使用颜色来表示一天中的时间。
地图应用使用颜色来表示交通状况。
状态
颜色可以提供以下信息：
- 元素的当前状态，例如按钮的启用或禁用状态
- 应用或元素的状态改变
表示状态变化的颜色应该是明显的，因为只有细微差异的颜色可能会被用户忽视。最好能以多种方式来表示状态的变化，例如显示一个图标、或移动元素的位置。
红色的标签和帮助文本表示错误信息。
颜色从蓝色变为红色，以表示不同的状态。
在这个 UI 中，红色表示一天中的时间，绿色表示有雾的天气。
这是红绿色盲看到的左侧的 UI。它们可能无法看到文本和其他元素之间的差异。
还应该使用除颜色以外的功能来传达信息。
较小的文字对于白内障用户可能会难以阅读，在他们眼中，你的 UI 可能会变得模糊。没有足够对比度的元素会被淹没在背景中。
为了适应所有用户，可以提供放大文本的选项。
背景中的文本
文本应该在其背景中清晰可见。建议：
- 深灰色文本用于浅色背景
- 浅灰色文本用于深色背景
如果你的应用同时含有亮色和暗色主题，文本颜色应该要和每个主题都有足够的对比度。
可读性
彩色背景上的文本需要保证清晰可读，以符合无障碍标准。在背景色和文本色上同时使用不透明度，可以满足此标准。 AA 级的Web 内容无障碍指南（WCAG 2.0）要求普通文本的对比度为 4.5:1，大文本的对比度为 3:1。
正确示例
使用不透明度，而不是改变颜色，通常能创造更好的对比度和相对亮度。例如，如果背景色变为洋红色，则其中的灰色文字（#727272）会变得难以阅读。
错误示例
转换为灰色，而不是降低了对比度的黑色，通常会降低相对亮度，使文本不可读。
浅色背景中的深色文本
文本的不透明度取决于背景色是深色还是浅色的。对于浅色背景中的深色文本，使用以下不透明度：
- 最重要的文本使用 87% 的不透明度
- 在视觉层次结构中较低的辅助文本使用 54% 的不透明度
- 文本提示（例如文本框和标签）、禁用状态的文本的视觉层次更低，使用 38% 的不透明度
暗色文本（#000000） | 不透明度 |
主文本 | 87% |
辅助文本 | 54% |
禁用状态的文本、提示文本 | 38% |
分隔线 | 12% |
暗色背景上的白色文本
彩色背景上的白色文本应该使用 100% 的不透明度。
此表格显示了深色背景中的白色文本的相对重要性。
亮色文本（#FFFFFF） | 不透明度 |
主文本 | 100% |
辅助文本 | 70% |
禁用状态的文本、提示文本 | 50% |
分隔线 | 12% |
图标等元素
图标之类的元素使用具有 38% 不透明度的白色或黑色，以使它们能在任何颜色的背景上使用。
深色图标（#000000） | 不透明度 |
可用的图标 | 54% |
禁用的图标 | 38% |
亮色图标（#FFFFFF） | 不透明度 |
可用的图标 | 100% |
禁用的图标 | 50% |
正确示例
在重要的文本上使用有对比度的颜色（例如你的辅助色），使其与背景色产生对比。
错误示例
避免在彩色背景上放置大量彩色文本。
正确示例
你可以使用更深或更浅的色调来创建单色，也能突出外观。
错误示例
不要使用相同颜色的不同色调的颜色进行对比。与背景色对比度很低的文本会很难阅读。
主题
主题可以让你的应用具有统一的风格。主题指定表面的暗度、阴影程度，以及墨水元素的适当的不透明度。为了提高不同应用之间的一致性，你可以选择亮色主题和暗色主题。
亮色主题
1. 状态栏
2. 应用栏
3. 背景
4. 卡片/对话框
亮色主题调色板
在 UI 中的应用
暗色主题
1. 状态栏
2. 应用栏
3. 背景
4. 卡片/对话框
暗色主题调色板
在 UI 中的应用
自定义你的品牌标识。