颜色

Material Design 定义了各种颜色。这些颜色将用于可视化。建议尽可能使用颜色值来声明一种颜色,以确保对比度和设计稍后会匹配。这需要特别注意,因为在从浅色到深色的设计切换时,文本可能会变得无法阅读。

提示: 您可以在项目设置中更改可视化选项卡下的颜色。这样可以创建个性化的设计。

背景颜色

这些是可视化的所有可能背景颜色。

名称 颜色 文本颜色
红色 red #D32F2F #FFFFFF
粉色 pink #C2185B #FFFFFF
紫色 purple #7B1FA2 #FFFFFF
深紫色 deep_purple #512DA8 #FFFFFF
靛蓝色 indigo #303F9F #FFFFFF
蓝色 blue #1976D2 #FFFFFF
浅蓝色 light_blue #0288D1 #FFFFFF
青色 cyan #0097A7 #FFFFFF
海军蓝色 teal #00796B #FFFFFF
绿色 green #388E3C #FFFFFF
浅绿色 light_green #689F38 #FFFFFF
柠檬绿色 lime #AFB42B #000000
黄色 yellow #FBC02D #000000
琥珀色 amber #FFA000 #000000
橙色 orange #F57C00 #000000
深橙色 deep_orange #E64A19 #FFFFFF
错误 error #B00020 #FFFFFF

符号和文本颜色

这些颜色推荐用于文本,并在平面图上的符号中使用,以表示足够的对比度。

名称 颜色 文本颜色
红色 red #F44336 #FFFFFF
粉色 pink #E91E63 #FFFFFF
紫色 purple #9C27B0 #FFFFFF
深紫色 deep_purple #673AB7 #FFFFFF
靛蓝色 indigo #3F51B5 #FFFFFF
蓝色 blue #2196F3 #FFFFFF
浅蓝色 light_blue #03A9F4 #000000
青色 cyan #00BCD4 #000000
海军蓝色 teal #009688 #FFFFFF
绿色 green #4CAF50 #000000
浅绿色 light_green #8BC34A #000000
柠檬绿色 lime #CDDC39 #000000
黄色 yellow #FFEB3B #000000
琥珀色 amber #FFC107 #000000
橙色 orange #FF9800 #000000
深橙色 deep_orange #FF5722 #FFFFFF
棕色 brown #795548 #FFFFFF
灰色 gray #9E9E9E #000000
蓝灰色 blue_gray #607D8B #FFFFFF
错误 error #B00020 #FFFFFF