你是否常常因為如何配色而糾結(jié)？

你是否覺得自己調(diào)配的色彩是最好的？

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

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

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

一、AI 輔助決策：產(chǎn)品交易色的探索

1. 為什么使用 AI ？

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

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

??AI 生成

1. 根據(jù)實際情況微調(diào)/重新生成
2. 基于色彩情感、業(yè)務(wù)語義篩選/調(diào)整出最合適的 Color

（實際情況包括但不限于實際應(yīng)用在頁面上的WCAG 2.1 等級AA、品牌一致性）

2. 工具選擇????????

ChatGPT

網(wǎng)址：https://chatgpt.com/

ChatGPT 是人工智能技術(shù)驅(qū)動的自然語言處理工具，它能夠通過學(xué)習(xí)和理解人類的語言來進(jìn)行對話，還能根據(jù)聊天的上下文進(jìn)行互動，真正像人類一樣來聊天交流，甚至能完成撰寫郵件、視頻腳本、文案、翻譯、代碼等任務(wù)。支持自然語言交互，可以直接描述需求，非專業(yè)人士也可以使用。

雖然 ChatGPT 本身不是專門用于生成色彩的 AI 工具，但基于其自然語言交互能力、創(chuàng)意激發(fā)潛力以及其他技術(shù)插件的融合能力，設(shè)計師和普通用戶在尋求AI輔助的配色解決方案的道路上，ChatGPT 提供了新的可能性。

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

AI Colors

網(wǎng)址：https://aicolors.co

AI Colors 是一款基于人工智能技術(shù)的在線免費調(diào)色板生成器；它能夠幫助用戶通過輸入關(guān)鍵詞或文字描述，快速生成獨特且匹配的配色方案。這款工具集瀏覽、編輯、可視化以及生成獨特調(diào)色板于一體，支持中文關(guān)鍵詞輸入，并提供RGB、HEX和HSL等多種顏色代碼，方便用戶在不同平臺和設(shè)備上使用。

AI Colors 也是基于 GPT-3.5 創(chuàng)建的智能調(diào)色板生成工具，和 GPT 一樣擁有強(qiáng)大的自然語言處理能力和深度學(xué)習(xí)算法支持，它還提供實時預(yù)覽功能，且可預(yù)覽應(yīng)用場景更為廣泛，可以給更多需求場景的用戶提供參考。

AI Colors 在線上被用戶推薦?

Huemint

網(wǎng)址：https://huemint.com/

Huemint 是一款基于人工智能的調(diào)色方案生成工具，它利用強(qiáng)大的AI技術(shù)和算法支持深度學(xué)習(xí)和機(jī)器視覺技術(shù)，能夠深入理解用戶輸入的參考值或圖片，生成符合設(shè)計理念的配色方案。內(nèi)置多種AI生成模型，包括Transformer和Diffusion Model，提供更加優(yōu)質(zhì)的配色方案。

Huemint 的用戶推薦/接受程度可觀?

3. 案例分析

AI 生成 ?? 根據(jù)實際情況微調(diào)/重新生成

分別使用 ChatGPT 、AI Colors 和 Huemint ，基于已有色板的1個或多個顏色生成配色方案，多次嘗試生成配色的過程中初步篩選一些顏色，決出幾個適配的橙色再做進(jìn)一步選擇。最終分別篩選出#FF8C42、#FFA500、#F0694B。

基于色彩情感、業(yè)務(wù)語義篩選/調(diào)整出最合適的 Color

三色放在界面上肉眼看起來還行的情況下，結(jié)合色彩情感、業(yè)務(wù)語義等對比調(diào)整之后，最終選定交易色。

選擇的顏色除了需要考慮在不同場景頁面上都能保持良好的視覺效果外，通過觀察用戶對顏色的反饋，可以更準(zhǔn)確的判斷所選顏色是否為最佳選擇。

二、靈活借鑒大廠經(jīng)驗，快速適配深色模式

1. 大廠調(diào)研

iOS

iOS 深色模式中界面的層級關(guān)系遵循：離用戶更近的部分顏色會更亮一些。背景色會隨著界面層級變化，而變成提亮色，從 HSB 角度看，即通過調(diào)整顏色的明度、飽和度，來區(qū)分視覺層級。iOS 通過這種背景色統(tǒng)一升級的處理方式來達(dá)到多任務(wù)窗口疊加的視覺隔離效果，但相對的開發(fā)成本也較高。

iOS 系統(tǒng)彩色方案是在淺色色板基礎(chǔ)上進(jìn)行感官微調(diào)，單獨訂制。

Android

Android 把頁面分為從“0dp”到“24dp”的 10 個不同高度的顯示層級，通過在同一背景色上疊加不同透明度的白色來區(qū)分顯示層級。相對于 iOS 的整體背景色升級，Android 的背景色分級邏輯則更加的簡單易用。

Android 官方建議在深色主題中使用較淺的色調(diào)（200-50），而不使用默認(rèn)的主題顏色（飽和色調(diào)范圍為 900-500）。

Ant Design

