色彩

COLOR

常用色板

#1890ff
#46A6FF
#8BC7FF
#A3D3FF
#D1E9FF
#E8F4FF
#EF5757
#F27979
#F7ABAB
#F9BCBC
#FCDDDD
#FDEEEE
#F68330
#F89C59
#FBC197
#FBCDAC
#FDE6D6
#FEF3EA
#60B971
#80C78D
#AFDCB8
#BFE3C6
#DFF1E3
#E6F7F7
#05B1AC
#37C1BD
#82D8D5
#9BE0DE
#CDEFEE
#E6F7F7
#5473C9
#768FD4
#A9B9E4
#BBC7E9
#DDE3F4
#EEF1FA
#533FB1
#7565C1
#A99FD8
#BAB2E0
#DDD9EF
#EEECF7
   
#001529    导航栏背景
#152C4E    导航栏菜单选中背景
#1F1F1F    主标题文字/一级文字/图标
#494A4D    副标题/单复选框文字/输入框文字/二级文字/只读文字/图标
#797A80    三级文字/图标
#A5A7AF     四级文字/图标
#C2C4CC     单复选框未选中/默认按钮边框/输入框提示文字
#E1E2E5     分页器边框/分割线/输入边框/只读边框/禁用边框
#EFF1F5     只读背景/禁用背景
#F0F2F5     页面底层背景

在实际使用中，优先使用常用色板。

备用色板

#ffa39e
#f5222d
#a8071a
#820014
#ffd8bf
#ff9c6e
#cf1322
#610b00
#ffe7ba
#ffc069
#fa8c16
#d46b08
#ffe58f
#faad14
#d48806
#ad6800
#ffffb8
#fadb14
#d4b106
#614700
#d9f7be
#95de64
#52c41a
#092b00
#eaff8f
#a0d911
#5b8c00
#3f6600
#87e8de
#13c2c2
#08979c
#006d75
#bae7ff
#69c0ff
#1890ff
#0050b3
#d6e4ff
#85a5ff
#2f54eb
#061178
#efdbff
#b37feb
#722ed1
#391085
#ffadd2
#f759ab
#c41d7f
#780650

在常用色板颜色不能满足需求时，可使用备用色板。

功能色

主色

  
#1890FF    rgb(24,144,255)    图标、按钮、文本等场景使用
色阶
#1890FF   文本色
#8BC7FF   悬浮边框色
#A3D3FF   边框色
#D1E9FF   悬浮背景色
#E8F4FF   背景色
示例
  1. 1 #A3D3FF
  2. 2 #E8F4FF
  3. 3 #1890FF
  4. 4 #8BC7FF
  5. 5 #D1E9FF
  6. 6 #1890FF
  7. 7 #1890FF
  8. 8 #FFFFFF

用于确认、提交、保存、已选中、链接等情况。

停用/失败色

   
#EF5757    rgb(239,87,87)    图标、按钮、文本等场景使用
色阶
#EF5757   文本色
#F7ABAB   文本色
#F9BCBC   文本色
#FCDDDD   文本色
#FDEEEE   背景色
示例
  1. 1 #F9BCBC
  2. 2 #FDEEEE
  3. 3 #EF5757
  4. 4 #F7ABAB
  5. 5 #FCDDDD
  6. 6 #EF5757
  7. 7 #EF5757
  8. 8 #FFFFFF

用于删除、失败、错误、重要事项或紧急状态等情况。

激活/警告色

   
#F68330    rgb(246,131,48)    图标、按钮、文本等场景使用
色阶        
#F68330   文本色
#FBC197   悬浮边框色
#FBCDAC   边框色
#FDE6D6   悬浮背景色
#FEF3EA   背景色
示例
  1. 1 #FBCDAC
  2. 2 #FEF3EA
  3. 3 #F68330
  4. 4 #FBC197
  5. 5 #FDE6D6
  6. 6 #F68330
  7. 7 #F68330
  8. 8 #FFFFFF

用于待处理、未完成、告警、注意等情况。

当某个操作可能存在风险但不是严重错误时，可能会用黄色进行提示，比红色的警告程度稍低。

正常/成功色

   
#60B971    rgb(96,185,113)    图标、按钮、文本等场景使用
色阶        
#60B971   文本色
#AFDCB8   悬浮边框色
#BFE3C6   边框色
#DFF1E3   悬浮背景色
#EFF8F1   背景色
示例
  1. 1 #BFE3C6
  2. 2 #EFF8F1
  3. 3 #60B971
  4. 4 #AFDCB8
  5. 5 #DFF1E3
  6. 6 #60B971
  7. 7 #60B971
  8. 8 #FFFFFF

用于成功、正常、运行等情况。

禁用色

   
#A5A7AF    rgb(165,167,175)    禁用色
色阶        
#EFF1F5     背景颜色
#E1E2E5     边框颜色
#A5A7AF     文字颜色
示例
  1. 1 #E1E2E5
  2. 2 #EFF1F5
  3. 3 #C2C4CC

用于未激活、不可用、数据回显或其他不可编辑的情况。

图表配色

主题1

          
#1890FF
#F68330
#9065EC
#05B1AC
#EF5757
#5473C9
#ADD341
#FFB03A
#D43CB3
#60B971
#533FB1
#9AABC7
#8195FF
可用于饼状图、柱状图、环形图、折线图等。

主题2

          
#A8071A
#CF1322
#FA8C16
#D48806
#D4B106
#52C41A
#5B8C00
#08979C
#1890FF
#2F54EB
#722ED1
#C41D7F
可用于饼状图、柱状图、环形图、折线图等。

