如何科学地建立色彩体系？我总结了这5个方面 ！
最近我在想一个问题：假如设计师负责一款全新的何科产品 ，不受已有规范的学地束缚 ，我们该如何定义产品的建立色彩体系呢 ？有些设计师可能会凭自己的主观想法定义色值 ，觉得这个颜色在界面里好看就用了 ，色彩但是体系我觉得这样是不够规范的，更多应该考虑到全局的总结通用性和科学性 。
基于这个问题点 ，个方我网上查看研究了一些资料文章，何科参考了 Ant Design 和 Material Design ，学地学习到了一些定义色彩 ID 的建立理论知识 ，来看看吧 。色彩
色彩
色彩是体系设计系统的重要组成部分 ，可以使用在品牌感、总结信息层级 、个方操作指引 、何科交互反馈的场景 。在细分层面 ，色彩可以分为主色 、辅助色和中性色 。
设计师调整颜色的时候 ，建议使用 HSB 模式 ，调整色彩更直观 ，符合心理预期 ，因为人脑也是通过这个模式来辨别颜色的 。
其中，H 代表色相，S 代表饱和度 ，B 代表亮度 。色相是区别各种不同色彩的标准 ，通过 360°圆形色环来取色，每一度代表一个色相 。饱和度指色彩的纯度 ，饱和度越低 ，越往白色过渡 。亮度指色彩的明亮程度 ，亮度越低 ，越往黑色过渡 。
这是常用软件 HSB 模式调整颜色的截图，帮助大家理解 。
主色
主色一般和产品的品牌色相关联 ，很大程度决定了产品整体的调性和视觉风格，常用于主按钮 、文字高亮 、强调操作等界面场景 。
产品 1.0 版本以上 ，Logo 一般都会有定义好的品牌色 ，界面设计中的主色和品牌色保持一致即可 ，可以传递统一的理念。如果从 0 开始的新产品还没有定义 Logo 和品牌色 ，界面要先设计开发，这时我们可以结合产品行业特性 、产品理念、产品名称 、用户特征等进行思考 ，提取关键字和情绪板 ，从而提取多个色系 ，最终和多角色沟通确定主色系 ，避免后续反复调整的成本 。
确定主色系后，设计师该如何定义具体色值呢？可能大部分设计师都是直接吸取同色系的大厂产品色值 ，再微调下参数做出差异性就确定了 。这确实是一个取巧方法 ，毕竟不容易出错 。但我觉得设计师需要有自己的思考过程 ，所以进行了国内外大厂产品主色的调研分析 ，总结了一些共同点和差异点 。
我发现 Apple 系和国内产品的主色倾向于饱和度和明度较高的颜色 ，基本分布在横竖向三等分的右上角 ，我认为主色取值可以参考这个区域。
看下部分产品字色、按钮色 、深色模式的效果 ，还可以。
而谷歌系 、微软系产品倾向于明度稍低的颜色。从设计层面来看 ，颜色有点暗 、有点脏，不太建议 。
我有点不太理解国外设计师的视觉审美，研究了 WCAG 2.1 无障碍标准后 ，才发现他们在为障碍（色盲）用户着想 ，主色都符合 WCAG 2.1 的 4.5:1 最小对比度（AA 级） 。这个标准涵盖了使 Web 内容更易于访问的各种建议 ，遵循这些准则将使更多残疾人更容易获取网站内容 。从分析的国内产品中 ，我只发现知乎的主色符合这个标准 。
这其实就引发了我们的思考 ，视觉效果和无障碍人群体验 ，哪个更重要呢 ？我觉得两个层面都挺重要的 ，不过在实际场景中，建议设计师更多是结合品牌调性、视觉效果去定义具体色值 ，在美感、可读性 、可用性之间得到平衡 。注意一点 ，明度不宜太低，颜色会比较脏 ，也不太符合年轻用户的审美 。
如果我负责一款产品，已经确定蓝色系为主色 ，我会选择明亮一点的色值 ，在文字 、按钮 、深色模式等常用场景下保证可读性和可用性 。色值定为#247FFF ，后面讲辅助色的时候会用到 。
辅助色
辅助色 ，可以用于特定功能 、状态反馈 、应用图标等场景 ，反馈的成功 、失败 、警告状态最常用到了 。
基于主色 ，我们怎么定义辅助色呢 ？我总结了点小方法 。
1. 以主色的色相为基础 ，差值为 15° ，围绕 360°色环提取 24 色 。（差值 15°的颜色属于同类色临界点 ，有利于我们划分色度层级 ，又不会失去想要的色系）
2. 参考常用配色理论：相似色 、邻近色 、三分色 、互补色 ，得出部分色值 。
3. 结合界面场景和使用效果，对颜色进行删减和补充，最终确定所需要的辅助色 。（建议最多 12 种 ，避免色彩太多 ，不利于设计师理解使用）
4 、将辅助色和主色对比 ，进行视觉感官明度校正 。（虽然色彩的饱和度和明度一样 ，但不同色相的视觉感官明度是不一样的 ，绿色 、黄色 、青色实际看起来特别浅 ，所以我们要手动调整）
校准方式 ：在颜色上面叠加纯黑色图层 ，图层模式选择色相 ，就可以直观地看到无彩色视觉感官明度。相差大的颜色可以以 5 为差值调整饱和度或明度 ，最后再根据效果进行微调。（色相的差值能被 5 整除，饱和度和明度同样适用）
调色板
为了满足界面对色彩的需求 ，需要对主色和辅助色进行色板延伸 ，建立不同梯度的调色板 。
这里有两种计算方法 ：
1. 浅色调色板 ，在颜色上依次叠加 20% 、40%、60% 、80% 、90%不透明度的白色；深色调色板 ，在颜色上依次叠加 20%、40%、60% 、80%不透明度的黑色 。
2. 浅色调色板 ，色相（H）往感光明度高的色相依次差值 2 ，饱和度（S）依次减少 15 ，明度（B）依次增加 5；深色调色板 ，色相（H）往感光明度低的色相依次差值 2 ，明度（B）依次减少 15 ，饱和度（S）依次增加 5 。（Ant Design 和 Material Design 调色板也都加了色相旋转） 。
从对比效果来看，比较建议使用第 2 种方法 ，使用 HSB 模式的值进行递减/递增得到完整渐变色板 ，颜色更加明亮通透。Ant Design 官网也有在线生成调色板功能 ，和第二种方法逻辑类似，可以快速生成 ，大家可以去使用。
最终生成主色和辅助色的调色板 ，效果如下。
中性色
中性色包含黑 、白 、灰 ，合理地使用中性色能够使界面信息层级主次分明 ，助力于浏览体验 ，常用于字色、控件色 、背景色的场景 。
由于纯灰色显得比较脏 ，人眼对偏蓝的灰色阅读体验更好 ，在桌面端更建议使用灰色相加点蓝 。
计算方法 ：
1. 选择和主色视觉感官明度相同的灰色 ，按调色板方法建立梯度色板 。
2. 将蓝色调色板不透明度调为 10% ，灰色调色板不透明度调为 90% ，两个色板叠加 ，最后吸取颜色 ，再加入黑白两个色板，就确定了从白到黑的 12 种颜色。
最终 ，我们就确定了一款产品的色彩体系 ，界面中使用的颜色需要遵循调色板色值，一致性设计 。
总结
以上就是设计系统中建立色彩体系的思考总结 。设计师调整颜色时，建议使用 HSB 模式 ，调整色彩更直观，符合心理预期 。主色需要结合品牌调性 、视觉效果定义具体 ID 色值 ，在美感 、可读性 、可用性之间得到平衡。注意 ，明度不宜太低，颜色会比较脏 。辅助色 、调色板、中性色定义 ID 色值过程中，建议遵循一定的色彩理论准则 ，科学地定义颜色 ，更有说服力。
还有许多不足 ，继续学习去了。
参考文献 ：
- Ant Design 设计系统 – 色彩
- Material Design 设计系统 – 色彩
- Ant Design 色板生成算法演进之路
- Web 内容无障碍指南 (WCAG) 2.1
作者 ：ALEI的设计思考
最近我在想一个问题：假如设计师负责一款全新的何科产品 ，不受已有规范的学地束缚 ，我们该如何定义产品的建立色彩体系呢 ？有些设计师可能会凭自己的主观想法定义色值 ，觉得这个颜色在界面里好看就用了 ，色彩但是体系我觉得这样是不够规范的，更多应该考虑到全局的总结通用性和科学性 。
基于这个问题点 ，个方我网上查看研究了一些资料文章，何科参考了 Ant Design 和 Material Design ，学地学习到了一些定义色彩 ID 的建立理论知识 ，来看看吧 。色彩
色彩
色彩是体系设计系统的重要组成部分 ，可以使用在品牌感、总结信息层级 、个方操作指引 、何科交互反馈的场景 。在细分层面 ，色彩可以分为主色 、辅助色和中性色 。
设计师调整颜色的时候 ，建议使用 HSB 模式 ，调整色彩更直观 ，符合心理预期 ，因为人脑也是通过这个模式来辨别颜色的 。
其中，H 代表色相，S 代表饱和度 ，B 代表亮度 。色相是区别各种不同色彩的标准 ，通过 360°圆形色环来取色，每一度代表一个色相 。饱和度指色彩的纯度 ，饱和度越低 ，越往白色过渡 。亮度指色彩的明亮程度 ，亮度越低 ，越往黑色过渡 。
这是常用软件 HSB 模式调整颜色的截图，帮助大家理解 。
主色
主色一般和产品的品牌色相关联 ，很大程度决定了产品整体的调性和视觉风格，常用于主按钮 、文字高亮 、强调操作等界面场景 。
产品 1.0 版本以上 ，Logo 一般都会有定义好的品牌色 ，界面设计中的主色和品牌色保持一致即可 ，可以传递统一的理念。如果从 0 开始的新产品还没有定义 Logo 和品牌色 ，界面要先设计开发，这时我们可以结合产品行业特性 、产品理念、产品名称 、用户特征等进行思考 ，提取关键字和情绪板 ，从而提取多个色系 ，最终和多角色沟通确定主色系 ，避免后续反复调整的成本 。
确定主色系后，设计师该如何定义具体色值呢？可能大部分设计师都是直接吸取同色系的大厂产品色值 ，再微调下参数做出差异性就确定了 。这确实是一个取巧方法 ，毕竟不容易出错 。但我觉得设计师需要有自己的思考过程 ，所以进行了国内外大厂产品主色的调研分析 ，总结了一些共同点和差异点 。
我发现 Apple 系和国内产品的主色倾向于饱和度和明度较高的颜色 ，基本分布在横竖向三等分的右上角 ，我认为主色取值可以参考这个区域。
看下部分产品字色、按钮色 、深色模式的效果 ，还可以。
而谷歌系 、微软系产品倾向于明度稍低的颜色。从设计层面来看 ，颜色有点暗 、有点脏，不太建议 。
我有点不太理解国外设计师的视觉审美，研究了 WCAG 2.1 无障碍标准后 ，才发现他们在为障碍（色盲）用户着想 ，主色都符合 WCAG 2.1 的 4.5:1 最小对比度（AA 级） 。这个标准涵盖了使 Web 内容更易于访问的各种建议 ，遵循这些准则将使更多残疾人更容易获取网站内容 。从分析的国内产品中 ，我只发现知乎的主色符合这个标准 。
这其实就引发了我们的思考 ，视觉效果和无障碍人群体验 ，哪个更重要呢 ？我觉得两个层面都挺重要的 ，不过在实际场景中，建议设计师更多是结合品牌调性、视觉效果去定义具体色值 ，在美感、可读性 、可用性之间得到平衡 。注意一点 ，明度不宜太低，颜色会比较脏 ，也不太符合年轻用户的审美 。
如果我负责一款产品，已经确定蓝色系为主色 ，我会选择明亮一点的色值 ，在文字 、按钮 、深色模式等常用场景下保证可读性和可用性 。色值定为#247FFF ，后面讲辅助色的时候会用到 。
辅助色
辅助色 ，可以用于特定功能 、状态反馈 、应用图标等场景 ，反馈的成功 、失败 、警告状态最常用到了 。
基于主色 ，我们怎么定义辅助色呢 ？我总结了点小方法 。
1. 以主色的色相为基础 ，差值为 15° ，围绕 360°色环提取 24 色 。（差值 15°的颜色属于同类色临界点 ，有利于我们划分色度层级 ，又不会失去想要的色系）
2. 参考常用配色理论：相似色 、邻近色 、三分色 、互补色 ，得出部分色值 。
3. 结合界面场景和使用效果，对颜色进行删减和补充，最终确定所需要的辅助色 。（建议最多 12 种 ，避免色彩太多 ，不利于设计师理解使用）
4 、将辅助色和主色对比 ，进行视觉感官明度校正 。（虽然色彩的饱和度和明度一样 ，但不同色相的视觉感官明度是不一样的 ，绿色 、黄色 、青色实际看起来特别浅 ，所以我们要手动调整）
校准方式 ：在颜色上面叠加纯黑色图层 ，图层模式选择色相 ，就可以直观地看到无彩色视觉感官明度。相差大的颜色可以以 5 为差值调整饱和度或明度 ，最后再根据效果进行微调。（色相的差值能被 5 整除，饱和度和明度同样适用）
调色板
为了满足界面对色彩的需求 ，需要对主色和辅助色进行色板延伸 ，建立不同梯度的调色板 。
这里有两种计算方法 ：
1. 浅色调色板 ，在颜色上依次叠加 20% 、40%、60% 、80% 、90%不透明度的白色；深色调色板 ，在颜色上依次叠加 20%、40%、60% 、80%不透明度的黑色 。
2. 浅色调色板 ，色相（H）往感光明度高的色相依次差值 2 ，饱和度（S）依次减少 15 ，明度（B）依次增加 5；深色调色板 ，色相（H）往感光明度低的色相依次差值 2 ，明度（B）依次减少 15 ，饱和度（S）依次增加 5 。（Ant Design 和 Material Design 调色板也都加了色相旋转） 。
从对比效果来看，比较建议使用第 2 种方法 ，使用 HSB 模式的值进行递减/递增得到完整渐变色板 ，颜色更加明亮通透。Ant Design 官网也有在线生成调色板功能 ，和第二种方法逻辑类似，可以快速生成 ，大家可以去使用。
最终生成主色和辅助色的调色板 ，效果如下。
中性色
中性色包含黑 、白 、灰 ，合理地使用中性色能够使界面信息层级主次分明 ，助力于浏览体验 ，常用于字色、控件色 、背景色的场景 。
由于纯灰色显得比较脏 ，人眼对偏蓝的灰色阅读体验更好 ，在桌面端更建议使用灰色相加点蓝 。
计算方法 ：
1. 选择和主色视觉感官明度相同的灰色 ，按调色板方法建立梯度色板 。
2. 将蓝色调色板不透明度调为 10% ，灰色调色板不透明度调为 90% ，两个色板叠加 ，最后吸取颜色 ，再加入黑白两个色板，就确定了从白到黑的 12 种颜色。
最终 ，我们就确定了一款产品的色彩体系 ，界面中使用的颜色需要遵循调色板色值，一致性设计 。
总结
以上就是设计系统中建立色彩体系的思考总结 。设计师调整颜色时，建议使用 HSB 模式 ，调整色彩更直观，符合心理预期 。主色需要结合品牌调性 、视觉效果定义具体 ID 色值 ，在美感 、可读性 、可用性之间得到平衡。注意 ，明度不宜太低，颜色会比较脏 。辅助色 、调色板、中性色定义 ID 色值过程中，建议遵循一定的色彩理论准则 ，科学地定义颜色 ，更有说服力。
还有许多不足 ，继续学习去了。
参考文献 ：
- Ant Design 设计系统 – 色彩
- Material Design 设计系统 – 色彩
- Ant Design 色板生成算法演进之路
- Web 内容无障碍指南 (WCAG) 2.1
作者 ：ALEI的设计思考