Ant Design 在實際應(yīng)用中，可根據(jù)自身業(yè)務(wù)的需求，從中性色板中直接選用或是依據(jù)透明度的思路自定義出合適的中性色彩。

對于暗黑模式的色板，Ant Design借助對比度正/負(fù)極性的概念對透明度進(jìn)行轉(zhuǎn)換；通過對比一套顏色的正負(fù)極性變化趨勢來找到轉(zhuǎn)換規(guī)律。

2. 實踐探索

定義背景色

1. 確保文字清晰可見
2. 構(gòu)建深色色板
3. 在不同環(huán)境/場景測試界面

① 定義背景色

探索

深色模式并不是簡單的把整個界面反色了那么簡單，還是要考慮到所有用戶的需求。臨界作為創(chuàng)作社區(qū)類 App 用戶在夜間使用的場景有一定的占比。深色模式不僅要在日間滿足使用需求，還要保證夜間的視覺刺激相對柔和。所以，排除對比度極高的純黑背景。

臨界的圖文較多，無色相背景能夠最大限度地減少對視覺的干擾，使觀眾或讀者更容易將注意力集中在內(nèi)容本身上，否則過多的色彩可能會分散注意力，影響信息的傳達(dá)。所以，排除添加色相的背景。

最終確定為下圖中框選的方案。

重構(gòu)

接下來需要對這稿配色的選用進(jìn)行細(xì)致的打磨。

臨界淺色模式主要是遵循Android規(guī)范中通過控制Z軸高度和陰影來區(qū)分層級，同時為了保證深色與淺色的信息層級一致，便于用戶操作，采用在純黑（#000000）上疊加有透明度的白色作為深色模式的基礎(chǔ)背景色，通過在同一純黑上疊加不同透明度的白色來區(qū)分顯示層級。

最終方案疊加白色的透明度方面進(jìn)行了統(tǒng)一，對透明度的遞增梯度統(tǒng)一為 4，與 white_01 ～ white_04 的透明度白色保持一致。對比初選方案在視覺上變動也很微弱。

② 確保文字清晰可見

對新的背景色與一二級文字色進(jìn)行檢驗，看看是否滿足 WCAG 無障礙閱讀的 AA 標(biāo)準(zhǔn)，也就是常規(guī)尺寸文本對比度高于 4.5 : 1

新背景色與一二級文字色均滿足 WCAG 的 AA 標(biāo)準(zhǔn)，則當(dāng)前文字色與新背景色相適配；當(dāng)前文字色采用了降低不透明度的方式來進(jìn)行分級，同樣選取 white 色板中的顏色；由此，當(dāng)前文字色可不做改動。

③ 構(gòu)建深色色板

采用大廠沉淀方法論?????

基于上文對深色模式適配思路的調(diào)研，首先排除 iOS 單獨調(diào)配時間成本較高的方法；其次，在套用 Android 的思路時，發(fā)現(xiàn)這套方法會使顏色明顯柔和化，完全執(zhí)行就容易導(dǎo)致產(chǎn)品在深色模式下產(chǎn)生風(fēng)格偏移，出現(xiàn)不符合品牌設(shè)計語言的情況。so 采用 Ant Design 的方法論，結(jié)合透明度規(guī)則處理，盡可能保持品牌風(fēng)格統(tǒng)一。

以 success color 色板應(yīng)用為例???

確定暗黑模式下的標(biāo)準(zhǔn)色????

由于 Apple 官方對于顏色給出的對比度建議是7:1，對根據(jù) Ant Design 的方法論生成的色板中，對標(biāo)準(zhǔn)色與背景色進(jìn)行檢驗，發(fā)現(xiàn)部分色彩的對比度沒有達(dá)到約 7:1 ，且實際運(yùn)用在頁面上顯示偏暗；后微調(diào)色彩，基于對比度約 7:1 的基礎(chǔ)上，經(jīng)過色彩校正，得到暗黑模式下的標(biāo)準(zhǔn)色。

擴(kuò)展同色色階

做梯度色板的方法一般是透明疊色法、貝塞爾曲線法等，現(xiàn)如今各類色階制作插件或軟件層出不窮，利用插件生成梯度色板更準(zhǔn)確便捷，也不失為一種提高效率的好路子。對受歡迎程度較高的幾個插件進(jìn)行了嘗試，最終選擇使用 Supa Palette 來制作色階。

結(jié)語?

構(gòu)建色彩體系之初，我們常憑直覺迅速行動，任由主觀情感引領(lǐng)色彩選擇。初期或許順暢無阻，但隨著產(chǎn)品規(guī)模擴(kuò)張與演進(jìn)，色彩管理漸顯紛亂。如今 AI 在色彩設(shè)計領(lǐng)域的潛力無限，它超越了技術(shù)的簡單優(yōu)化與拓展，正深刻重塑色彩管理的精細(xì)度與設(shè)計流程的智能化。靈活掌握并運(yùn)用現(xiàn)有技術(shù)與工具，讓色彩真正服務(wù)于設(shè)計，簡化團(tuán)隊協(xié)作流程，無疑將為設(shè)計師與用戶共同開啟更加愉悅的體驗之旅～