調色盤產生器
從一個顏色產生互補、類似、三等分等配色與 50–950 色階，可匯出 CSS 變數或 Tailwind 設定。
支援 HEX、rgb()、hsl()、hwb()、oklch()、oklab() 與 CSS 顏色名稱。
配色
互補色
- #3366cc
- #916300
類似色
- #3366cc
- #0077ac
- #7253c3
三等分配色
- #3366cc
- #ba363d
- #1b8316
分裂互補色
- #3366cc
- #b04900
- #6f7300
四等分配色
- #3366cc
- #b03776
- #916300
- #008364
單色配色
- #001a7d
- #1141a4
- #3366cc
- #558cf5
- #85b4ff
色階 50–950
亮度參考 Tailwind CSS 預設色盤；最接近基準色亮度的一階直接使用基準色。
- 50#f1f6fd
- 100#e1eafc
- 200#c7dafb
- 300#a1c1fb
- 400#6c9dfc
- 500#4985fa
- 600#3872e6
- 700基準色#3366cc
- 800#264ea0
- 900#244382
- 950#0f2147
匯出色階
用於變數名稱，例如 --color-primary-500。
使用說明
- 在「基準色」輸入任何 CSS 顏色，或用取色器挑選；按「隨機顏色」可以隨機產生一個。
- 「配色」列出互補色、類似色、三等分、分裂互補、四等分與單色配色，每個色塊都標示色碼，按「複製」即可取得。
- 「色彩格式」切換複製與顯示的格式：HEX、RGB、HSL 或 OKLCH。
- 「色階 50–950」產生從淺到深的 11 階顏色，可在「匯出色階」輸出成 CSS 變數、Tailwind v4 @theme 或 JSON。
常見問題
配色是怎麼算的？
所有配色都在 OKLCH 色彩空間計算：互補、類似、三等分等配色保持亮度與彩度，只旋轉色相（例如互補色轉 180°、三等分轉 120°）；單色配色與色階則保持色相，只改變亮度。因為 OKLCH 以人眼感知為基礎，相同亮度的顏色看起來一樣亮，比用 HSL 色輪更均勻。
為什麼互補色和 HSL 色輪上的不一樣？
OKLCH 的色相角度與 HSL 不同，例如 HSL 中紅色的互補色是青色，在 OKLCH 中則偏藍綠色。兩種都是合理的配色，OKLCH 的結果亮度較一致。
色階 50–950 怎麼產生？
每一階有固定的目標亮度（參考 Tailwind CSS v4 預設色盤），彩度在中間階最高、往兩端遞減。與基準色亮度最接近的那一階會直接使用基準色，所以匯出的色階一定包含你的顏色。
有些顏色的彩度為什麼比基準色低？
一般螢幕（sRGB）能顯示的鮮豔程度依色相與亮度而不同，例如很亮的藍色或很暗的黃色就無法太鮮豔。超出範圍時，本工具依 CSS Color 4 的做法降低彩度、保持亮度與色相，找出最接近的可顯示顏色。
匯出的格式怎麼用？
「CSS 變數」貼到樣式表即可用 var(--color-primary-500) 取用；「Tailwind v4 @theme」貼到 Tailwind v4 的 CSS 檔案後可直接使用 bg-primary-500 等 class；「JSON」可放進 Tailwind v3 設定檔的 theme.extend.colors。
我的資料會被上傳嗎？
不會。所有計算都在你的瀏覽器中完成，隨機顏色也是在本機以加密等級的亂數產生。