調色盤產生器

用五種方式產生配色方案

這款配色方案產生器可以取代一整套獨立工具。點擊「產生」取得隨機配色方案，從基礎色調整色彩協調方案，從圖片或照片中提取顏色，將單一十六進位代碼擴展為完整配色，或將顏色名稱或詞語轉換為可重現的調色盤。設定3至10種顏色，鎖定你喜歡的顏色，重新產生其餘顏色——無需帳戶，資料不離開你的瀏覽器。

點擊任意色塊複製其值，在HEX、RGB和HSL之間切換格式，拖曳色塊重新排序。按空白鍵即可立即產生新配色——這正是Coolors流行的工作流程，在這裡無需付費即可使用。

從圖片、十六進位代碼或顏色名稱提取顏色

從圖片：拖入一張照片，工具會在隱藏的HTML5 Canvas上使用中值切割演算法提取主要顏色——非常適合從產品圖、品牌照片或情緒板中配色。圖片保留在你的裝置上，永遠不會上傳至伺服器。Coolors對Pro訂閱用戶收費才提供此功能；在這裡完全免費。

從十六進位代碼：貼上品牌色並將其作為錨點，產生器會自動建立類似色、互補色和明暗變體。從顏色名稱：輸入任意詞語，確定性雜湊演算法會產生調色盤，同一詞語始終產生相同顏色——比基於AI的配色產生器更穩定可靠的離線替代方案。

基於真實色彩理論的色彩協調

協調模式透過在色輪上旋轉色相來應用色彩理論。互補色相距180°，產生強烈對比；類似色在±30°範圍內，營造平靜統一的感覺；三角配色使用相隔120°的三種色相；四角配色使用相隔90°的四種；分裂互補色在150°/210°處軟化對比衝突；單色保持單一色相並在調色盤中變化明度。

每個產生的顏色還附帶從50到900的完整明暗色階——這是真實UI設計系統中懸停狀態、邊框顏色和背景變體所需的明暗梯度。

UtiloKit與Coolors、Adobe Color和Paletton的比較

Coolors是最受歡迎的調色盤工具，擁有出色的鎖定/重新產生工作流程和龐大的探索社群。Coolors Pro（每月4美元）將圖片提取、進階匯出和調色盤歷史記錄置於付費牆後。免費版不含原生Tailwind匯出。Adobe Color在WCAG無障礙檢測和色彩協調視覺化方面表現良好，但儲存調色盤需要免費的Adobe帳戶，且到達匯出步驟需要更多點擊。

Paletton在色彩理論方面很強，但只顯示四種協調類型，不包含圖片提取功能。UtiloKit融合了三者的核心優勢——Coolors式鎖定、Adobe Color的WCAG面板、圖片提取，以及Tailwind/SCSS匯出——無需帳戶、無付費牆、工具本身無廣告。

鎖定喜歡的顏色，持續迭代調整

好的配色方案來自反覆迭代，而非一次產生。鎖定一個色塊，它就保持不變。按下「產生」或空白鍵時，只有未鎖定的色塊會改變。保留你喜歡的主色，調整強調色，持續優化直到整套配色滿意——然後直接匯出。

你可以同時鎖定多個顏色。鎖定品牌主色和中性背景色，讓工具推薦強調色。找到合適的強調色後將其鎖定，然後重新產生輔助色調。這模擬了設計師手動建立調色盤的方式，但速度快得多。

匯出為CSS、Tailwind、SCSS、JSON、PNG和可分享連結

調色盤準備好後，以專案所需的格式匯出。CSS產生包含自訂屬性的:root區塊。Tailwind產生可直接貼上到tailwind.config.js的theme.extend.colors物件。SCSS產生Sass相容的$變數宣告。JSON以HEX、RGB和HSL格式列出每種顏色，供JavaScript或設計令牌管道使用。下載PNG色板表用於品牌文件或簡報。複製將調色盤編碼在URL中的可分享連結，讓團隊成員看到與你完全相同的內容。

內建WCAG對比度檢測

調色盤只有在文字清晰可讀的情況下才算完成。對比度面板顯示每種顏色相對於白色和黑色文字的WCAG對比度，並標註AA和AAA通過/未通過徽章。WCAG 2.1 AA要求一般文字4.5:1，大文字3:1。AAA要求一般文字7:1。大多數調色盤工具跳過這個步驟或將其置於進階版本後——這裡內建此功能，在產生或修改色塊時即時執行。

無需註冊，無需上傳，資料不離開你的瀏覽器。每項調色盤操作——隨機產生、圖片提取、協調計算、對比度檢測和匯出——均在本地JavaScript中執行。將這款免費配色方案產生器加入書籤，用於網頁設計、品牌識別、插畫、簡報和季節性或婚禮配色方案。