---
order: 3
title: 颜色规范
---

## 01.基础色

| 颜色 | scss 变量名称  |色值  |说明  |
|---------|---------|---------|---------|
| <input style="background: #1D78FF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $primaryColor      |  #1D78FF      | 用于主按钮底色，描边按钮，可操作项，tab 选中状态的底部线条，运行中的状态以及文字图标颜色    |
| <input style="background: #0A67F2;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $hoverColor        |   #0A67F2     | Hover, 用于主按钮底色，描边按钮，可操作项，tab 选中状态的 hover 状态填充色      |
| <input style="background: #2672F0;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $clickColor        |   #005CE6     | Click, 用于主按钮底色，描边按钮，可操作项，tab 选中状态的点击状态填充色 |
| <input style="background: #BBD6FF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $disabledColor     |   #BBD6FF     | Disable, 用于主按钮底色，描边按钮，可操作项的不可用状态填充色 |
| <input style="background: #E8F1FF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $bg1Color          |   #E8F1FF     | Bg1, 用于小模块切换背景，提示背景 |
| <input style="background: #F2F7FA;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $bg2Color          |   #F2F7FA     | Bg2, 用于整个页面的底色 |

### 1.1 衍生色

| 颜色 | scss 变量名称  |色值  |说明  |
|---------|---------|---------|---------|
|  <input style="background: #DDEBFF;width: 80px; height: 26px;border: 1px solid #fff;" />   |    $deriveColor      |     #DDEBFF   | 衍生色，列表选中底色，部分 tab 选中底色 |

## 02.DTinsight navy

| 颜色 |scss 变量名称  |色值  |说明  |
|---------|---------|---------|---------|
| <input style="background: #3D446E;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $black_title       |  #3D446E      |  用于标题，主文字颜色       |
| <input style="background: #64698B;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $black_Desc        |  #64698B      |  用于表单标题备注说明文字颜色     |
| <input style="background: #8B8FA8;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $black_pageMsg     |  #8B8FA8      |  用于分页器提示文字颜色     |
| <input style="background: #B1B4C5;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $black_msg         |  #B1B4C5      |  用于文本框内的提示文字颜色 |
| <input style="background: #D8DAE2;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $black_border      |  #D8DAE2      |  用于表单边框颜色，图表线条颜色 |
| <input style="background: #EBECF0;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $black_readonly    |  #EBECF0      |  用于分割线、失效按钮状态颜色 |
| <input style="background: #F5F5F8;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $black_titleBg     |  #F5F5F8      |  用于模块标题背景色 |
| <input style="background: #F9F9FA;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $black_navBg       |  #F9F9FA      |  用于二级导航底色 |
| <input style="background: #FFFFFF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $white             |  #FFFFFF      |  一级按钮文字颜色 |

## 03.Functional Color 功能色

| 颜色 |scss 变量名称  |色值  |说明  |
|---------|---------|---------|---------|
| <input style="background: #1D78FF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $bule              |  #1D78FF      |  用于运行中状态颜色       |
| <input style="background: #11D7B2;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $green             |  #11D7B2      |  用于成功状态颜色     |
| <input style="background: #F96C5B;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $red               |  #F96C5B      |  用于失败状态、校验错误信息文字、必填项图标颜色     |
| <input style="background: #FBB310;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $yellow            |  #FBB310      |  用于下线状态、警告提示颜色 |
| <input style="background: #AC9DFF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $purple            |  #AC9DFF      |  用于取消、冻结状态提示颜色 |


## 04.Other Color 图表/插图配色

### 4.1 Blue

| 颜色 |scss 变量名称  |色值  |
|---------|---------|---------|
| <input style="background: #DDEBFF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $bule1             |  #DDEBFF      |
| <input style="background: #5D9EFF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $bule2             |  #5D9EFF      |
| <input style="background: #1D78FF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $bule3             |  #1D78FF      |

### 4.2 Green

| 颜色 |scss 变量名称  |色值  |
|---------|---------|---------|
| <input style="background: #E7FBF7;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $green1            |  #E7FBF7      |
| <input style="background: #50E2C6;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $green2            |  #50E2C6      |
| <input style="background: #11D7B2;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $green3            |  #11D7B2      |

### 4.3 Yellow

| 颜色 |scss 变量名称  |色值  |
|---------|---------|---------|
| <input style="background: #FFF4D9;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $yellow1           |  #FFF4D9      |
| <input style="background: #FFC749;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $yellow2           |  #FFC749      |
| <input style="background: #FBB310;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $yellow3           |  #FBB310      |
            
### 4.4 Red

| 颜色 |scss 变量名称  |色值  |
|---------|---------|---------|
| <input style="background: #FDE9E7;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $red1              |  #FDE9E7      |
| <input style="background: #FFA297;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $red2              |  #FFA297      |
| <input style="background: #F96C5B;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $red3              |  #F96C5B      |
            
### 4.5 Purple

| 颜色 |scss 变量名称  |色值  |
|---------|---------|---------|
| <input style="background: #EAE6FF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $purple1           |  #EAE6FF      |
| <input style="background: #BDB1FF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $purple2           |  #BDB1FF      |
| <input style="background: #AC9DFF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $purple3           |  #AC9DFF      |
            
### 4.6 Cyan

| 颜色 |scss 变量名称  |色值  |
|---------|---------|---------|
| <input style="background: #E7F8FA;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $cyan1             |  #E7F8FA      |
| <input style="background: #88E1EB;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $cyan2             |  #88E1EB      |
| <input style="background: #2CCCDF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $cyan3             |  #2CCCDF      |

### 4.7 Pink

| 颜色 |scss 变量名称  |色值  |
|---------|---------|---------|
| <input style="background: #FFE6EF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $pink1             |  #FFE6EF      |
| <input style="background: #FFB4CE;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $pink2             |  #FFB4CE      |
| <input style="background: #FF82AE;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $pink3             |  #FF82AE      |

### 4.8 多色场景：环形、树形图表

| 颜色 |scss 变量名称  |色值  |
|---------|---------|---------|
| <input style="background: #AC9DFF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $other1            |  #AC9DFF      |
| <input style="background: #888DFF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $other2            |  #888DFF      |
| <input style="background: #6A87FF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $other3            |  #6A87FF      |
| <input style="background: #4B81FF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $other4            |  #4B81FF      |
| <input style="background: #2D7BFF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $other5            |  #2D7BFF      |
| <input style="background: #1D78FF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $other6            |  #1D78FF      |
| <input style="background: #1A94E9;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $other7            |  #1A94E9      |
| <input style="background: #17A6D9;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $other8            |  #17A6D9      |
| <input style="background: #15BACA;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $other9            |  #15BACA      |
| <input style="background: #11D7B2;width: 80px; height: 26px;border: 1px solid #fff;" />    |   $other10           |  #11D7B2      |