别再手动了！教你借助AI快速生成全套UI色板！

你是否常常因为如何配色而纠结？

你是否觉得自己调配的色彩是最好的？

你是否也曾为界面色彩的微妙差异而苦恼？

一套优秀的设计系统构建以高效率、一致性为出发点，但唯独色彩系统的设计长期以来却像是一场“行为艺术”，一百个设计师基于自己的偏好和理解可以创造出一百个截然不同的方案。随着无障碍对比度标准的日益普及和相关设计工具的层出不穷，我们也能够利用一些辅助工具引入到设计流程中，尽可能减少设计师的主观影响，实践更加简洁、纯粹和高效的构建方式，由此矫正“行为艺术”。

在保证产品色彩可用性、一致性的基础上，为了提效率、低成本地解决现有色彩问题，我们在暗黑模式色板适配和AI生成色彩方面进行了探索，希望为其他产品的色彩设计也提供思路。

一、AI 辅助决策：产品交易色的探索

1. 为什么使用 AI ？

1. AI可以在几秒钟内生成多个配色方案或快速分析数据（包括颜色趋势等）从而迅速生成符合要求的色板，而手动选择、调整和搭配颜色可能需要花费数小时甚至数天。
2. 在需要保持项目视觉一致性的情况下，AI可以尽可能确保每次生成的色板都符合既定的色彩规范和标准，减少人为误差。
3. 已有一些成功的商业产品和平台，如Adobe Color等，提供了基于AI的色板生成工具，证明了该技术在商业上的可行性和潜力。

或许有人有提出疑问，AI 生成的颜色真的可用吗？亦或是使用自动生成配色难道不是对设计的不重视吗？到底是工具更专业还是人不够专业？在我的理解看来，AI 工具在这里的作用并非直接提供一套详尽无疑的色彩体系，而是输出一些可以借鉴参考的方案。即便你不是垂直专业的品牌设计师、亦或是美学造诣尚浅，也能轻松将这些建议中的色彩方案融入项目中，先行试探其适配度，随后再根据实际情况手动微调/重新生成，最后基于色彩感情、业务语义等灵活调整出最合适的色彩。如此一来，在保证可用性和统一性的基础上也提高了效率。

?AI 生成

1. 根据实际情况微调/重新生成
2. 基于色彩情感、业务语义筛选/调整出最合适的 Color

（实际情况包括但不限于实际应用在页面上的WCAG 2.1 等级AA、品牌一致性）

2. 工具选择????????

ChatGPT

网址：https://chatgpt.com/

ChatGPT 是人工智能技术驱动的自然语言处理工具，它能够通过学习和理解人类的语言来进行对话，还能根据聊天的上下文进行互动，真正像人类一样来聊天交流，甚至能完成撰写邮件、视频脚本、文案、翻译、代码等任务。支持自然语言交互，可以直接描述需求，非专业人士也可以使用。

虽然 ChatGPT 本身不是专门用于生成色彩的 AI 工具，但基于其自然语言交互能力、创意激发潜力以及其他技术插件的融合能力，设计师和普通用户在寻求AI辅助的配色解决方案的道路上，ChatGPT 提供了新的可能性。

ChatGPT 在解决配色方案道路上提供新的可能

AI Colors

网址：https://aicolors.co

AI Colors 是一款基于人工智能技术的在线免费调色板生成器；它能够帮助用户通过输入关键词或文字描述，快速生成独特且匹配的配色方案。这款工具集浏览、编辑、可视化以及生成独特调色板于一体，支持中文关键词输入，并提供RGB、HEX和HSL等多种颜色代码，方便用户在不同平台和设备上使用。

AI Colors 也是基于 GPT-3.5 创建的智能调色板生成工具，和 GPT 一样拥有强大的自然语言处理能力和深度学习算法支持，它还提供实时预览功能，且可预览应用场景更为广泛，可以给更多需求场景的用户提供参考。

AI Colors 在线上被用户推荐?

Huemint

网址：https://huemint.com/

Huemint 是一款基于人工智能的调色方案生成工具，它利用强大的AI技术和算法支持深度学习和机器视觉技术，能够深入理解用户输入的参考值或图片，生成符合设计理念的配色方案。内置多种AI生成模型，包括Transformer和Diffusion Model，提供更加优质的配色方案。

Huemint 的用户推荐/接受程度可观?

3. 案例分析

AI 生成 ?? 根据实际情况微调/重新生成

分别使用 ChatGPT 、AI Colors 和 Huemint ，基于已有色板的1个或多个颜色生成配色方案，多次尝试生成配色的过程中初步筛选一些颜色，决出几个适配的橙色再做进一步选择。最终分别筛选出#FF8C42、#FFA500、#F0694B。

基于色彩情感、业务语义筛选/调整出最合适的 Color

三色放在界面上肉眼看起来还行的情况下，结合色彩情感、业务语义等对比调整之后，最终选定交易色。

