# Color 色彩

当前专题下的色彩均为 DNVUE UI 的内置色彩

提示

DNVUE UI 2.0 采用的颜色配置采用Ant Design 色彩调色板,系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中,基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。

# 系统级色彩体系

系统级色彩体系同样源于「自然」的设计价值观。设计师通过对自然场景的抽象捕捉,结合蚂蚁的技术基因,形成了特有的 12 色。进一步又通过大量的观察,捕捉不同色彩在自然光下的变化规律,借助美术中素描的思路,对 12 个颜色进行了衍生。在中性色板的定义上,则是平衡了可读性、美感以及可用性得出的。

# 基础色板

基础色板共计 120 个颜色,包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。

温馨提示

在class中使用时需添加上前缀color-(文本),bg-(背景色),border-(边框)

  • color : 文本颜色,示例:color-red-6
  • bg : 背景颜色,示例:bg-red-6
  • border : 边框颜色,示例:border-red-6

Dust Red / 薄暮
斗志、奔放
{value}-red-1
#fff1f0
{value}-red-2
#ffccc7
{value}-red-3
#ffa39e
{value}-red-4
#ff7875
{value}-red-5
#ff4d4f
{value}-red-6
#f5222d
{value}-red-7
#cf1322
{value}-red-8
#a8071a
{value}-red-9
#820014
{value}-red-10
#5c0011
Volcano / 火山
醒目、澎湃
{value}-volcano-1
#fff2e8
{value}-volcano-2
#ffd8bf
{value}-volcano-3
#ffbb96
{value}-volcano-4
#ff9c6e
{value}-volcano-5
#ff7a45
{value}-volcano-6
#fa541c
{value}-volcano-7
#d4380d
{value}-volcano-8
#ad2102
{value}-volcano-9
#871400
{value}-volcano-10
#610b00
Sunset Orange / 日暮
温暖、欢快
{value}-orange-1
#fff7e6
{value}-orange-2
#ffe7ba
{value}-orange-3
#ffd591
{value}-orange-4
#ffc069
{value}-orange-5
#ffa940
{value}-orange-6
#fa8c16
{value}-orange-7
#d46b08
{value}-orange-8
#ad4e00
{value}-orange-9
#873800
{value}-orange-10
#612500
Calendula Gold / 金盏花
活力、积极
{value}-gold-1
#fffbe6
{value}-gold-2
#fff1b8
{value}-gold-3
#ffe58f
{value}-gold-4
#ffd666
{value}-gold-5
#ffc53d
{value}-gold-6
#faad14
{value}-gold-7
#d48806
{value}-gold-8
#ad6800
{value}-gold-9
#874d00
{value}-gold-10
#613400
Sunrise Yellow / 日出
出生、阳光
{value}-yellow-1
#feffe6
{value}-yellow-2
#ffffb8
{value}-yellow-3
#fffb8f
{value}-yellow-4
#fff566
{value}-yellow-5
#ffec3d
{value}-yellow-6
#fadb14
{value}-yellow-7
#d4b106
{value}-yellow-8
#ad8b00
{value}-yellow-9
#876800
{value}-yellow-10
#614700
Lime / 青柠
自然、生机
{value}-lime-1
#fcffe6
{value}-lime-2
#f4ffb8
{value}-lime-3
#eaff8f
{value}-lime-4
#d3f261
{value}-lime-5
#bae637
{value}-lime-6
#a0d911
{value}-lime-7
#7cb305
{value}-lime-8
#5b8c00
{value}-lime-9
#3f6600
{value}-lime-10
#254000
Polar Green / 极光绿
健康、创新
{value}-green-1
#f6ffed
{value}-green-2
#d9f7be
{value}-green-3
#b7eb8f
{value}-green-4
#95de64
{value}-green-5
#73d13d
{value}-green-6
#52c41a
{value}-green-7
#389e0d
{value}-green-8
#237804
{value}-green-9
#135200
{value}-green-10
#092b00
Cyan / 明青
希望、坚强
{value}-cyan-1
#e6fffb
{value}-cyan-2
#b5f5ec
{value}-cyan-3
#87e8de
{value}-cyan-4
#5cdbd3
{value}-cyan-5
#36cfc9
{value}-cyan-6
#13c2c2
{value}-cyan-7
#08979c
{value}-cyan-8
#006d75
{value}-cyan-9
#00474f
{value}-cyan-10
#002329
Daybreak Blue / 拂晓蓝
包容、科技、普惠
{value}-blue-1
#e6f7ff
{value}-blue-2
#bae7ff
{value}-blue-3
#91d5ff
{value}-blue-4
#69c0ff
{value}-blue-5
#40a9ff
{value}-blue-6
#1890ff
{value}-blue-7
#096dd9
{value}-blue-8
#0050b3
{value}-blue-9
#003a8c
{value}-blue-10
#002766
Geek Blue / 极客蓝
探索、钻研
{value}-geekblue-1
#f0f5ff
{value}-geekblue-2
#d6e4ff
{value}-geekblue-3
#adc6ff
{value}-geekblue-4
#85a5ff
{value}-geekblue-5
#597ef7
{value}-geekblue-6
#2f54eb
{value}-geekblue-7
#1d39c4
{value}-geekblue-8
#10239e
{value}-geekblue-9
#061178
{value}-geekblue-10
#030852
Golden Purple / 酱紫
优雅、浪漫
{value}-purple-1
#f9f0ff
{value}-purple-2
#efdbff
{value}-purple-3
#d3adf7
{value}-purple-4
#b37feb
{value}-purple-5
#9254de
{value}-purple-6
#722ed1
{value}-purple-7
#531dab
{value}-purple-8
#391085
{value}-purple-9
#22075e
{value}-purple-10
#120338
Magenta / 法式洋红
明快、感性
{value}-magenta-1
#fff0f6
{value}-magenta-2
#ffd6e7
{value}-magenta-3
#ffadd2
{value}-magenta-4
#ff85c0
{value}-magenta-5
#f759ab
{value}-magenta-6
#eb2f96
{value}-magenta-7
#c41d7f
{value}-magenta-8
#9e1068
{value}-magenta-9
#780650
{value}-magenta-10
#520339
中性色板
中性色包含了黑、白、灰
{value}-gray-1
#ffffff
{value}-gray-2
#fafafa
{value}-gray-3
#f5f5f5
{value}-gray-4
#f0f0f0
{value}-gray-5
#d9d9d9
{value}-gray-6
#bfbfbf
{value}-gray-7
#8c8c8c
{value}-gray-8
#595959
{value}-gray-9
#434343
{value}-gray-10
#262626
{value}-gray-11
#1f1f1f
{value}-gray-12
#141414
{value}-gray-13
#000000