色彩調色盤生成器 - 建立和諧的配色方案
選擇基礎色自動生成基於色彩理論的和諧調色盤。從互補色、類比色、三角色、四角色或分裂互補色方案中選擇，並複製為 CSS 變數。
#3398db
#db7633
:root {
--color-primary: #3398db;
--color-primary-light: #8ac4ea;
--color-primary-dark: #19608f;
--color-secondary: #db7633;
--color-secondary-light: #eab18a;
--color-secondary-dark: #8f4819;
}
調色盤生成器 是什麼？
色彩調色盤生成器使用色彩理論（互補色、類比色、三角色等）從單一基礎色自動創建和諧的配色方案。幫助網頁和 UI 設計中的色彩決策。
使用方法
- 使用色彩選擇器或 HEX 輸入選擇基礎色
- 選擇和諧類型（互補色、類比色、三角色、四角色、分裂互補色）
- 點擊任意調色盤顏色複製其 HEX 值
- 使用 CSS 變數按鈕複製整個調色盤
常見問題
- 如何選擇和諧類型？
- 互補色創建高對比方案，類比色創建柔和方案，三角色提供均衡的 3 色方案。
- 什麼是明暗變化？
- 透過調整每種顏色的明度 ±20% 創建的較亮和較暗版本。適用於懸停狀態和漸層。
- 如何使用此工具？
- 使用色彩選擇器選擇基礎色，然後選擇和諧類型即可自動生成調色盤。點擊任意顏色可複製其 HEX 值。
- 資料會傳送到伺服器嗎？
- 不會。顏色處理完全在瀏覽器中進行，不會傳送任何資料到伺服器。
- 可以匯出為 CSS 變數嗎？
- 可以。使用「複製 CSS 變數」按鈕，可將整個調色盤以 --color-1: #xxxxxx; 格式複製。
相關工具
更新記錄
最後更新：2026-02-20
- 2026-02-19 初次發布