你是否常常因為如何配色而糾結？

你是否覺得自己調配的色彩是最好的？

你是否也曾為界面色彩的微妙差異而苦惱？

一套優秀的設計系統構建以高效率、一致性為出發點，但唯獨色彩系統的設計長期以來卻像是一場“行為藝術”，一百個設計師基于自己的偏好和理解可以創造出一百個截然不同的方案。隨著無障礙對比度標準的日益普及和相關設計工具的層出不窮，我們也能夠利用一些輔助工具引入到設計流程中，盡可能減少設計師的主觀影響，實踐更加簡潔、純粹和高效的構建方式，由此矯正“行為藝術”。

在保證產品色彩可用性、一致性的基礎上，為了提效率、低成本地解決現有色彩問題，我們在暗黑模式色板適配和AI生成色彩方面進行了探索，希望為其他產品的色彩設計也提供思路。

一、AI 輔助決策：產品交易色的探索

1. 為什么使用 AI ？

AI可以在幾秒鐘內生成多個配色方案或快速分析數據（包括顏色趨勢等）從而迅速生成符合要求的色板，而手動選擇、調整和搭配顏色可能需要花費數小時甚至數天。在需要保持項目視覺一致性的情況下，AI可以盡可能確保每次生成的色板都符合既定的色彩規范和標準，減少人為誤差。已有一些成功的商業產品和平臺，如Adobe Color等，提供了基于AI的色板生成工具，證明了該技術在商業上的可行性和潛力。

或許有人有提出疑問，AI 生成的顏色真的可用嗎？亦或是使用自動生成配色難道不是對設計的不重視嗎？到底是工具更專業還是人不夠專業？在我的理解看來，AI 工具在這里的作用并非直接提供一套詳盡無疑的色彩體系，而是輸出一些可以借鑒參考的方案。即便你不是垂直專業的品牌設計師、亦或是美學造詣尚淺，也能輕松將這些建議中的色彩方案融入項目中，先行試探其適配度，隨后再根據實際情況手動微調/重新生成，最后基于色彩感情、業務語義等靈活調整出最合適的色彩。如此一來，在保證可用性和統一性的基礎上也提高了效率。

?AI 生成

根據實際情況微調/重新生成基于色彩情感、業務語義篩選/調整出最合適的 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. 實踐探索

定義背景色

確保文字清晰可見構建深色色板在不同環境/場景測試界面

① 定義背景色

探索

深色模式并不是簡單的把整個界面反色了那么簡單，還是要考慮到所有用戶的需求。臨界作為創作社區類 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

---