調色盤生成器 使用指南

<p><strong>輸入：</strong>基色 #FF6B35、型別類似。</p><p><strong>處理：</strong>在 HSL 空間取鄰近色相。</p><p><strong>輸出：</strong>5 色…

核心功能

• 由主色按配色規則（類似 / 互補 / 三角等）生成協調調色盤
• 每個色塊給出 HEX 與 RGB 色值，並可一鍵複製
• 支援匯出 CSS 變數與漸變程式碼
• 純本地計算，不上傳任何輸入

適用場景

• 從主色派生整套 UI 配色。
• 做海報、PPT 的配色方案。
• 給新品牌起一組色。

使用步驟

1. 設定主色（取色器或輸入色值）
2. 選擇配色規則與色塊數量
3. 檢視生成的整套調色盤
4. 微調個別色塊直到層次協調
5. 複製 CSS 變數或漸變程式碼用於專案

實用技巧

• 類似色柔和統一、互補色對比強烈，按畫面需要的張力選擇
• 生成後仍需用對比度工具核驗正文與背景，配色協調不代表文字可讀
• 建議為主色預留明暗兩側的固定檔位（如 100–900），便於統一按鈕與狀態色
• 品牌色不要直接大面積鋪底，降低飽和度或提高明度後更耐看

常見問題

互補和類似怎麼選？

類似色柔和統一，互補色對比強；按畫面張力需求選。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。

兩種色對比度不夠會提示嗎？

會按 WCAG 算出對比度值與等級，未達標會標紅提醒，便於及時換色或調深。

會儲存或上傳我的內容嗎？

結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。