# Color 色彩
概述
Color 色彩,First UI用色指南。
# 色彩规范
# 主色
使用场景如:菜单栏、按钮、突出文字、图标等。
浅色模式(light) | 深色模式(dark) |
---|---|
#465CFF | #465CFF |
# 辅助色
使用场景如:信息提示成功、警告和失败等。
浅色模式(light) | 深色模式(dark) |
---|---|
#FF2B2B | #FF2B2B |
#FFB703 | #FFB703 |
#6831FF | #6831FF |
#09BE4F | #09BE4F |
# 字体颜色
使用场景如:表单标题内容、文章标题内容等。
浅色模式(light) | 深色模式(dark) |
---|---|
#181818 | #D1D1D1 |
#333333 | #A3A3A3 |
#B2B2B2 | #8D8D8D |
#CCCCCC | #5E5E5E |
#FFFFFF | #FFFFFF |
# 背景色、遮罩色
使用场景如:页面背景色、内容模块底色等。
浅色模式(light) | 深色模式(dark) |
---|---|
#F1F4FA | #111111 |
#FFFFFF | #1B1B1B |
#F8F8F8 | #222222 |
rgba(255, 43, 43, .05) | #222222 |
rgba(255, 183, 3, .1) | #222222 |
rgba(104, 49, 255, .05) | #222222 |
rgba(9, 190, 79, .05) | #222222 |
rgba(0, 0, 0, 0.6) | rgba(0, 0, 0, 0.6) |
rgba(0, 0, 0, 0.2) | rgba(255, 255, 255, .2) |
# 边框颜色
使用场景如:分割线等。
浅色模式(light) | 深色模式(dark) |
---|---|
#EEEEEE | #242424 |
# 渐变色
使用场景如:按钮背景色等。
浅色模式(light) | 深色模式(dark) |
---|---|
linear-gradient(90deg, #465CFF 0%, #6831FF 100%) | linear-gradient(90deg, #FD8C8C 0%, #FF2B2B 100%) |