跳至主要內容
Lizely

色彩調色盤生成器

選擇一個基底色彩，即可獲得相應的調色盤——補色、鄰近色、三色、以及其他搭配。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.使用色塊選擇器選擇基底色彩，或輸入如 #3b82f6 的 HEX 值。
  2. 2.選擇一個色彩方案——補色、鄰近色、三色、四色、分裂補色或單色調。
  3. 3.點選任意色塊複製其 HEX 值，並閱讀其下方顯示的 RGB 與 HSL 值。

關於色彩調色盤生成器

此色彩調色盤生成器依據經典色彩理論，將單一基底色彩轉化為協調的色彩組合——與設計師手繪色輪時所使用的關係相同。所有方案皆在 HSL 色彩空間中計算，其中色相為一個 0 至 360° 的圓圈，可旋轉以找到協調的組合。選擇 HSL 是有意的：與原始 RGB 不同，HSL 將色彩的色相、飽和度與明度分離，因此旋轉色相能維持調色盤的氛圍，同時色彩間的關係仍可預測。

使用色塊選擇器或輸入 HEX 值選擇基底色彩，選擇方案後，調色盤會即時更新。每種色彩均以 HEX、RGB 與 HSL 三種格式顯示，可直接匯入 CSS 等設計工具或品牌風格指南。點選任意色塊即可複製其 HEX 值至剪貼簿。

六種方案涵蓋你最常使用的色彩關係。補色將色相旋轉 180°，形成強烈對比的組合，因此適合用於行動呼籲的強調色。鄰近色在 ±30° 之間移動，產生平和、協調的組合，如同自然界中相鄰的顏色。三色間隔 120°，形成平衡且生動的組合。四色方案使用四個 90° 的點，提供豐富的兩組搭配。分裂補色則以補色兩側的色相（30°）來軟化對比，保留對比但避免直接對立的張力。單色調則維持同一色相，僅調整明度，提供清晰的灰階尺度，適用於陰影、懸停狀態、邊框與層次設計。

此工具適用於 UI 與網頁設計、品牌與標誌色彩、資料視覺化調色盤、影象創作、室內或時尚氛圍板。常見的流程是：以品牌主色為基底，產生補色或三色組合作為強調色，再切換至單色調來建立中性色的淺調與深調。當將色彩應用於文字與背景時，仍需檢視對比是否符合 WCAG 指南——協調的調色盤並不代表自動符合可及性要求。

由於所有運算皆基於色輪，並正確處理色相的迴圈（例如色相為 350° 加上 30° 會落在 20°，而非 380°），結果在數學上正確且可預測。所有運算皆在瀏覽器中執行——無需註冊、無需上傳，你的色彩從不會離開你的裝置。

方法與來源

透過旋轉 HSL 色輪上的色相（補色 +180°、三色 ±120°、鄰近色 ±30° 等）所產生的色彩方案。

常見問題

補色、鄰近色與三色之間有何差異？
它們是色輪上的不同位置。補色彼此對立（相距 180°），形成最大對比。鄰近色彼此相鄰（±30°），呈現平和、協調的視覺效果。三色則均勻分隔 120°，形成平衡且生動的組合。
我可以將這些色彩用於 CSS 或設計工具中嗎？
可以。每種色彩皆提供 HEX、RGB 與 HSL 三種格式。HEX 與 RGB 可直接匯入 CSS 或 Figma 等設計工具，HSL 則方便手動調整飽和度與明度。
我的色彩會被上傳或儲存嗎？
不會。此生成器完全在瀏覽器中執行，使用本機的 JavaScript 處理所有運算。不會有任何內容上傳、儲存或傳送至伺服器，也無需建立帳戶。

相關工具

色彩工具 使用指南

查看全部