颜色工具
颜色工具可帮助您创建、分享配色方案，并将其应用到界面中，同时测试任意颜色组合的无障碍性。
创建配色方案
创建包含主色与辅助色及其深浅变体的配色方案。
在界面中预览颜色效果
通过一系列 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 中，主色 是指在应用中出现最频繁的颜色。辅助色 则用于突出界面中的关键部分。
使用 Material Design 调色板中的颜色是可选的。
此配色方案包含一个主色、该主色的深浅变体以及一个辅助色。
在使用主色的区域下方，相关信息采用了更浅的主色着色。浮动操作按钮则使用辅助色进行突出。
此配色方案包含主色及其深浅变体。
主色应用于工具栏和状态栏，同时也用于强调浮动操作按钮。
主色
主色是应用各屏幕和组件中最常出现的颜色。若无辅助色，也可用主色来突出元素。
为在元素间创造对比，可使用其较浅或较深的变体。明暗对比有助于区分不同表面，例如状态栏与工具栏。
此配色方案包含不同色调的主色，可根据需要营造明暗对比。
辅助色
辅助色用于突出界面中的选定部分。它可以是主色的互补色或类似色，但不应当仅是主色的浅色或深色变体。它应与周围元素形成对比，并作为点缀谨慎使用。
辅助色最适合用于：
- 按钮、浮动操作按钮及按钮文本
- 文本框、光标及文本选择
- 进度条
- 选择控件、按钮及滑块
- 链接
- 标题
使用辅助色是可选的。若使用主色变体来突出元素，则无需辅助色。
包含多种色调的辅助色配色方案。
辅助色配色方案不一定需要色彩丰富。它们只需与周围元素形成对比，并在界面中谨慎使用。
在应用中使用颜色
大型界面区域和元素应使用主色。辅助色可用于突出较小区域。若无辅助色，这些区域可使用主色。
浮动操作按钮使用辅助色进行突出，而电话图标则使用了主色。
开关使用辅助色进行强调。系统栏使用主色，工具栏则使用了更深的主色变体。
使用主色来强调元素，例如按钮或复选框。
极少出现的特殊元素（如警告）应与其他元素明显区分，且不应使用主色。
使用主色作为强调，表示按钮和复选框已被选中。
辅助色可用于按钮和链接等常见元素。
辅助色及其他用于突出界面局部的颜色都应谨慎使用。
推荐做法
对某些文本（如链接文本）使用辅助色。
不推荐做法
避免在正文中使用过于鲜艳的颜色，即使您的主色或辅助色本身是鲜艳的。
关于彩色背景上文本可读性的更多指南，请参阅 颜色工具。
推荐做法
您可以使用主色来强调链接。
推荐做法
使用主色或辅助色来强调较短的文本，例如标题。
推荐做法
为主要操作按钮使用辅助色。
不推荐做法
避免在应用栏、大面积色块上使用辅助色。若浮动操作按钮位于辅助色背景之上，则不要在其上使用辅助色。
推荐做法
使用单色作为强调，让图像和其他彩色元素成为视觉焦点。
推荐做法
对于位于主色区域之上的元素（例如此浮动操作按钮），可使用主色的不同色调。
推荐做法
文本框和开关可使用辅助色进行强调。
推荐做法
文本选择可使用辅助色进行强调。
替代辅助色
若辅助色过浅或过深，无法与背景色形成足够对比，请使用其较浅或较深的色调替代。
推荐做法
在非常浅或非常深的背景上，使用不同色调的辅助色。
不推荐做法
若辅助色与背景色对比度不足，请勿在该背景上使用辅助色。
可用性
视觉层次
视觉层次指根据重要性级别组织内容。颜色可以传达某些内容相对于其他内容的重要性。
例如，朴素背景上的亮色按钮会使按钮更突出；反之，朴素的应用栏和按钮则能让界面中有色彩的内容更醒目。
大胆的颜色强调了浮动操作按钮和工具栏，使信息创建和导航功能更为突出。
朴素的应用栏和按钮使彩色内容占据视觉主导，弱化了状态栏和导航栏的显示。
含义
颜色可用于传达屏幕上不同元素的含义。天气应用可能用颜色表示当前天气状况，地图应用则可能用红色或绿色道路颜色表示交通状况。
天气应用使用颜色来表示一天中的时间。
地图应用使用颜色来表示交通状况。
状态
颜色可以提供以下信息：
- 元素的当前状态，例如按钮是启用还是禁用
- 应用或元素的状态变化
表示状态变化的颜色应足够明显，细微的色差可能被忽略。最好通过多种方式指示状态变化，例如显示图标或移动元素位置。
红色标签和帮助文本表示错误信息。
颜色从蓝色变为红色，表示状态发生了变化。
在此界面中，红色表示一天中的时间，绿色表示有雾天气。
这就是红绿色盲用户可能看到的左侧界面效果。他们可能难以区分文本与其他元素。
除了颜色之外，还应使用其他辅助手段来传达信息。
对于白内障用户，较小的文字可能难以阅读，界面也可能显得模糊。对比度不足的元素会淹没在背景中。
为适应所有用户，应提供放大文本的设置选项。
背景上的文本
文本应在所显示的背景上清晰易读。建议如下：
- 浅色背景使用深灰色文本
- 深色背景使用浅灰色文本
若应用同时包含亮色和暗色主题，文本颜色应与每个主题都有足够的对比度。
可读性
彩色背景上的文本应清晰可读，并满足无障碍标准。背景和文本所使用的颜色及不透明度组合必须符合这些标准。《Web 内容无障碍指南 (WCAG 2.0)》 AA 级别要求普通文本的对比度达到 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. 卡片/对话框
亮色主题调色板
Material Design 界面应用示例
暗色主题
1. 状态栏
2. 应用栏
3. 背景
4. 卡片/对话框
暗色主题调色板
Material Design 界面应用示例
根据您的品牌标识进行定制设计。