配色產生器

產生和諧配色，鎖定喜歡的顏色，並產生 Tailwind 風格色階

3b82f6

e24956

3ba01b

如何使用配色產生器

以三種方式產生配色：依規則從基礎色推導、隨機產生並鎖定喜歡的顏色，或產生類似 Tailwind 的 50–950 色階。顏色在 OKLCH 中計算，支援多種匯出格式。

選擇「模式」：「配色規則」「隨機」或「色階」。

「配色規則」和「色階」模式先設定「基礎色」，再選「規則」，或填寫「顏色名稱」與「基礎色所在色階」。

「隨機」模式按「產生」或空白鍵，再次產生前先鎖定想保留的顏色。

把滑鼠移到顏色上按複製圖示；「配色規則」模式還可以把它設為基礎色。

在「匯出」選擇 HEX、CSS、Tailwind v3、Tailwind v4 或 JSON 並複製，或下載 .gpl、.ase 檔案。

常見問題

在 OKLCH 中旋轉色相，每個顏色都能保有與基礎色相同的感知明度和鮮豔度。若在 HSL 中旋轉，黃色會比藍色亮得多。

明度沿著接近 Tailwind 官方調色盤的曲線變化，彩度在 500–600 附近最高。基礎色會原封不動放在所在色階，選「自動」時放在明度最接近的那一階。

可以。用「上一個配色」「下一個配色」切換，頁面開著時會保留最近 50 組，關閉頁面後不會儲存。

隨機配色有 2 到 10 種（用 − 和 + 按鈕調整）。配色規則的數量固定，例如互補色 2 種、類似色和單色 5 種；色階固定為 11 階。

一段含 --color-* 變數的 @theme 區塊，可直接貼進 CSS。色階以 oklch() 寫成 --color-brand-500 這類變數，其他模式使用 HEX。