Ant Design 130色色卡：企业级设计系统的完整调色板

Ant Design 是蚂蚁金服推出的企业级设计系统，其色彩体系基于 HSB 色彩模型，从自然界中抽象出 12 种基础色，每种色相衍生 10 个梯度（从最浅到最深），构成 120 色基础色板。加上中性色系（灰阶），总计 130+ 色。

这套色板被广泛应用于 中后台管理系统、数据可视化、SaaS 产品 等场景，是国内使用最广泛的 UI 配色方案之一。

Dust Red 薄暮

基色：#F5222D

1 `#fff1f0`	2 `#ffccc7`	3 `#ffa39e`	4 `#ff7875`	5 `#ff4d4f`
6 `#f5222d`	7 `#cf1322`	8 `#a8071a`	9 `#820014`	10 `#5c0011`

Volcano 火山

基色：#FA541C

1 `#fff2e8`	2 `#ffd8bf`	3 `#ffbb96`	4 `#ff9c6e`	5 `#ff7a45`
6 `#fa541c`	7 `#d4380d`	8 `#ad2102`	9 `#871400`	10 `#610b00`

Sunset Orange 日暮

基色：#FA8C16

1 `#fff7e6`	2 `#ffe7ba`	3 `#ffd591`	4 `#ffc069`	5 `#ffa940`
6 `#fa8c16`	7 `#d46b08`	8 `#ad4e00`	9 `#873800`	10 `#612500`

Calendula Gold 金盏花

基色：#FAAD14

1 `#fffbe6`	2 `#fff1b8`	3 `#ffe58f`	4 `#ffd666`	5 `#ffc53d`
6 `#faad14`	7 `#d48806`	8 `#ad6800`	9 `#874d00`	10 `#613400`

Sunrise Yellow 日出

基色：#FADB14

1 `#feffe6`	2 `#ffffb8`	3 `#fffb8f`	4 `#fff566`	5 `#ffec3d`
6 `#fadb14`	7 `#d4b106`	8 `#ad8b00`	9 `#876800`	10 `#614700`

Polar Green 极光绿

基色：#52C41A

1 `#f6ffed`	2 `#d9f7be`	3 `#b7eb8f`	4 `#95de64`	5 `#73d13d`
6 `#52c41a`	7 `#389e0d`	8 `#237804`	9 `#135200`	10 `#092b00`

Cyan 水绿

基色：#13C2C2

1 `#e6fffb`	2 `#b5f5ec`	3 `#87e8de`	4 `#5cdbd3`	5 `#36cfc9`
6 `#13c2c2`	7 `#08979c`	8 `#006d75`	9 `#00474f`	10 `#002329`

Polar Blue 拂晓蓝

基色：#1677FF

1 `#e6f4ff`	2 `#bae0ff`	3 `#91caff`	4 `#69b1ff`	5 `#4096ff`
6 `#1677ff`	7 `#0958d9`	8 `#003eb3`	9 `#002c8c`	10 `#001d66`

Geek Blue 极客蓝

基色：#2F54EB

1 `#f0f5ff`	2 `#d6e4ff`	3 `#adc6ff`	4 `#85a5ff`	5 `#597ef7`
6 `#2f54eb`	7 `#1d39c4`	8 `#10239e`	9 `#061178`	10 `#030852`

Golden Purple 酱紫

基色：#722ED1

1 `#f9f0ff`	2 `#efdbff`	3 `#d3adf7`	4 `#b37feb`	5 `#9254de`
6 `#722ed1`	7 `#531dab`	8 `#391085`	9 `#22075e`	10 `#120338`

Magenta 法式洋红

基色：#EB2F96

1 `#fff0f6`	2 `#ffd6e7`	3 `#ffadd2`	4 `#ff85c0`	5 `#f759ab`
6 `#eb2f96`	7 `#c41d7f`	8 `#9e1068`	9 `#780650`	10 `#520339`

Lime 青柠

基色：#A0D911

1 `#fcffe6`	2 `#f4ffb8`	3 `#eaff8f`	4 `#d3f261`	5 `#bae637`
6 `#a0d911`	7 `#7cb305`	8 `#5b8c00`	9 `#3f6600`	10 `#254000`

Neutral Color 中性色

中性色用于文本、背景、边框等场景，是 UI 中使用频率最高的颜色。

White `#ffffff`	Gray 1 `#fafafa`	Gray 2 `#f5f5f5`	Gray 3 `#f0f0f0`	Gray 4 `#d9d9d9`
Gray 5 `#bfbfbf`	Gray 6 `#8c8c8c`	Gray 7 `#595959`	Gray 8 `#434343`	Gray 9 `#262626`
Gray 10 `#1f1f1f`	Gray 11 `#141414`	Black `#000000`

使用场景

品牌色：通常选 #1677FF（拂晓蓝）或 #722ED1（酱紫）作为主色调
功能色：成功 #52C41A、警告 #FAAD14、错误 #F5222D、信息 #1677FF
文本色：主文本 #262626、次文本 #8C8C8C、禁用文本 #BFBFBF
背景色：页面 #F5F5F5、卡片 #FFFFFF、悬浮 #FAFAFA
边框色：默认 #D9D9D9、分割 #F0F0F0

色板生成工具

Ant Design 提供了在线色板生成工具，可以自定义基色并自动生成 10 级梯度：

官方工具：ant.design/docs/spec/colors

配套资源

色卡 HTML 表格可直接复制到 Notion / Obsidian / 飞书文档中渲染
每组 10 个色阶，从浅到深，编号 1-10，编号越大颜色越深
编号 6 为主色（基色），编号 5 为悬浮态，编号 7 为按下态

色卡版本：2026-06-19 | 来源：Ant Design 官方色彩规范 | 共计 12 基色 × 10 梯度 = 120 色 + 13 中性色 = 133 色