# Color 色彩

概述

Color 色彩,First UI用色指南。

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 钉钉小程序 百度小程序 字节小程序 QQ小程序 H5/PC

# 色彩规范

# 主色

使用场景如:菜单栏、按钮、突出文字、图标等。
浅色模式(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%)

示例预览

# 示例代码地址

FirstUIColor 色彩
Last Updated: 9/29/2022, 1:07:59 AM