人工智能配色系列（一）方案與規則

前言

隨着人工智能時代的到來，科技展開了與藝術的博弈。某寶的人工智能產品設計的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着色等部分，敬請期待。