🎨 Color Palette Generator
單色
互補色
類似色
三角色
四角色
分裂互補
隨機
#667eea
基礎顏色
🖼️
點選或拖拽圖片到此處
支援 JPG、PNG、GIF 等格式
Set a base colour and a harmony rule to build a matching palette, then export the swatches, gradients and CSS variables.
📐 計算公式 / 原理
鄰近色相 = H ± Δ（Δ 常取 15°/30°）；明度階梯 = L ± k·ΔL；飽和度按規則微調
按色彩調和規則在主色基礎上做色相偏移與明度、飽和度階梯，生成可複用的調色盤，支援匯出色值、漸變與 CSS 變數，用於為網站與海報建立統一色彩體系。
📚 深度解析：調色盤生成器
💡 常見使用場景
- 從主色派生整套 UI 配色。
- 做海報、PPT 的配色方案。
- 給新品牌起一組色。
由 #FF6B35 生成類似色板
<p><strong>輸入：</strong>基色 #FF6B35、型別類似。</p><p><strong>處理：</strong>在 HSL 空間取鄰近色相。</p><p><strong>輸出：</strong>5 色協調板與 HEX，可複製為 CSS 變數。</p>
❓ 常見問題（FAQ）
- 互補和類似怎麼選？
- 類似色柔和統一，互補色對比強；按畫面張力需求選。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
- 兩種色對比度不夠會提示嗎？
- 會按 WCAG 算出對比度值與等級，未達標會標紅提醒，便於及時換色或調深。
- 會儲存或上傳我的內容嗎？
- 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
⚠️ 使用說明與注意事項
- 本工具純前端執行，資料不會上傳到伺服器
- 建議在主流瀏覽器（Chrome/Safari/Firefox/Edge）中使用
- 計算結果僅供參考，請以實際應用場景為準