Khroma:AI 驅動的無限個性化色彩組合工具,助您輕鬆生成符合無障礙標準絕佳配色

更新 發佈閱讀 6 分鐘

工具網址:https://www.khroma.co/

raw-image

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 就不會以為你不喜歡顏色來做搭配。顏色種類越多,你能搭配出來的組合就越多!

raw-image

STEP3:挑選完後點擊「Start Training」

若覺得還不滿意,可以繼續挑選。

raw-image

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

raw-image
  1. Khroma本質上是一個無限滾動的色彩組合展示平台。您可以在上方選擇不同的範本來查看配色方案。
  2. 可以使用搜尋功能產生特定的顏色、色調、明暗度、色相或顏色組合。
  3. 偏差控制生成顏色中您喜歡的顏色所佔的百分比。偏差越高,顏色越準確;偏差越低,顏色越多樣化。
  4. 如果您對結果不滿意,可以編輯您的選擇並重新訓練生成器。

STEP5:點擊右上角齒輪圖示Settings,開啟「Never fail WCAG」

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

STEP6:左上角工具列可選擇不同搭配形式

raw-image

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

raw-image
raw-image
raw-image

小結

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

留言
avatar-img
留言分享你的想法!
avatar-img
林位青的沙龍
142會員
64內容數
林位青的沙龍的其他內容
2025/11/01
Google Pomelli 是一款實驗性的 AI 行銷工具,由 Google Labs 和 DeepMind 於 2025 年 10 月推。透過「Business DNA」分析,Pomelli 能自動抓取品牌調性、視覺元素和品牌語言,快速生成符合品牌調性的廣告圖片和文案,大幅降低行銷內容製作成本。
Thumbnail
2025/11/01
Google Pomelli 是一款實驗性的 AI 行銷工具,由 Google Labs 和 DeepMind 於 2025 年 10 月推。透過「Business DNA」分析,Pomelli 能自動抓取品牌調性、視覺元素和品牌語言,快速生成符合品牌調性的廣告圖片和文案,大幅降低行銷內容製作成本。
Thumbnail
2025/10/24
Piktochart 是一款來自馬來西亞的線上圖形設計工具,專注於製作資訊圖表、簡報及數據視覺化內容。本文介紹 Piktochart 功能亮點(如 Pikto AI、Design Components、Maps)。對於需要將複雜資訊轉化為易懂視覺內容的商業用戶而言,是提升溝通效率的不錯選擇。
Thumbnail
2025/10/24
Piktochart 是一款來自馬來西亞的線上圖形設計工具,專注於製作資訊圖表、簡報及數據視覺化內容。本文介紹 Piktochart 功能亮點(如 Pikto AI、Design Components、Maps)。對於需要將複雜資訊轉化為易懂視覺內容的商業用戶而言,是提升溝通效率的不錯選擇。
Thumbnail
2025/10/16
本文介紹 Google Stitch 的使用步驟,從建立產品需求文件、生成 UI 設計提示詞,到實際操作 Stitch 生成介面,並對其生成網頁的 HTML 結構與 Tailwind CSS 進行分析。最後,作者分享了現階段 AI 生成介面的優缺點,以及其對未來設計領域的影響與訓練 AI 的重要性。
Thumbnail
2025/10/16
本文介紹 Google Stitch 的使用步驟,從建立產品需求文件、生成 UI 設計提示詞,到實際操作 Stitch 生成介面,並對其生成網頁的 HTML 結構與 Tailwind CSS 進行分析。最後,作者分享了現階段 AI 生成介面的優缺點,以及其對未來設計領域的影響與訓練 AI 的重要性。
Thumbnail
看更多
你可能也想看
Thumbnail
去歐洲真的是又興奮又緊張。網路上常說歐洲治安不好,行前說明會時領隊也提醒:「不要背後背包,隨身物要放在前面比較安全!」 但出國玩總是想打扮得美美的啊~而且隨身總得帶些實用小物:雨傘、濕紙巾、小瓶水、萬用藥膏……體積雖小,但零零總總裝起來也不少。我在蝦皮購買了這4樣超實用旅遊好物!減緩我的焦慮感。
Thumbnail
去歐洲真的是又興奮又緊張。網路上常說歐洲治安不好,行前說明會時領隊也提醒:「不要背後背包,隨身物要放在前面比較安全!」 但出國玩總是想打扮得美美的啊~而且隨身總得帶些實用小物:雨傘、濕紙巾、小瓶水、萬用藥膏……體積雖小,但零零總總裝起來也不少。我在蝦皮購買了這4樣超實用旅遊好物!減緩我的焦慮感。
Thumbnail
開箱 3 套深受 0-6 歲寶寶喜愛的互動式童書,包含 Bizzy Bear 推拉書、小小音樂大師有聲書、Poke A Dot 泡泡書,有效提升寶寶閱讀興趣與親子共讀時光。搭配蝦皮雙 11 購物攻略,教你如何鎖定免運、折價券、高額回饋,並透過蝦皮分潤計畫,將日常購物開銷轉化為穩定育兒基金,聰明消費。
Thumbnail
開箱 3 套深受 0-6 歲寶寶喜愛的互動式童書,包含 Bizzy Bear 推拉書、小小音樂大師有聲書、Poke A Dot 泡泡書,有效提升寶寶閱讀興趣與親子共讀時光。搭配蝦皮雙 11 購物攻略,教你如何鎖定免運、折價券、高額回饋,並透過蝦皮分潤計畫,將日常購物開銷轉化為穩定育兒基金,聰明消費。
Thumbnail
介紹五個免費的AI工具,分別是Snapinsta (Instagram圖片影片下載器)、Flaticon (圖示庫)、EdrawMax AI (圖表生成器)、MusicGPT (AI商用配樂產生器)、AutoDraw (繪圖工具)和Remove Photos (影像處理工具),幫助使用者提高效率。
Thumbnail
介紹五個免費的AI工具,分別是Snapinsta (Instagram圖片影片下載器)、Flaticon (圖示庫)、EdrawMax AI (圖表生成器)、MusicGPT (AI商用配樂產生器)、AutoDraw (繪圖工具)和Remove Photos (影像處理工具),幫助使用者提高效率。
Thumbnail
Lovart AI 是一款革命性的設計 AI 代理,能協助設計師和非設計師完成各種設計任務。它整合多種 AI 模型,透過自然語言操作,自動完成從構思、規劃到成品輸出的全流程。Lovart AI 讓使用者能快速生成高品質的設計作品,例如品牌視覺、行銷海報、短影片等。
Thumbnail
Lovart AI 是一款革命性的設計 AI 代理,能協助設計師和非設計師完成各種設計任務。它整合多種 AI 模型,透過自然語言操作,自動完成從構思、規劃到成品輸出的全流程。Lovart AI 讓使用者能快速生成高品質的設計作品,例如品牌視覺、行銷海報、短影片等。
Thumbnail
作為一名 UIUX設計師,你是否經常面臨靈感枯竭或時間不足的困擾?現在,AI 工具正在成為設計師的強大助手,幫助你快速完成設計、優化流程,甚至激發更多創意!以下是 3 個必備 AI 工具,讓你的 UIUX設計工作更加高效、精準且富有創意!
Thumbnail
作為一名 UIUX設計師,你是否經常面臨靈感枯竭或時間不足的困擾?現在,AI 工具正在成為設計師的強大助手,幫助你快速完成設計、優化流程,甚至激發更多創意!以下是 3 個必備 AI 工具,讓你的 UIUX設計工作更加高效、精準且富有創意!
Thumbnail
創新講師 陳建銘老師分享,要怎麼使用AI問出好問題,要怎麼使用AI幫助我們重新思考,並且以自己的創新發明作品做舉例。
Thumbnail
創新講師 陳建銘老師分享,要怎麼使用AI問出好問題,要怎麼使用AI幫助我們重新思考,並且以自己的創新發明作品做舉例。
Thumbnail
你是不是經常感嘆:「啊,事情這麼多,我哪裡有這麼多時間搞定啊!」 😵‍💫 別擔心,AI工具來當你的「救火隊長」了!🔥✨
Thumbnail
你是不是經常感嘆:「啊,事情這麼多,我哪裡有這麼多時間搞定啊!」 😵‍💫 別擔心,AI工具來當你的「救火隊長」了!🔥✨
Thumbnail
這篇整理了我這個月讀到關於「設計創作」和「AI」相關的內容,並且幫大家附上了來源,如果你想了解我這個月發現了什麼不錯的內容都可以在這裡找到,而且我還會加上我的一點個人回饋。 另外每月資訊量不同,造成每一類的內容不一,有的內容會比較多,如果你只想看精選,我會在每一類中都挑出 3 篇我最推的
Thumbnail
這篇整理了我這個月讀到關於「設計創作」和「AI」相關的內容,並且幫大家附上了來源,如果你想了解我這個月發現了什麼不錯的內容都可以在這裡找到,而且我還會加上我的一點個人回饋。 另外每月資訊量不同,造成每一類的內容不一,有的內容會比較多,如果你只想看精選,我會在每一類中都挑出 3 篇我最推的
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News