---
title: 色彩
---

<style>
.color-list{float:left;width:100%;margin-bottom:50px}
.color-list.inline{float:left;width:auto;margin-bottom:50px}
.color-title{float:left;width:100%;font-size:14px;color:#111A34}
.color-item{float:left;width:140px;min-height:148px;margin-top:16px;margin-right:20px;margin-bottom:20px;padding-bottom:20px;border:solid 1px #E4E5E7;border-radius:4px 4px 0 0;overflow:hidden}
.color-item.no-gap{margin-right:0}
.color-item-box.large{width:140px;height:84px}
.color-item-box.small{width:60px;height:60px;margin-bottom:10px;font-size:12px;font-weight:100;color:#fff;text-align:center;line-height:60px}
.color-item-text{margin:10px 0 0!important;padding:0 10px!important;font-size:14px!important;color:#666F83;line-height:1!important}
.color-item-text span{color:#ccc}
</style>

色彩是传达品牌的一种良好的方式，为保证产品体验的风格的一致性，建议可使用调色板等工具建立品牌专属的调色板和使用规则。    

#### 功能色定义

**蓝色**：品牌色/基础色，代表便捷、安全、专业   
**橘色**：品牌色，代表增益、消费、权益    
**绿色**：健康、保障    
**红色**：逾期、强提醒时会用红色来提醒用户    

#### 品牌色

<div class="color-list">
  <div class="color-item">
    <div class="color-item-box large" style="background:#FF7D41"></div>
    <p class="color-item-text">#FF7D41</p>
    <p class="color-item-text">品牌桔</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#2F86F6"></div>
    <p class="color-item-text">#2F86F6</p>
    <p class="color-item-text">品牌蓝</p>
  </div>
</div>

#### 功能色

<div class="color-list">
  <div class="color-item">
    <div class="color-item-box large" style="background:#FF5257"></div>
    <p class="color-item-text">#FF5257</p>
    <p class="color-item-text">强提示报错</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#5878B4"></div>
    <p class="color-item-text">#5878B4</p>
    <p class="color-item-text">文字链接色</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#28AA91"></div>
    <p class="color-item-text">#28AA91</p>
  </div>
</div>

#### 中性色

<div class="color-list">
  <div class="color-item">
    <div class="color-item-box large" style="background:#FFFFFF;border-bottom:solid 1px #E4E5E7"></div>
    <p class="color-item-text">#FFFFFF</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#E2E4EA"></div>
    <p class="color-item-text">#E2E4EA</p>
    <p class="color-item-text">线/卡片背景色</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#F9FAFB"></div>
    <p class="color-item-text">#F9FAFB</p>
    <p class="color-item-text">操作区背景色</p>
  </div>
</div>

#### 文字信息

<div class="color-list">
  <div class="color-item">
    <div class="color-item-box large" style="background:#111A34"></div>
    <p class="color-item-text">#111A34</p>
    <p class="color-item-text">标题文字</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#41485D"></div>
    <p class="color-item-text">#41485D</p>
    <p class="color-item-text">正文</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#666F83"></div>
    <p class="color-item-text">#666F83</p>
    <p class="color-item-text">操作区背景色</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#858B9C"></div>
    <p class="color-item-text">#858B9C</p>
  </div>
  <div class="color-item">
    <div class="color-item-box large" style="background:#C5CAD5"></div>
    <p class="color-item-text">#C5CAD5</p>
    <p class="color-item-text">不可点击态</p>
  </div>
</div>

#### 遮罩（透明）

<div class="color-list">
  <div class="color-item">
    <div class="color-item-box large" style="background:rgba(0, 0, 0, .7)"></div>
    <p class="color-item-text">#000000</p>
    <p class="color-item-text">70%</p>
  </div>
</div>