Material Design 颜色参考。
调色板 [Google官网文档(需要科学上网)]
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="Red_50"> #FFEBEE</color>
<color name="Red_100"> #FFCDD2</color>
<color name="Red_200"> #EF9A9A</color>
<color name="Red_300"> #E57373</color>
<color name="Red_400"> #EF5350</color>
<color name="Red_500"> #F44336</color>
<color name="Red_600"> #E53935</color>
<color name="Red_700"> #D32F2F</color>
<color name="Red_800"> #C62828</color>
<color name="Red_900"> #B71C1C</color>
<color name="Red_A100">#FF8A80</color>
<color name="Red_A200">#FF5252</color>
<color name="Red_A400">#FF1744</color>
<color name="Red_A700">#D50000</color>
<color name="Pink_50"> #FCE4EC</color>
<color name="Pink_100"> #F8BBD0</color>
<color name="Pink_200"> #F48FB1</color>
<color name="Pink_300"> #F06292</color>
<color name="Pink_400"> #EC407A</color>
<color name="Pink_500"> #E91E63</color>
<color name="Pink_600"> #D81B60</color>
<color name="Pink_700"> #C2185B</color>
<color name="Pink_800"> #AD1457</color>
<color name="Pink_900"> #880E4F</color>
<color name="Pink_A100">#FF80AB</color>
<color name="Pink_A200">#FF4081</color>
<color name="Pink_A400">#F50057</color>
<color name="Pink_A700">#C51162</color>
<color name="Purple_50"> #F3E5F5</color>
<color name="Purple_100"> #E1BEE7</color>
<color name="Purple_200"> #CE93D8</color>
<color name="Purple_300"> #BA68C8</color>
<color name="Purple_400"> #AB47BC</color>
<color name="Purple_500"> #9C27B0</color>
<color name="Purple_600"> #8E24AA</color>
<color name="Purple_700"> #7B1FA2</color>
<color name="Purple_800"> #6A1B9A</color>
<color name="Purple_900"> #4A148C</color>
<color name="Purple_A100">#EA80FC</color>
<color name="Purple_A200">#E040FB</color>
<color name="Purple_A400">#D500F9</color>
<color name="Purple_A700">#AA00FF</color>
<color name="DeepPurple_50"> #EDE7F6</color>
<color name="DeepPurple_100"> #D1C4E9</color>
<color name="DeepPurple_200"> #B39DDB</color>
<color name="DeepPurple_300"> #9575CD</color>
<color name="DeepPurple_400"> #7E57C2</color>
<color name="DeepPurple_500"> #673AB7</color>
<color name="DeepPurple_600"> #5E35B1</color>
<color name="DeepPurple_700"> #512DA8</color>
<color name="DeepPurple_800"> #4527A0</color>
<color name="DeepPurple_900"> #311B92</color>
<color name="DeepPurple_A100">#B388FF</color>
<color name="DeepPurple_A200">#7C4DFF</color>
<color name="DeepPurple_A400">#651FFF</color>
<color name="DeepPurple_A700">#6200EA</color>
<color name="Indigo_50"> #E8EAF6</color>
<color name="Indigo_100"> #C5CAE9</color>
<color name="Indigo_200"> #9FA8DA</color>
<color name="Indigo_300"> #7986CB</color>
<color name="Indigo_400"> #5C6BC0</color>
<color name="Indigo_500"> #3F51B5</color>
<color name="Indigo_600"> #3949AB</color>
<color name="Indigo_700"> #303F9F</color>
<color name="Indigo_800"> #283593</color>
<color name="Indigo_900"> #1A237E</color>
<color name="Indigo_A100">#8C9EFF</color>
<color name="Indigo_A200">#536DFE</color>
<color name="Indigo_A400">#3D5AFE</color>
<color name="Indigo_A700">#304FFE</color>
<color name="Blue_50"> #E3F2FD</color>
<color name="Blue_100"> #BBDEFB</color>
<color name="Blue_200"> #90CAF9</color>
<color name="Blue_300"> #64B5F6</color>
<color name="Blue_400"> #42A5F5</color>
<color name="Blue_500"> #2196F3</color>
<color name="Blue_600"> #1E88E5</color>
<color name="Blue_700"> #1976D2</color>
<color name="Blue_800"> #1565C0</color>
<color name="Blue_900"> #0D47A1</color>
<color name="Blue_A100">#82B1FF</color>
<color name="Blue_A200">#448AFF</color>
<color name="Blue_A400">#2979FF</color>
<color name="Blue_A700">#2962FF</color>
<color name="LightBlue_50"> #E1F5FE</color>
<color name="LightBlue_100"> #B3E5FC</color>
<color name="LightBlue_200"> #81D4FA</color>
<color name="LightBlue_300"> #4FC3F7</color>
<color name="LightBlue_400"> #29B6F6</color>
<color name="LightBlue_500"> #03A9F4</color>
<color name="LightBlue_600"> #039BE5</color>
<color name="LightBlue_700"> #0288D1</color>
<color name="LightBlue_800"> #0277BD</color>
<color name="LightBlue_900"> #01579B</color>
<color name="LightBlue_A100">#80D8FF</color>
<color name="LightBlue_A200">#40C4FF</color>
<color name="LightBlue_A400">#00B0FF</color>
<color name="LightBlue_A700">#0091EA</color>
<color name="Cyan_50"> #E0F7FA</color>
<color name="Cyan_100"> #B2EBF2</color>
<color name="Cyan_200"> #80DEEA</color>
<color name="Cyan_300"> #4DD0E1</color>
<color name="Cyan_400"> #26C6DA</color>
<color name="Cyan_500"> #00BCD4</color>
<color name="Cyan_600"> #00ACC1</color>
<color name="Cyan_700"> #0097A7</color>
<color name="Cyan_800"> #00838F</color>
<color name="Cyan_900"> #006064</color>
<color name="Cyan_A100">#84FFFF</color>
<color name="Cyan_A200">#18FFFF</color>
<color name="Cyan_A400">#00E5FF</color>
<color name="Cyan_A700">#00B8D4</color>
<color name="Teal_50"> #E0F2F1</color>
<color name="Teal_100"> #B2DFDB</color>
<color name="Teal_200"> #80CBC4</color>
<color name="Teal_300"> #4DB6AC</color>
<color name="Teal_400"> #26A69A</color>
<color name="Teal_500"> #009688</color>
<color name="Teal_600"> #00897B</color>
<color name="Teal_700"> #00796B</color>
<color name="Teal_800"> #00695C</color>
<color name="Teal_900"> #004D40</color>
<color name="Teal_A100">#A7FFEB</color>
<color name="Teal_A200">#64FFDA</color>
<color name="Teal_A400">#1DE9B6</color>
<color name="Teal_A700">#00BFA5</color>
<color name="Green_50"> #E8F5E9</color>
<color name="Green_100"> #C8E6C9</color>
<color name="Green_200"> #A5D6A7</color>
<color name="Green_300"> #81C784</color>
<color name="Green_400"> #66BB6A</color>
<color name="Green_500"> #4CAF50</color>
<color name="Green_600"> #43A047</color>
<color name="Green_700"> #388E3C</color>
<color name="Green_800"> #2E7D32</color>
<color name="Green_900"> #1B5E20</color>
<color name="Green_A100">#B9F6CA</color>
<color name="Green_A200">#69F0AE</color>
<color name="Green_A400">#00E676</color>
<color name="Green_A700">#00C853</color>
<color name="LightGreen_50"> #F1F8E9</color>
<color name="LightGreen_100"> #DCEDC8</color>
<color name="LightGreen_200"> #C5E1A5</color>
<color name="LightGreen_300"> #AED581</color>
<color name="LightGreen_400"> #9CCC65</color>
<color name="LightGreen_500"> #8BC34A</color>
<color name="LightGreen_600"> #7CB342</color>
<color name="LightGreen_700"> #689F38</color>
<color name="LightGreen_800"> #558B2F</color>
<color name="LightGreen_900"> #33691E</color>
<color name="LightGreen_A100">#CCFF90</color>
<color name="LightGreen_A200">#B2FF59</color>
<color name="LightGreen_A400">#76FF03</color>
<color name="LightGreen_A700">#64DD17</color>
<color name="Lime_50"> #F9FBE7</color>
<color name="Lime_100"> #F0F4C3</color>
<color name="Lime_200"> #E6EE9C</color>
<color name="Lime_300"> #DCE775</color>
<color name="Lime_400"> #D4E157</color>
<color name="Lime_500"> #CDDC39</color>
<color name="Lime_600"> #C0CA33</color>
<color name="Lime_700"> #AFB42B</color>
<color name="Lime_800"> #9E9D24</color>
<color name="Lime_900"> #827717</color>
<color name="Lime_A100">#F4FF81</color>
<color name="Lime_A200">#EEFF41</color>
<color name="Lime_A400">#C6FF00</color>
<color name="Lime_A700">#AEEA00</color>
<color name="Yellow_50"> #FFFDE7</color>
<color name="Yellow_100"> #FFF9C4</color>
<color name="Yellow_200"> #FFF59D</color>
<color name="Yellow_300"> #FFF176</color>
<color name="Yellow_400"> #FFEE58</color>
<color name="Yellow_500"> #FFEB3B</color>
<color name="Yellow_600"> #FDD835</color>
<color name="Yellow_700"> #FBC02D</color>
<color name="Yellow_800"> #F9A825</color>
<color name="Yellow_900"> #F57F17</color>
<color name="Yellow_A100">#FFFF8D</color>
<color name="Yellow_A200">#FFFF00</color>
<color name="Yellow_A400">#FFEA00</color>
<color name="Yellow_A700">#FFD600</color>
<color name="Amber_50"> #FFF8E1</color>
<color name="Amber_100"> #FFECB3</color>
<color name="Amber_200"> #FFE082</color>
<color name="Amber_300"> #FFD54F</color>
<color name="Amber_400"> #FFCA28</color>
<color name="Amber_500"> #FFC107</color>
<color name="Amber_600"> #FFB300</color>
<color name="Amber_700"> #FFA000</color>
<color name="Amber_800"> #FF8F00</color>
<color name="Amber_900"> #FF6F00</color>
<color name="Amber_A100">#FFE57F</color>
<color name="Amber_A200">#FFD740</color>
<color name="Amber_A400">#FFC400</color>
<color name="Amber_A700">#FFAB00</color>
<color name="Orange_50"> #FFF3E0</color>
<color name="Orange_100"> #FFE0B2</color>
<color name="Orange_200"> #FFCC80</color>
<color name="Orange_300"> #FFB74D</color>
<color name="Orange_400"> #FFA726</color>
<color name="Orange_500"> #FF9800</color>
<color name="Orange_600"> #FB8C00</color>
<color name="Orange_700"> #F57C00</color>
<color name="Orange_800"> #EF6C00</color>
<color name="Orange_900"> #E65100</color>
<color name="Orange_A100">#FFD180</color>
<color name="Orange_A200">#FFAB40</color>
<color name="Orange_A400">#FF9100</color>
<color name="Orange_A700">#FF6D00</color>
<color name="DeepOrange_50"> #FBE9E7</color>
<color name="DeepOrange_100"> #FFCCBC</color>
<color name="DeepOrange_200"> #FFAB91</color>
<color name="DeepOrange_300"> #FF8A65</color>
<color name="DeepOrange_400"> #FF7043</color>
<color name="DeepOrange_500"> #FF5722</color>
<color name="DeepOrange_600"> #F4511E</color>
<color name="DeepOrange_700"> #E64A19</color>
<color name="DeepOrange_800"> #D84315</color>
<color name="DeepOrange_900"> #BF360C</color>
<color name="DeepOrange_A100">#FF9E80</color>
<color name="DeepOrange_A200">#FF6E40</color>
<color name="DeepOrange_A400">#FF3D00</color>
<color name="DeepOrange_A700">#DD2C00</color>
<color name="Brown_50"> #EFEBE9</color>
<color name="Brown_100">#D7CCC8</color>
<color name="Brown_200">#BCAAA4</color>
<color name="Brown_300">#A1887F</color>
<color name="Brown_400">#8D6E63</color>
<color name="Brown_500">#795548</color>
<color name="Brown_600">#6D4C41</color>
<color name="Brown_700">#5D4037</color>
<color name="Brown_800">#4E342E</color>
<color name="Brown_900">#3E2723</color>
<color name="Grey_50"> #FAFAFA</color>
<color name="Grey_100">#F5F5F5</color>
<color name="Grey_200">#EEEEEE</color>
<color name="Grey_300">#E0E0E0</color>
<color name="Grey_400">#BDBDBD</color>
<color name="Grey_500">#9E9E9E</color>
<color name="Grey_600">#757575</color>
<color name="Grey_700">#616161</color>
<color name="Grey_800">#424242</color>
<color name="Grey_900">#212121</color>
<color name="BlueGrey_50"> #ECEFF1</color>
<color name="BlueGrey_100">#CFD8DC</color>
<color name="BlueGrey_200">#B0BEC5</color>
<color name="BlueGrey_300">#90A4AE</color>
<color name="BlueGrey_400">#78909C</color>
<color name="BlueGrey_500">#607D8B</color>
<color name="BlueGrey_600">#546E7A</color>
<color name="BlueGrey_700">#455A64</color>
<color name="BlueGrey_800">#37474F</color>
<color name="BlueGrey_900">#263238</color>
<color name="Black">#000000</color>
<color name="White">#FFFFFF</color>
</resources>
几个关键颜色的用法
整体颜色
| 颜色 | 色号 | 适用场景 |
|---|---|---|
| Primary color (基色,原色) | 500 / 700 / 100 | 1. 屏幕中使用最广2. 一般会配一个深色或浅色的色号colorPrimaryDark |
| Secondary color (间色) | 1. 用于标明相关的动作或者信息2. 一般是主色调的一个更深或更浅的颜色变化 | |
| Accent color (重点色) | A200 / A400 / A100 | 重点色一班用于FAB和互动的元素(文本、游标、文本选择、进度条、选择控制器、按钮、滑动器、连接) |
| Alternative accent colors (备用重点色) | 对于背景颜色太亮或太暗时，使用较暗或较亮的颜色替代 | |
| Primary color variations (原色变化) | 500 | 1. 另一种替代重点色的方案是使用原色的500色号2. 如果原色已经是500色号了，那么就使用100%的白色或者54%的黑色 |
浅色背景下的深色文字
| Dark text （#000000） | Opacity |
|---|---|
| Primary text （重要文字） | 87% |
| Secondary text （次要文字） | 54% |
| Disabled text, hint text, and icons | 38% |
| Dividers （分割线） | 12% |
| Primary text | #000000 | 87% |
| Secondary text | #000000 | 54% |
| Disabled/Hint text | #000000 | 38% |
| Primary color | #3E50B4 | 100% |
| Accent color | #FF3F80 | 100% |
深色背景下的白色文字
| Dark text （#000000） | Opacity |
|---|---|
| Primary text （重要文字） | 100% |
| Secondary text （次要文字） | 70% |
| Disabled text, hint text, and icons | 50% |
| Dividers （分割线） | 12% |
| Primary text | #FFFFFF | 100% |
| Secondary text | #FFFFFF | 70% |
| Disabled / Hint text | #FFFFFF | 50% |
| Primary color | #3E50B4 | 100% |
| Accent color | #FF3F80 | 100% |
使用透明度替代灰色
- 黑色的文字，设置不透明度为0.54，但是要保证文字和背景的和谐
Icons和其他元素
| Dark icons (#000000)暗色图标 | Opacity 透明度 |
|---|---|
| Active icon 活动图标 | 54% |
| Inactive icon 无效图标 | 38% |
| Light icons (#FFFFFF)亮色图标 | Opacity 透明度 |
|---|---|
| Active icon 活动图标 | 100% |
| Inactive icon 无效图标 | 50% |
示例主题
样式统一色系
Light theme 亮色主题
| 位置 | 色度 |
|---|---|
| Status bar（1 状态栏） | 300 |
| App bar（2 应用程序栏） | 100 |
| Background（3 背景） | 50 |
| Cards/Dialogs（4 卡片/警告栏） | White |
| 色卡 | 示例 |
|---|---|
 |
 |
Dark theme 暗色主题
| 位置 | 色度 |
|---|---|
| Status bar（1 状态栏） | Black 100% |
| App bar（2 应用程序栏） | 900 |
| Background（3 背景） | #303030 |
| Cards/Dialogs（4 卡片/警告栏） | 800 |
| 色卡 | 示例 |
|---|---|
 |
 |