調色盤

#4A90D9

#D47F25

#70A5DB

#257BD4

#70A5DB

關於調色盤

免費線上調色盤工具

調色盤工具支援兩種模式:配色方案產生和圖片調色盤提取。在產生模式中,選擇一個基色並選擇配色規則,即可自動產生一組和諧配色。在提取模式中,上傳圖片可自動提取主色調,也可以使用取色器精確點選顏色。所有計算在瀏覽器本地進行。


功能特點

  • 8 種色相環配色規則:單色、互補、類似、三分色、四分色、分裂互補、鄰近補色、雙分裂互補
  • 上傳圖片自動提取調色盤,支援取色器精確選色
  • 一鍵匯出為 CSS 變數、Tailwind v4、SCSS 變數
  • 鎖定/解鎖單個顏色,鎖定後在重新產生時保持不變
  • 點選色塊複製顏色值,支援 HEX/RGB/HSL 三種格式
  • 純前端離線處理,不上傳任何資料

使用方法

  1. 1在「配色產生」模式下,選擇入口顏色和配色規則
  2. 2調色盤自動產生,可鎖定或複製單個顏色
  3. 3切換到「圖片提取」模式,上傳圖片自動提取調色盤
  4. 4點選匯出按鈕一鍵複製 CSS/Tailwind/SCSS 設定

常見問題

調色盤和顏色轉換器、顏色取色器有什麼區別?
顏色轉換器用於 HEX/RGB/HSL 等格式之間的互相轉換;顏色取色器用於從螢幕或圖片中吸取某個位置的顏色值;調色盤則專注於產生一組和諧配色方案,或從圖片中提取完整的調色盤。
配色方案中的顏色可以單獨鎖定嗎?
可以。每個色塊右側有鎖定按鈕,鎖定後的顏色在重新產生(如修改基色或切換規則)時會保持不變,只替換未鎖定的顏色。
哪些配色規則適合設計初學者?
互補色對比鮮明,適合需要視覺衝擊的設計;類似色柔和統一,適合品牌和介面設計;單色簡潔專業,適合極簡風格。三分色和四分色更適合有經驗的設計師。
圖片提取調色盤的精確度如何?
使用顏色桶聚類演算法,將圖片中相近的顏色合併為最多 8 種主色。提取結果會自動過濾透明像素,並統計每種顏色的佔比。如果需要精確取色,可以使用取色器模式手動點選。
資料會上傳到伺服器嗎?
不會。所有配色計算和圖片處理完全在瀏覽器本地完成,您的顏色資料和上傳的圖片不會被發送到任何伺服器。
匯出的 Tailwind 格式適用於哪個版本?
匯出的格式採用 Tailwind CSS v4 的 @theme 自訂顏色語法,可以直接在 CSS 檔案中使用 --color-* 變數。

相關工具

圖片品質壓縮圖片黑白化圖片調色圖片像素化AI 智能去背換背景GIF 裁剪工具圖片水印證件照列印排版證件照裁剪圖片切片工具圖片資訊檢視顏色吸取器圖片Base64編碼轉換器表情包製作