使用方式
- 1 開啟調色盤產生器，輸入、貼上或選擇要處理的內容。
- 2 依需求調整頁面上的選項與格式。
- 3 確認即時結果，再複製或下載可用的輸出。
調色盤產生器
隨機生成或根據主色生成精美調色盤，支援 HEX/RGB 複製。
🎨 調色盤配色設定
點擊色塊即可複製 HEX 碼
-
-
-
-
-
開發者代碼匯出
CSS 漸層產生器
適合的使用情境
隨機生成或根據主色生成精美調色盤，支援 HEX/RGB 複製。適合日常工作、開發、學習或快速驗證時使用。
隱私與資料處理
工具在瀏覽器中運作；處理敏感資料前，仍請確認瀏覽器與裝置環境可信。
用色彩理論產生協調的配色
這個配色產生器以 HSL 色彩模型運算：H（色相）是色環上的角度 0～360°，S（飽和度）與 L（亮度）是百分比。選定一個種子色後，工具會依照色彩學的經典規則在色環上旋轉，一次產生 5 個顏色。因為只改變色相、或只改變亮度與飽和度，產生的顏色彼此之間有明確的數學關係，看起來自然協調，而不是隨意拼湊。
五種模式各有適合的場景：「單色」保持相同色相，只調整亮度與飽和度，最安全、適合品牌與資訊介面；「互補」取色環對面 180° 的顏色，對比最強，適合讓按鈕或重點標示跳出來；「類似」取相鄰 ±15°、±30° 的顏色，柔和自然，常見於插畫與風景照風格；「三角」把色環三等分（120°、240°），色彩豐富但需要控制比例；「隨機」則在合理的飽和度與亮度範圍內抽色，適合尋找靈感。
實際應用時可以參考 60-30-10 法則：60% 主色當背景或大面積、30% 輔色用於區塊與卡片、10% 強調色留給按鈕與連結。互補與三角配色若各色等量使用會顯得雜亂，建議選一個主角，其餘降低飽和度當配角。另外別忘了可讀性：文字與背景的對比至少要達到 WCAG AA 的 4.5:1，可以用本站的色彩對比檢查器確認。
點擊色卡即可複製 HEX 色碼，也能一鍵匯出 CSS 變數、SCSS 變數、Tailwind 設定或 JSON，直接貼進專案中使用；下方的 CSS 漸層產生器則能把配色做成背景漸層。所有計算都在瀏覽器中完成。
常見問題
互補色、類似色、三角配色有什麼差別？
互補色相差 180°，對比最強；類似色相鄰約 15～30°，柔和協調；三角配色彼此相差 120°，色彩豐富但需控制比例。
什麼是 60-30-10 配色法則？
畫面中約 60% 使用主色、30% 使用輔色、10% 使用強調色，可避免顏色過多造成雜亂，強調色多用於按鈕與重點。
配色可以匯出成 Tailwind 設定嗎？
可以。匯出格式支援 CSS 變數、SCSS 變數、Tailwind 設定與 JSON，複製後即可貼到專案中。
為什麼同色相也能做出好看的配色？
單色配色只改變亮度與飽和度，色相一致所以絕不衝突，靠深淺建立層次，是品牌與 UI 設計最穩定的做法。