选择的颜色除了需要考虑在不同场景页面上都能保持良好的视觉效果外，通过观察用户对颜色的反馈，可以更准确的判断所选颜色是否为最佳选择。

二、灵活借鉴大厂经验，快速适配深色模式

1. 大厂调研

iOS

iOS 深色模式中界面的层级关系遵循：离用户更近的部分颜色会更亮一些。背景色会随着界面层级变化，而变成提亮色，从 HSB 角度看，即通过调整颜色的明度、饱和度，来区分视觉层级。iOS 通过这种背景色统一升级的处理方式来达到多任务窗口叠加的视觉隔离效果，但相对的开发成本也较高。

iOS 系统彩色方案是在浅色色板基础上进行感官微调，单独订制。

AndROId

Android 把页面分为从“0dp”到“24dp”的 10 个不同高度的显示层级，通过在同一背景色上叠加不同透明度的白色来区分显示层级。相对于 iOS 的整体背景色升级，Android 的背景色分级逻辑则更加的简单易用。

Android 官方建议在深色主题中使用较浅的色调（200-50），而不使用默认的主题颜色（饱和色调范围为 900-500）。

Ant Design

Ant Design 在实际应用中，可根据自身业务的需求，从中性色板中直接选用或是依据透明度的思路自定义出合适的中性色彩。

对于暗黑模式的色板，Ant Design借助对比度正/负极性的概念对透明度进行转换；通过对比一套颜色的正负极性变化趋势来找到转换规律。

2. 实践探索

定义背景色

1. 确保文字清晰可见
2. 构建深色色板
3. 在不同环境/场景测试界面

① 定义背景色

探索

深色模式并不是简单的把整个界面反色了那么简单，还是要考虑到所有用户的需求。临界作为创作社区类 App 用户在夜间使用的场景有一定的占比。深色模式不仅要在日间满足使用需求，还要保证夜间的视觉刺激相对柔和。所以，排除对比度极高的纯黑背景。

临界的图文较多，无色相背景能够最大限度地减少对视觉的干扰，使观众或读者更容易将注意力集中在内容本身上，否则过多的色彩可能会分散注意力，影响信息的传达。所以，排除添加色相的背景。

最终确定为下图中框选的方案。

重构

接下来需要对这稿配色的选用进行细致的打磨。

临界浅色模式主要是遵循Android规范中通过控制Z轴高度和阴影来区分层级，同时为了保证深色与浅色的信息层级一致，便于用户操作，采用在纯黑（#000000）上叠加有透明度的白色作为深色模式的基础背景色，通过在同一纯黑上叠加不同透明度的白色来区分显示层级。

最终方案叠加白色的透明度方面进行了统一，对透明度的递增梯度统一为 4，与 white_01 ～ white_04 的透明度白色保持一致。对比初选方案在视觉上变动也很微弱。

② 确保文字清晰可见

对新的背景色与一二级文字色进行检验，看看是否满足 WCAG 无障碍阅读的 AA 标准，也就是常规尺寸文本对比度高于 4.5 : 1

新背景色与一二级文字色均满足 WCAG 的 AA 标准，则当前文字色与新背景色相适配；当前文字色采用了降低不透明度的方式来进行分级，同样选取 white 色板中的颜色；由此，当前文字色可不做改动。

③ 构建深色色板

采用大厂沉淀方法论?????

基于上文对深色模式适配思路的调研，首先排除 iOS 单独调配时间成本较高的方法；其次，在套用 Android 的思路时，发现这套方法会使颜色明显柔和化，完全执行就容易导致产品在深色模式下产生风格偏移，出现不符合品牌设计语言的情况。so 采用 Ant Design 的方法论，结合透明度规则处理，尽可能保持品牌风格统一。

以 success color 色板应用为例???

确定暗黑模式下的标准色????

由于 Apple 官方对于颜色给出的对比度建议是7:1，对根据 Ant Design 的方法论生成的色板中，对标准色与背景色进行检验，发现部分色彩的对比度没有达到约 7:1 ，且实际运用在页面上显示偏暗；后微调色彩，基于对比度约 7:1 的基础上，经过色彩校正，得到暗黑模式下的标准色。

扩展同色色阶

做梯度色板的方法一般是透明叠色法、贝塞尔曲线法等，现如今各类色阶制作插件或软件层出不穷，利用插件生成梯度色板更准确便捷，也不失为一种提高效率的好路子。对受欢迎程度较高的几个插件进行了尝试，最终选择使用 Supa Palette 来制作色阶。

结语?

构建色彩体系之初，我们常凭直觉迅速行动，任由主观情感引领色彩选择。初期或许顺畅无阻，但随着产品规模扩张与演进，色彩管理渐显纷乱。如今 AI 在色彩设计领域的潜力无限，它超越了技术的简单优化与拓展，正深刻重塑色彩管理的精细度与设计流程的智能化。灵活掌握并运用现有技术与工具，让色彩真正服务于设计，简化团队协作流程，无疑将为设计师与用户共同开启更加愉悦的体验之旅～

作者：Echo Design