🎨

配色盤產生器

從基準色產生精美配色盤。匯出為 CSS、HEX 或 JSON。

設計工具 本機執行 不會傳送任何資料
配色盤 HSL 補色 設計
基準色
配色盤類型
數量（僅限單色）： 5
5
匯出格式
配色盤預覽
匯出

什麼是配色盤產生器？

從基準色產生精美配色盤。選擇補色、類似色、三色或單色配色方案，並匯出為 CSS、HEX 或 JSON。

如何使用配色盤產生器

  1. 選擇你要據以建立的基準色。
  2. 選擇配色盤樣式，例如補色、類似色或單色。
  3. 檢視產生的色票，並視需要調整基準色。
  4. 複製你想在設計系統或示意圖中重複使用的 HEX 值。

相關工具

🎨
顏色選擇器
在 HEX、RGB、HSL 與 CMYK 之間轉換顏色
 🌈
CSS 漸層產生器
建立具即時預覽的 CSS 線性與放射狀漸層
 ⚖️
WCAG 對比檢測
檢查 WCAG AA 與 AAA 色彩對比比率，以符合無障礙要求
了解配色盤 ▾
範例
輸入 從基準藍色產生補色配色盤：
輸出 補色位於色輪正對面，形成高對比、鮮明的搭配。
常見使用情境
  • 從基準品牌色建立 UI 色彩系統
  • 為圖表或插圖產生輔助強調色
  • 交付設計前探索配色方向
  • 為社群貼文或簡報快速建立配色組
常見問題
如何挑選合適的配色調和類型？

大膽、高對比的設計請使用補色。柔和、協調的 UI 主題請使用類似色。需要三個平衡的強調色時請使用三色。簡潔與優雅是優先考量時請使用單色。

調色盤會檢查無障礙對比度嗎？

此工具專注於產生配色調和。若要進行 WCAG 對比度檢查，請使用本站的 Contrast Checker 或 WCAG AA Checker 工具。

我可以將調色盤匯出到 Figma 或 CSS 嗎？

可以——使用 CSS 匯出格式取得可直接貼上的 CSS 自訂屬性，或逐一複製 HEX 值，貼到任何設計工具中。

單色數量滑桿有什麼用途？

使用單色類型時，您可以控制產生多少個淺色與深色（3–10）。這可提供更細緻的灰階或色調階層供您使用。