# 颜色系统

ShadowUI3 提供了一套完整的颜色系统，包括主色调、功能色、中性色和渐变色，方便开发者进行统一的视觉设计。

# 常规搭配

# 主色调

颜色名称	CSS 类名	颜色值	说明
主色	`ui-bg-primary`	`#01AAED`	主要用于品牌标识、关键操作按钮等
成功	`ui-bg-success`	`#009688`	表示操作成功、状态正常
失败	`ui-bg-fail`	`#FFC107`	表示操作失败、状态异常
警告	`ui-bg-warning`	`#FF5722`	表示警告信息、需要注意的内容
危险	`ui-bg-danger`	`#ee0a24`	表示危险操作、错误信息
信息	`ui-bg-info`	`#8799A3`	表示辅助信息、说明文本

# 使用示例

<view class="ui-bg-primary">主色背景</view>
<view class="ui-bg-success">成功背景</view>
<view class="ui-bg-fail">失败背景</view>
<view class="ui-bg-warning">警告背景</view>
<view class="ui-bg-danger">危险背景</view>
<view class="ui-bg-info">信息背景</view>

# 常规背景色

# 深色系列

颜色名称	CSS 类名	颜色值
雅黑	`ui-bg-393D49`	`#393D49`
藏青	`ui-bg-2F4056`	`#2F4056`
玄灰	`ui-bg-info`	`#8799A3`
浅灰	`ui-bg-E7EBED`	`#E7EBED`

# 绿色系列

颜色名称	CSS 类名	颜色值
墨绿	`ui-bg-success`	`#009688`
绿	`ui-bg-5FB878`	`#5FB878`
森绿	`ui-bg-8BC34A`	`#8BC34A`
浅绿	`ui-bg-E8F6E8`	`#E8F6E8`

# 蓝色系列

颜色名称	CSS 类名	颜色值
活力蓝	`ui-bg-1E9FFF`	`#1E9FFF`
海蓝	`ui-bg-primary`	`#01AAED`
青蓝	`ui-bg-00BCD4`	`#00BCD4`
浅蓝	`ui-bg-D9ECFF`	`#D9ECFF`

# 红色系列

颜色名称	CSS 类名	颜色值
深红	`ui-bg-danger`	`#EE0A24`
赤红	`ui-bg-E54D42`	`#E54D42`
丹红	`ui-bg-F56C6C`	`#F56C6C`
浅红	`ui-bg-FADBD9`	`#FADBD9`

# 橙色系列

颜色名称	CSS 类名	颜色值
橘橙	`ui-bg-F37B1D`	`#F37B1D`
黄	`ui-bg-warning`	`#FFC107`
大黄	`ui-bg-FFB800`	`#FFB800`
浅黄	`ui-bg-FDE6D2`	`#FDE6D2`

# 极简单中性色

颜色值	说明
`#c2c2c2`	浅灰色
`#dddddd`	中灰色
`#e2e2e2`	浅灰色
`#eeeeee`	极浅灰色
`#F0F0F0`	背景灰色

# 字体颜色

# 功能字体色

颜色名称	CSS 类名	颜色值	说明
主色	`ui-text-primary`	`#01AAED`	主要链接、强调文本
成功	`ui-text-success`	`#009688`	成功信息文本
失败	`ui-text-fail`	`#FFC107`	失败信息文本
警告	`ui-text-warning`	`#FF5722`	警告信息文本
危险	`ui-text-danger`	`#ee0a24`	错误信息文本
信息	`ui-text-info`	`#8799A3`	辅助说明文本

# 使用示例

<view class="ui-text-primary">主色文本</view>
<view class="ui-text-success">成功文本</view>
<view class="ui-text-warning">警告文本</view>
<view class="ui-text-danger">危险文本</view>

# 背景渐变色

# 线性渐变色

渐变名称	CSS 类名	说明
红色渐变	`ui-bg-linear-red`	从红色到深红色的线性渐变
橙色渐变	`ui-bg-linear-orange`	从橙色到深橙色的线性渐变
蓝色渐变	`ui-bg-linear-blue`	从蓝色到深蓝色的线性渐变
绿色渐变	`ui-bg-linear-green`	从绿色到深绿色的线性渐变

# 使用示例

<view class="ui-bg-linear-red">红色渐变背景</view>
<view class="ui-bg-linear-blue">蓝色渐变背景</view>

# 径向渐变色

渐变名称	CSS 类名	说明
红色径向	`ui-bg-radial-red`	从中心向外扩散的红色径向渐变
橙色径向	`ui-bg-radial-orange`	从中心向外扩散的橙色径向渐变
蓝色径向	`ui-bg-radial-blue`	从中心向外扩散的蓝色径向渐变
绿色径向	`ui-bg-radial-green`	从中心向外扩散的绿色径向渐变

# 使用示例

<view class="ui-bg-radial-green">绿色径向渐变</view>
<view class="ui-bg-radial-orange">橙色径向渐变</view>

# 自定义颜色

如果需要自定义颜色，可以修改项目中的 uni.scss 文件，调整对应的 CSS 变量值。

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/color/color

← CSS 文档布局系统 →