主题3

          
#0D39B2
#5473C9
#1890FF
#669FD0
#78CCC7
#E1E2E5
地图色阶。

主题4

          
#FA982D
#FCB76C
#FEE44E
#C5E44D
#8DD24D
#05B1AC
#1890FF
#669FD0
#5473C9
#9E68C9
#E6669B
#FE6766
可用于玫瑰图、旭日图。

密级色值(3个)

类型 示例 文字颜色 背景颜色 描边颜色
有描边
FM
#1890FF rgba(24, 144, 255, .1) rgba(24, 144, 255, .4)
MM
#F68330 rgba(246, 131, 48, .1) rgba(246, 131, 48, .4)
JM
#EF5757 rgba(239, 87, 87, .1) rgba(239, 87, 87, .4)
有背景色
FM
#1890FF rgba(24, 144, 255, .1) --
MM
#F68330 rgba(246, 131, 48, .1) --
JM
#EF5757 rgba(239, 87, 87, .1) --
纯文字
FM
#1890FF -- --
MM
#F68330 -- --
JM
#EF5757 -- --

程序色值(10个)

#F66B30
#E63636
#D43CB3
#409EFF
#8195FF
#9065EC
#05B1AC
#60B971
#ADD341
#FFB03A
应用于平台中的各程序图标，可根据程序属性取色。

门户-应用(常用菜单)

页面示例
状态 常用菜单示例 图标渐变样式 卡片样式
默认 background: linear-gradient(to bottom, rgba(246,107,48,.3), rgba(199,76,24,1) background: rgba(246,107,48,.05）
选中 background: linear-gradient(to bottom, rgba(246,107,48,1), rgba(199,76,24,1) background: rgba(246,107,48,.1);border:1px solid rgba(246,107,48,.8); border-radius: 6px;
默认 background: linear-gradient(to bottom, rgba(230,54,54,.3), rgba(230,54,54,1) background: rgba(230,54,54,.05）
选中 background: linear-gradient(to bottom, rgba(230,54,54,1), rgba(230,54,54,1) background: rgba(230,54,54,.1);border:1px solid rgba(230,54,54,.8); border-radius: 6px;
默认 background: linear-gradient(to bottom, rgba(212,60,179,.3), rgba(212,60,179,1) background: rgba(212,60,179,.05）
选中 background: linear-gradient(to bottom, rgba(212,60,179,1), rgba(212,60,179,1) background: rgba(212,60,179,.1);border:1px solid rgba(212,60,179,.8); border-radius: 6px;
默认 background: linear-gradient(to bottom, rgba(64,158,255,.3), rgba(64,158,255,1) background: rgba(64,158,255,.05）
选中 background: linear-gradient(to bottom, rgba(64,158,255,1), rgba(64,158,255,1) background: rgba(64,158,255,.1);border:1px solid rgba(64,158,255,.8); border-radius: 6px;
默认 background: linear-gradient(to bottom, rgba(129,149,255,.3), rgba(129,149,255,1) background: rgba(129,149,255,.05）
选中 background: linear-gradient(to bottom, rgba(129,149,255,1), rgba(129,149,255,1) background: rgba(129,149,255,.1);border:1px solid rgba(129,149,255,.8); border-radius: 6px;
默认 background: linear-gradient(to bottom, rgba(144,101,236,.3), rgba(144,101,236,1) background: rgba(144,101,236,.05）
选中 background: linear-gradient(to bottom, rgba(144,101,236,1), rgba(144,101,236,1) background: rgba(144,101,236,.1);border:1px solid rgba(144,101,236,.8); border-radius: 6px;
默认 background: linear-gradient(to bottom, rgba(5,177,172,.3), rgba(5,177,172,1) background: rgba(5,177,172,.05）
选中 background: linear-gradient(to bottom, rgba(5,177,172,1), rgba(5,177,172,1) background: rgba(5,177,172,.1);border:1px solid rgba(5,177,172,.8); border-radius: 6px;
默认 background: linear-gradient(to bottom, rgba(96,185,113,.3), rgba(96,185,113,1) background: rgba(96,185,113,.05）
选中 background: linear-gradient(to bottom, rgba(96,185,113,1), rgba(96,185,113,1) background: rgba(96,185,113,.1);border:1px solid rgba(96,185,113,.8); border-radius: 6px;
默认 background: linear-gradient(to bottom, rgba(173,211,65,.3), rgba(173,211,65,1) background: rgba(173,211,65,.05）
选中 background: linear-gradient(to bottom, rgba(173,211,65,1), rgba(173,211,65,1) background: rgba(173,211,65,.1);border:1px solid rgba(173,211,65,.8); border-radius: 6px;
默认 background: linear-gradient(to bottom, rgba(255,176,58,.3), rgba(255,176,58,1) background: rgba(255,176,58,.05）
选中 background: linear-gradient(to bottom, rgba(255,176,58,1), rgba(255,176,58,1) background: rgba(255,176,58,.1);border:1px solid rgba(255,176,58,.8); border-radius: 6px;
常用菜单的颜色，是根据相应的程序色值来确定的。

色板生成工具

https://ant.design/docs/spec/colors-cn#色板生成工具

如果以上色板不能满足需求，可以使用色板生成工具生成一套新的色板。

设计说明

色彩使用
同一界面中不应出现过多的色彩(除特殊标签)，通过色彩设计规范，能够有效的提供色彩使用范围以及约束整个产品中出现的颜色。
优先级
根据当前的界面、模块在操作逻辑上的优先级来决定色彩重度。在同一界面上根据不同的优先级使用不同的颜色，在视觉上营造层次感，让用户第一眼看到界面就能够迅速的明确重点在哪里。