
Khroma 是一款 AI 驅動色彩工具,由布魯克林設計師 George Hastings 在 2018 年開發的,透過用戶選擇 50 種喜好的顏色來訓練神經網絡,來生成無限的個性化色彩組合。提供包括 WCAG 無障礙評級、十六進制代碼、RGB 值和 CSS 代碼等詳細資訊,給予設計師、UI/UX 設計人員和品牌策略師的色彩搭配工具。
從手工調色板到 AI 智能化
Khroma 起源於創始人 George Hastings 當時是一位有 13 年以上資歷的數位設計師,曾在 IDEO、Attune Insurance 等知名設計機構工作過。他對設計系統、交互設計和前端開發的深入理解使他能夠將這一遠大想法轉化為現實。他起初為設計項目找到完美的配色方案,發現了由 Tobias Van Schneider 於 2012 年 建置的 Color Claim 網站,收錄了設計師多年來精心製作的 102 種配色方案,並展示了色彩與字體搭配的運用,是一款極具啟發性的配色工具。促使他思考「既然我可以訓練人工智能來無限複製我喜歡的配色方案,為什麼還要費盡心思手工打造配色方案呢? 我能不能訓練一個神經網絡來預測我是否喜歡某種顏色?」對此現有色彩設計工具的不滿,而決定開始試驗和努力,開發一個更加廣泛、更易生成、且能夠無限擴展的色彩工具 Khroma。工具特點
- 神經網絡訓練機制:從用戶選擇 50 種喜歡的顏色,確保了算法不會錯誤地認為用戶不喜歡的顏色。系統使用 Delta E 色彩距離算法 來推斷用戶的偏好,以 5:1 的比例推斷出 9,000 個喜歡和不喜歡的顏色組合。
- 色彩空間與感知分析:在開發時進行了深入的色彩理論研究,嘗試在多個色彩空間中訓練模型(RGB、HSV、HSL、LAB、YUV),進行了詳細的感知分析。例如,當在交換色彩調色板的亮度值時,結果會變得很糟糕,但交換色彩相同的色調時,結果卻相對較好。這些觀察表明,反向飽和度/亮度似乎與色彩「美感」有著強烈的相關性。這些洞察幫助指導了他的模型和數據構造。
- WCAG 無障礙評級與包容性設計:可以「Never fail WCAG」 的功能打開,確保配色符合現代網頁 WCAG(網頁內容無障礙指南)無障礙評級標準。每個色彩組合都提供詳細信息,包括顏色名稱、十六進制代碼、RGB 值、CSS 代碼和 WCAG 無障礙比率。這使設計師能夠直接將代碼複製到他們的設計工具中,無需額外的轉換步驟。
如何使用 Khroma
STEP1:無需註冊或登入,首頁直接點擊「Genrate」
STEP2:從下方一堆色彩中,挑選50個喜愛的顏色
這些顏色將用於訓練一個為您量身定制的顏色演算法來生成。為了獲得最佳效果,請選擇各種色調、明度和飽和度。雖然 50種顏色聽起來很多,但數量越多,Khroma 就不會以為你不喜歡顏色來做搭配。顏色種類越多,你能搭配出來的組合就越多!

STEP3:挑選完後點擊「Start Training」
若覺得還不滿意,可以繼續挑選。

STEP4:逐一確認其說明,點擊「Next」

- Khroma本質上是一個無限滾動的色彩組合展示平台。您可以在上方選擇不同的範本來查看配色方案。
- 可以使用搜尋功能產生特定的顏色、色調、明暗度、色相或顏色組合。
- 偏差控制生成顏色中您喜歡的顏色所佔的百分比。偏差越高,顏色越準確;偏差越低,顏色越多樣化。
- 如果您對結果不滿意,可以編輯您的選擇並重新訓練生成器。
STEP5:點擊右上角齒輪圖示Settings,開啟「Never fail WCAG」

- Upload custom image(自訂圖像上傳):可直接選擇並上傳你自己的設計圖或參考圖像,用來在真實背景上預覽 Khroma 生成的色彩組合,方便測試色彩在不同設計場景中的實際視覺效果。
- Chromatic Gradients(色彩漸層優化):啟用此選項後,部分漸層效果會變得更「不混濁」,色彩過渡會更清晰、乾淨。
- Never fail WCAG(無障礙篩選):自動排除那些不符合 WCAG(網頁內容無障礙指引)對比度標準的文字與背景色彩組合。
- Edit training colors(重新編輯訓練色彩):如果對現有結果不滿意,可以回到初始設定、重新選取 50 種訓練顏色。這會重置你現有的色彩生成器,並根據新選擇生成不同的個性化色彩組合。
- Save your data(保存數據並跨設備使用):能將個人生成器設定與收藏調色盤資料下載JSPN檔。可將下載的資料檔案上傳至其他設備或瀏覽器,讓你在不同工作環境都能用同一組偏好與色彩庫。也可以在選擇50個色彩頁面「 Got data from a different device? Import it」導入已保存數據。
STEP6:左上角工具列可選擇不同搭配形式

實際測試 Never fail WCAG 只在文字模式時才有效。



小結
Khroma 操作簡單,支援漸層、調色盤和自訂圖像,多角度預覽結果,並可直接儲存、下載和跨設備同步。透過「Never fail WCAG」功能,能快速篩選符合無障礙標準的組合,非常適合設計師尋找配色靈感。



















