2023-12-6 周周
大概每一位 B 端设计师在做组件设计时，都会对色板印象深刻，同时也会有不少的疑问：
经常看我文章的朋友对于“基础组件”和“业务组件”的区别应该耳熟能详了。
对于相对底层的、开源的、通用的基础组件库来说，批量生产多种颜色的色板成本相对较低、准确性也更高，且可以满足中后台设计中的开发者和设计者对于颜色的大部分使用需求。例如基础组件库 Ant Design、Arco Design 都提供了相对全面和丰富的平台系统级别的色彩体系，包括 10+ 颜色的基础色板、中性色板和功能色板：
Ant Design 的基础色板（部分）、中性色板和功能色板
而对于更具备专业性和业务属性的、高级的业务组件来说，色板的搭建则是围绕着产品和业务的品牌色来完成。设计师不需要在一开始搭建业务组件库时就产出十几种不同颜色的色板，可以先做出业务必用的品牌色板、中性色板和功能色板，之后在设计需求中，再基于品牌色进一步定义符合产品调性以及功能诉求的辅助色板：
某产品的品牌色色板、中性色板和功能色板
色板和其梯度色阶的作用如下：
1. 操作状态，有效反馈。
色阶中的颜色可以用在页面模块的层级、组件操作的状态上，颜色上的微妙变化可以为用户提供有效的交互反馈：
按钮不同状态的颜色，可以从色阶中选择
2. 全局托底，以防万一
即使是视觉表现力相对较弱的 B 端产品，也会有多种颜色使用的需求，比如 Tag 标签、插画、营销海报等等。为了使产品的视觉元素更具备一致性，设计师可以借鉴通用组件库的基础色板，并结合自己产品的品牌色板制定产品的辅助色，最大限度的保证配色的合理性和用色的一致性：
Ant Design 预设的 Tag 类型和颜色，也支持按需定制
3. 纵向推衍，确保精确
色阶的每一阶颜色都是由相邻阶层的颜色通过色值的计算推演得到的。一个色板中的色阶数量越多，渐变关系就会越精确和微妙，颜色的精确度也会越高。为了方便使用，通常一个色板做 1015 级的色阶即可：
Arco Design 的基础色板，从颜色的 HSB 值中可以看出色阶中的颜色存在一些数值规律。
4. 横向比较，层级一致
假设我们将每一个色板都做了 10 级色阶，这样就可以保证不同的颜色在同一层色阶层级上的明度、纯度和饱和度相对一致。比如下图中：第 6 级的红色（Red 60）和第 6 级蓝色（Blue 60）就都是这两个色板中的主色，都可以用于按钮的默认状态；而第 3 级的红色（Red 30）和第 3 级的蓝色（Blue 30）就都可以用于按钮的禁用状态：
产品中颜色是会传递信息语义和内容层级的，这样使用色阶来规范颜色的选择，可以保证同一个或同一类信息层级上的色彩搭配是相对协调和合理的。
很多同学都想了解组件系统中的色板的计算和推演方式，其实色板是由设计师和前端统一协作完成的，设计师提供色彩学的理论基础，前端开发完成算法推演。色板的演算方式并不简单，给大家推荐几个色板使用或生成工具 ，可以省去推演过程和时间：
1. Ant Design：Sketch 插件 Kitchen
网站链接：https://kitchen.alipay.com/
优势：在最新版的 Kitchen 色板中可以直接选择和填充颜色，支持一键将 AntD 的基础色板导入至本地文件色板或者创建本地样式：
不足：
2. Material Design：Figma 插件 Material Theme Builder
网站链接：https://goo.gle/m3designkit
优势：可以选择你想要的任何一种颜色，插件会帮你计算并生成整套衍生色板，同时还会检验出不符合 WCAG 规则的主题色，并直接利用系统算法帮你做优化：
不足：
3. Acro Design：色彩配置工具网站
Arco Color Palette
网站链接：https://arco.design/palette/list
优势：提供了 13 个基础主色色板，设计师可以自行调整这些主色，定制新的色板及色阶；同时提供 WCAG 色彩标准检测工具，可以对色彩的应用和搭配做全方位的检测：
不足：暂时没有提供插件，只支持导出 json 和 less 格式。
文章来源：优设网 作者：Ant Design 元尧
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、用户体验公司、软件界面设计公司、软件qt开发、软件wpf开发、软件vue开发。
