设计师专属
安装 Kitchen Sketch 插件 ，不但可以使用 Ant Design 官方色板库，还可以管理自己的专属色板。
色彩模型
Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计，该模型更便于设计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。
系统级色彩体系
Ant Design 系统级色彩体系同样源于「自然」的设计价值观。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。
基础色板
Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。
Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序员的精心调制，结合了色彩自然变化的规律，我们得出了一套色彩生成工具，当有进一步色彩设计需求时，设计者只需按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色。
Ant Design 三代色板的历史可以参看社区文章：Ant Design 色板生成算法演进之路。
中性色板
中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理地选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 13 个颜色。
数据可视化色板
数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 「有效、清晰、准确、美」的原则产生的。查看色板
色板生成工具
如果上面的色板不能满足你的需求，你可以选择一个主色，Ant Design 的色彩生成算法会为你生成完整的色板。
Dust Red / 薄暮斗志、奔放
red-1#fff1f0
red-2#ffccc7
red-3#ffa39e
red-4#ff7875
red-5#ff4d4f
red-6#f5222d
red-7#cf1322
red-8#a8071a
red-9#820014
red-10#5c0011
Volcano / 火山醒目、澎湃
volcano-1#fff2e8
volcano-2#ffd8bf
volcano-3#ffbb96
volcano-4#ff9c6e
volcano-5#ff7a45
volcano-6#fa541c
volcano-7#d4380d
volcano-8#ad2102
volcano-9#871400
volcano-10#610b00
Sunset Orange / 日暮温暖、欢快
orange-1#fff7e6
orange-2#ffe7ba
orange-3#ffd591
orange-4#ffc069
orange-5#ffa940
orange-6#fa8c16
orange-7#d46b08
orange-8#ad4e00
orange-9#873800
orange-10#612500
Calendula Gold / 金盏花活力、积极
gold-1#fffbe6
gold-2#fff1b8
gold-3#ffe58f
gold-4#ffd666
gold-5#ffc53d
gold-6#faad14
gold-7#d48806
gold-8#ad6800
gold-9#874d00
gold-10#613400
Sunrise Yellow / 日出出生、阳光
yellow-1#feffe6
yellow-2#ffffb8
yellow-3#fffb8f
yellow-4#fff566
yellow-5#ffec3d
yellow-6#fadb14
yellow-7#d4b106
yellow-8#ad8b00
yellow-9#876800
yellow-10#614700
Lime / 青柠自然、生机
lime-1#fcffe6
lime-2#f4ffb8
lime-3#eaff8f
lime-4#d3f261
lime-5#bae637
lime-6#a0d911
lime-7#7cb305
lime-8#5b8c00
lime-9#3f6600
lime-10#254000
Polar Green / 极光绿健康、创新
green-1#f6ffed
green-2#d9f7be
green-3#b7eb8f
green-4#95de64
green-5#73d13d
green-6#52c41a
green-7#389e0d
green-8#237804
green-9#135200
green-10#092b00
Cyan / 明青希望、坚强
cyan-1#e6fffb
cyan-2#b5f5ec
cyan-3#87e8de
cyan-4#5cdbd3
cyan-5#36cfc9
cyan-6#13c2c2
cyan-7#08979c
cyan-8#006d75
cyan-9#00474f
cyan-10#002329
Daybreak Blue / 拂晓蓝包容、科技、普惠
blue-1#e6f4ff
blue-2#bae0ff
blue-3#91caff
blue-4#69b1ff
blue-5#4096ff
blue-6#1677ff
blue-7#0958d9
blue-8#003eb3
blue-9#002c8c
blue-10#001d66
Geek Blue / 极客蓝探索、钻研
geekblue-1#f0f5ff
geekblue-2#d6e4ff
geekblue-3#adc6ff
geekblue-4#85a5ff
geekblue-5#597ef7
geekblue-6#2f54eb
geekblue-7#1d39c4
geekblue-8#10239e
geekblue-9#061178
geekblue-10#030852
Golden Purple / 酱紫优雅、浪漫
purple-1#f9f0ff
purple-2#efdbff
purple-3#d3adf7
purple-4#b37feb
purple-5#9254de
purple-6#722ed1
purple-7#531dab
purple-8#391085
purple-9#22075e
purple-10#120338
Magenta / 法式洋红明快、感性
magenta-1#fff0f6
magenta-2#ffd6e7
magenta-3#ffadd2
magenta-4#ff85c0
magenta-5#f759ab
magenta-6#eb2f96
magenta-7#c41d7f
magenta-8#9e1068
magenta-9#780650
magenta-10#520339
在代码中使用色板
我们为程序员提供了色板的 JavaScript 的使用方式。
npm install @ant-design/colors
import { blue } from '@ant-design/colors';
console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
console.log(blue.primary); // '#1677FF'
更多使用方式：@ant-design/colors
产品级色彩体系
品牌色的应用
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 #1677ff，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
功能色
功能色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。Ant Design 的功能色板如右图：
中性色
Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的，具体色板如右图：
企业级产品设计中的色彩应用
在蚂蚁中后台的设计中，我们对于色彩的态度是克制的。色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率，影响信息的清晰传达的这些原则之上，理性的选择颜色是关键。当然在配图插画以及展示性页面中可以适当打破这一思路。
