# Color 色彩

概述

Color 色彩,First UI用色指南。

# 支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)

安卓系统版本 安卓uni-app 安卓uniapp-x iOS系统版本 iOS uniapp iOS uniapp-x 小程序 H5/Web
5.0 × 9.0 × × ×

# 色彩规范

# 主色

使用场景如:菜单栏、按钮、突出文字、图标等。
浅色模式(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(to bottom right,#465CFF,#6831FF)
linear-gradient(to bottom right,#FD8C8C,#FF2B2B)

示例预览

# 示例代码地址

FirstUIColor 色彩
Last Updated: 1/29/2024, 6:27:37 PM