前言
隨著人工智慧時代的到來，科技展開了與藝術的博弈。某寶的人工智慧產品設計的Banner已然霸屏“雙十一”。由機器智慧設計Banner以應用在電商類專案中，確能大大減少人力資源的投入。同時機器自動設計並生成Banner將為其個性化提供了可能，能夠實現千人千面的效果。
在人工智慧生成Banner的諸多環節中，智慧配色是難點之一。首先，配色對設計品的辨識度和表現力有著非常大的影響，配色結果是否符合審美標準更是一目瞭然。其次，人工配色具有較強藝術性和一定程度的經驗積累，是Banner設計中相對耗時耗力的環節，使用機器還原設計思路，甚至對同一Banner提供多套配色方案尤為挑戰。
本系列文章將討論Banner智慧配色的解決方案。本文重點介紹方案框架以及其中配色規則的設計過程。
方案：調色盤與規則
元素分層
分層是設計中的重要概念，對層次進行劃分有利於清晰地展現和定位問題。以鵝漫優品商品中的 Banner 為例。通過對其中的元素進行分層處理，得到上圖。如圖所示從下至上，Banner 的層次為：
- 背景層：指最底層的純色背景，通常與商品或IP主色相同或相似。
- 背景紋理層：指修飾背景的紋理，該紋理通常與背景較接近。
- 背景修飾層：指活躍背景氛圍的，通常背景修飾層的顏色相近。
- IP 層：指 IP 形象圖。
- 前景修飾層：由於 IP 形象面積較大，前景修飾用於分割區域，並部分遮擋 IP，以便突出的商品及文字。前景修飾層，不在本文討論。
- 商品修飾層：指背後的修飾圖，用於突出商品。
- 商品：指商品圖。
- 文字：指標題等文字。
基於分層，我們可以定位問題為：基於商品或IP圖，為各層進行配色。本文重點探討以背景層、背景紋理層和背景修飾層三層為例的配色方案。更多層次實質亦然。
在構建方案時，存在兩種方案，即使用調色盤或使用配色規則。
調色盤
如今，網際網路中存在著海量的調色盤。如在設計師的常用網站 Dribble 中，每個被上傳的設計作品，都會被自動提取並生成調色盤（Color Palette）。將這些調色盤用於 Banner 配色或為簡潔有效的解決方案：
- 在提取商品代表色後，通過商品代表色與現有調色盤庫（抓取自 Dribble）中的色彩比對，找到對應的色盤。
- Dribble 中的調色盤會按照色彩的面積依次排序。在調色盤使用時，忽略白色和黑色（以及近似白色、黑色）後，依次使用顏色由下層至上層著色至 Banner 上。
上圖為使用Dribble中某作品的調色盤，經過上述過程得到的配色方案，配色的效果差強人意，如這幅作品搬透露著詭異與迷惑。其問題可以歸結為以下兩點：
- 未梳理調色盤上的顏色間內在關係，僅通過面積排序。
- 以面積大小作為調色盤顏色與 Banner 元素的對映關係過於簡單粗暴。
機器學習的暴力計算或許是人類面對自我無法掌控的詭異關係時的一條救贖之路。雖然通過機器學習，或能擬合上述關係，但訓練海量樣本的成本卻令人望而卻步。“以暴制暴”並不適用於“文藝”的智慧設計機器人。暴力解決只會因為對問題的輕視使其更加複雜。問題的本質不僅僅是找到合適的色彩搭配，而是找到元素層之間的的搭配規律。
配色規則
使用建立於色彩搭配關係的配色規則，可以避免以上的問題。說到色彩搭配關係，不得不提到 Google 在 Android Material Design 中提供的 Palette 類庫。該類庫的作用是可以從影像中提取一組顏色，以用於介面元素中，營造沉浸感的介面。如下圖音樂軟體介面中皮膚色與其相似的控制條色及與其具有高對比的按鈕色均通過專輯封面動態提取。
這組由 Palette類庫提取的顏色分為鮮活（Vibrant）、深色鮮活、淺色鮮活、暗沉（Muted）、深色暗沉、淺色暗沉六種型別。可以按照規律來為介面設定顏色，如：深色暗沉作為皮膚色、暗沉作為控制條色、鮮活為按鈕色。進而提供了合理搭配。同時深色與淺色提供了合理的對比度通常用於背景和文字。該類庫的JS實現為Vibrant.js。通過分析其原始碼，會發現其中對影像中顏色進行一定規則的分類及轉換。這證明了通過規則轉換顏色，並且應用於多種商品或IP影像具有可行性。
通過Vibrant.js中內建的一條規則，可以得到一組配色方案。如果有多條合理的規則，對每一種商品或IP圖案則可以生成多條方案。通過建立規則庫能夠豐富結果的多樣性。
對比使用調色盤，可以得出以下結論：
| 調色盤 | 配色規則 | |
| 對映關係 | 通過“面積”確定關係 | 由各層次元素的關係分析得出 |
| 獲取來源 | 網路中的調色盤無法直接使用 | 由專家（設計師）設計規則 |
| 複用性 | 調色盤不可複用 | 配色規則可以複用 |
由此可見，使用配色規則：基於元素的層次關係，可以使結果穩定安全；獲取規則的來源除由專家建立外，亦可以通過層次關係於網路中轉化；同時一條規則可以複用在各種商品或IP圖案的情況下，較少的配色規則就可以支援大部分Banner需求。
系統框架
基於上述分析，可建立基於配色規則的，具有較高擴充性的系統框架。如下圖所示，橫向為智慧配色主流程，其他為輔助流程。
該方案主要由四部分構成，即影像取色、規則選擇、方案生成及顏色替換：
- 影像取色：對 Banner 圖主體圖案（如：商品圖、IP形象圖等）量化並提取代表色。影像主題色提取有多種方法，如基於量化演算法的中位切分法（Median Cut）、八叉樹法（Octree）等；基於聚類的K-Means 方法等。上文中提到的Vibrant.js基於量化演算法，亦可用於影像取色。
- 規則選擇：由AI根據代表色、風格自動挑選合適的規則。雖然配色規則具有一定的通用性，但針對不同的色彩依然有優劣之分。不同的配色規則更是產生不同的配色風格。通過對商品代表色、風格和基於配色規則的結果進行評分與訓練，得到不同顏色、風格對應的最佳規則。該訓練除了通過人工訓練，亦可通過Banner在實際使用中的點選量作為反饋進行訓練。
- 方案生成：方案生成是該系統中的核心部分。建立有效的配色規則，並生成合理的配色方案將直接決定結果的效果。
- 顏色替換：按照配色方案中的顏色與Banner中元素的對應關係，對Banner中的元素進行顏色替換，進而完成配色。顏色替換與素材有關，SVG等形式的素材，支援色彩的直接替換。如為PNG等格式的素材，則需採用canvas遍歷畫素替換的方式。
規則庫為該系統提供了良好的擴充套件性。下文主要討論本方案系統架構中的關鍵部分：方案生成。
色彩：方案生成
方案生成是智慧配色系統的核心。其中有兩個重點，即顏色模型的選擇和基於顏色模型的規則。
顏色模型
在日常的設計及UI開發中，十六進位制色值（Hex）是我們常用的表示顏色的方法。十六進位制色值實則是RGB模型的一種表達形式。雖然使用Hex非常方便，但學術範的 RGB 模型在設計配色時卻格格不入。RGB 基於色光混合原理設計，用紅、綠、藍光強弱的疊加描述顏色，雖然符合視錐細胞的感色原理和顯示器的顯色原理，是機器的最愛，卻違揹人類的知覺，讓人無力使用。
對比 HSL 模型，則通過色相、飽和度及亮度為分量表示顏色則易於描述，使根據感知調配顏色成為可能，挽回了人類的尊嚴。
值得一提的是，HSL 擁有一位雙生兄弟 HSB（亦稱為 HSV）霸佔了 Photoshop 等主流設計軟體的調色器，更為設計師熟悉，然而其性格叛逆。相較於HSL符合其確切定義，HSB中的飽和度為0%時，應為等深的灰色，卻為白色；其亮度為100%時，應為純白色，卻為顏色本身。這種調整在設計軟體中雖然簡化了設計師選擇顏色介面的面積，卻不符合分量的定義，亦引起歧義，且不利於規則計算，故未被專案使用。
鑑於 HSL 定義標準（受W3C標準支援）且以色相、飽和度、亮度為分量，易於構建配色規則。故選擇以HSL為顏色模型構建規則。這樣任何一個顏色C，可以轉化為由（H，S，L）三個分量構成的陣列。通過分量建立配色規則，以應用於其他顏色。
配色規則
通過 HSL 可以使用人類的直覺來描述顏色，並挖掘其中的配色規律，繼而形成配色規則。
事實上在設計領域中，逐漸形成了一系列的配色方法，以及帶有鮮明特色的配色規律。可以將這些方法和規律通過 HSL 模型，轉化為規則，進而形成倉庫。
以HSL模型中的H分量色相為例。基於色相，設計領域可以根據色相環（以環狀表示色相）進行配色，並擁有一系列規律。如常見的配色方法：
- 單色配色：設計的時候只使用一種色彩，或者使用某一色調的深色和淺色。
- 類似色配色：使用色輪中彼此相鄰的三種色彩來作為配色方案。
- 互補色配色：使用色輪上相對位置的兩種色彩來進行搭配。
- 三色配色：使用色輪上互呈120度角度的三種色彩搭配。
由此可見，設計師在配色時，是通過旋轉色相環角度的方法找到合適的顏色，並且該旋轉角度存在著既定的規律，並可以複用。鑑於此原理，我們可以構建以下的規則：
設計師在以黃色（C1）作為代表色時，通過對其分量（H1，S1，L1）進行旋轉和變化，形成了適用於不同層的一組顏色淺黃C11（H11，S11，L11），淺橙C12（H12，S12，L12），橙C13（H13，S13，L13）。
將之間的變化量記錄下來形成規則：（ΔH11，ΔS11，ΔL11），（ΔH12，ΔS12，ΔL12），（ΔH13，ΔS13，ΔL13）；其中：ΔH11=H11-H1，其他以此類推。
當新的商品或IP需要生成Banner配色時，如：遇到以綠色（C2）作為代表色的商品，則可以通過對其分量（H2，S2，L2）做相同的變化，以得到顏色：綠C21（H21，S21，L21），淺綠C22（H22，S22，L22），黃C23（H23，S23，L23）。其中：H21 = H2 + ΔH11，其他以此類推。
這樣構成了基於分量變化的配色規則。
然而，在實踐過程中發現，存在色值溢位的情況。即H的數值範圍為0°~360°，S與L的數值範圍為0°~100°。因同一規則使用在不同顏色中，如使用亮度飽和度比較適中的色彩進行規則建立，卻用於亮度與飽和度較高或較低的顏色，色值便會溢位，故溢位現象比較常見。如下圖所示，根據紫色建立的配色規則，當使用粉黃色時，其亮度與飽和度在不同分層上均出現了溢位的狀況，以至於規則無法使用。
經過實際效果的比對和與設計師的合作，針對溢位情況，對規則做如下處理：
- 色相：由於色相是環狀關係，故超出360°或少於0°的情況可以根據圓形計算其實際度數，如370°實為10°，-10°實為350°。
- 飽和度與亮度：經過實際比對與設計師經驗發現，配色的色彩豐富由色相決定，偏轉色相符合設計規律。而飽和度與亮度，在設計時通常用於調整不同色相間產生的差異，或營造氛圍。應記錄飽和度與亮度的數值，直接調整至該數值，而非記錄變化值。
經過調整後，配色規則最終為：（ΔH11，S11，L11），（ΔH12，S12，L12），（ΔH13，S13，L13）；當其他顏色如C2作為代表色時，通過計算H和將S、L直接調整至對應值，得出：C21（H21，S11，L11），C22（H22，S12，L12），C23（H23，S13，L13），其中：H21 = H2 + ΔH11，其他以此類推。
經過調整，如上圖所示，粉色可以通過規則形成較好的配色結果。由此構建了比較健全的配色規則。進而可以由設計師建立規則庫。
模型調整
在實際實施過程中，經過一系列對比，HSL模型中存在著的瑕疵逐漸浮現出來。
如左圖所示，在固定色相與亮度的情況下，對等分的12個色相進行最佳相似色色相旋轉角度偏移值的探索。經對比發現，其旋轉角度出現抖動，說明同一條旋轉角度的規則，不能廣泛應用於其他色相。
右圖則為固定色相與飽和度，只調節亮度，找到最佳搭配的相同色相不同深淺的兩個顏色。如針對紅色，當背景色亮度為60%時，紋理色為48%時，最為舒適。兩種亮度的關係也出現了抖動，並非固定為同一值。說明相同的亮度設定，亦不能廣泛應用於其他色相。
追其原因，是因為HSL中的色值依然不夠“人性化”。觀其色相，在肉眼的感知上，並非一致。如下圖將色輪展開，觀察右側HSL色輪，黃色區域非常明亮，而藍紫區域則非常暗。即便通過對亮度排序，依然存在其他的肉眼感知問題，導致規律難尋。這減少了規則的可複用性，同一風格，需建立多條規則以滿足不同狀況。
通過對解決方案的探索，我們發現了L*C*h模型，該模型由光色科學領域的權威機構，國際照明委員會（CIE）提出。L*C*h 模型與肉眼如何感知色彩具有良好的相關性，整消除了肉眼感知的不一致。如上圖左側所示，L*C*h在飽和度為100%，亮度為60%的情況下，相較於HSL模型更加的融合一致。而且相較於相同出身的 L*a*b 模型有著與 HSL 模型相同的表達模式，即以修正過的色相、飽和度、亮度為分量。故可以通過使用L*C*h模型替代或補充HSL模型，以提高配色規則的廣泛試用性。
其他
前文中步驟，需要進行色值轉化。色值轉化部分需要支援 HEX、RGB、HSL、L*C*h 之間的轉化。採用Chroma.js可以方便的實現上述轉換。
基於以上規則，由設計師生成少量的規則，存入規則庫，即可實現對Banner配色的支援。同時，豐富更多的規則，形成更多風格的規則，將大大提升配色結果的多樣性。
結語
自動生成Banner，智慧配色是其中不可或缺的部分。本文闡述了基於配色規則生成配色方案的方法。一切才剛剛開始，後續會陸續推出顏色提取、基於AI的智慧規則選擇、Banner著色等部分，敬請期待。