工具頁摘要
Browser-side color palette generator deriving complementary, analogous, triadic, tetradic, and monochromatic schemes from a single hex/HSL seed, grounded in HSL color theory and WCAG 2.2 contrast ratio (AA / AAA). A six-band luminance matrix categorises palette brightness from near-black to near-white. Inputs never leave the browser.
分類：開發工具 / Developer。正式路徑：/tools/developer/color-palette-generator。狀態：GOLD。本頁提供可直接閱讀的工具用途、輸入情境、結果解讀、FAQ、信任聲明與相關資源摘要，協助讀者在使用前了解適用情境與限制。
本工具提供一般資訊與估算輔助，計算結果會受輸入值、假設條件與資料更新影響。財務、健康或法律相關結果不應視為專業建議；做出重大決策前，請依實際情況查核來源並諮詢合格專業人士。
中文摘要：色彩調色板生成器 是 Formula Universe 收錄於 開發工具 / Developer 分類的工具頁，包含工具用途、輸入指引、結果解讀、FAQ、資料來源、限制說明與責任參考。
最後更新：2026年6月23日
本頁面由 Formula Universe 編輯團隊審核並維護。我們定期更新工具內容、驗證計算邏輯和資料來源準確性，以確保提供讀者最新、最可靠的資訊。
開發工具 · 色彩調色板 · 黃金模板
輸入種子色即時推導 5 色配色方案,並提供六格亮度矩陣與 WCAG 2.2 對比度判讀
本工具在瀏覽器端解析 hex 色碼,套用 HSL 色彩理論的互補(180°)、類比(±30°)、三等(120°)、四等(90°)與單色(同色相不同明度)五種配色法則,推導 5 色調色板。每色額外計算 WCAG 2.2 相對亮度與對白/黑文字的對比度,並把亮度落入六格判讀矩陣。色碼不上傳,可安全用於品牌 ID、未公開設計稿。
範例 → 計算機
先用範例品牌色理解 HSL 旋轉,再貼上自己的種子色。
調色板解析結果
5.70
色
5
/階
3.69
L=13.4%
[1] #7C3AED HSL(262°, 83%, 58%) L=0.134 vs#fff=5.70 vs#000=3.69 [2] #ABED3A HSL(82°, 83%, 58%) L=0.695 vs#fff=1.41 vs#000=14.91 [3] #BA97F6 HSL(262°, 84%, 78%) L=0.392 vs#fff=2.37 vs#000=8.85 [4] #76B110 HSL(82°, 83%, 38%) L=0.353 vs#fff=2.60 vs#000=8.07 [5] #410E99 HSL(262°, 83%, 33%) L=0.037 vs#fff=12.02 vs#000=1.75
結果解讀
L7 固定六格,把目前主色的相對亮度放進常見階層;這是配色設計參考,不是無障礙合規結論。
相對亮度低於 0.05,適合做主背景或大字反白文字。對白色 contrast > 19,符合 WCAG AAA;但長時間閱讀會讓眼睛疲勞,需搭配充足留白。
深色面板、card hover、暗色模式主背景的常用區間。對白文字 contrast 約 8–15,普通內文與標題皆通過 WCAG AA。
Brand 主色、CTA 按鈕的甜蜜點,深到能鎖住注意力,亮到能與深色背景區隔。注意對白文字 contrast 仍須 ≥ 4.5 才符合 AA。
點綴色、icon 容器、subtle border 的常用層,搭配深色文字最佳。對 #000 contrast 約 4–7,普通內文剛好通過 AA。
Section 背景、卡片基底、淺色模式內容區的主力。對深色文字 contrast 通常 > 8,大標題與內文皆穩定通過 AAA。
全白主背景或 hover 高亮層,對深色文字 contrast > 15,適合長時間閱讀。但純白容易造成螢幕眩光,可微降至 #fafafa 緩解。
情緒與轉換層
L9 會連動目前推導結果,顯示種子色與 5 色階,協助判斷是否需要切換配色法、調整明度,或拆成 light/dark 雙主題。
結構洞察卡
動力卡
儲存 / 分享
重新貼上 hex 或切換配色法時自動重算,協助比較不同方案的對比度與亮度分布。
下一步行動
決策路徑
種子色
HSL 推導
對比度判讀
設計 token
知識
HSL (Hue / Saturation / Lightness) 由 Joblove & Greenberg 於 1978 年提出,以人眼感知為基礎重整 RGB 數值。配色法則(complementary / analogous / triadic / tetradic / monochromatic)以色相環旋轉角度定義,易於設計師理解與套用。WCAG 2.2 (W3C, 2023) 的對比度公式以相對亮度為基,規範普通文字 ≥ 4.5 (AA)、≥ 7 (AAA)。
對比度 = (L_max + 0.05) / (L_min + 0.05),其中 L 為 sRGB 相對亮度,線性化後依 0.2126R + 0.7152G + 0.0722B 加權。互補色取 H+180°,類比色取 H±30°,三等色 H+120°/240°,四等色 H+90°/180°/270°。
本工具僅處理 sRGB 色域;P3 廣色域、HDR、CIE LAB 推導未支援。對比度計算採 WCAG 2.2 規範,不包含 APCA(WCAG 3 草案)的字級權重。配色方案為 5 色固定,複雜設計系統(40+ token)需另行擴充。
互補色衝擊力強適合 CTA,類比色和諧適合內容區,三等色平衡適合資訊圖表,四等色豐富適合大型 dashboard,單色色階適合 minimalist 系統。對比度 4.5 是普通文字底線;3.0 適用於大字標題;< 3.0 僅可作裝飾或非資訊性元素。
調色板要與字體權重、間距系統、互動狀態(hover/active/disabled)一起評估;Light/Dark 雙模式需各自跑一次配色推導;品牌色須通過 WCAG AA 才能用於主要 CTA,否則需擴展明度版本。
若種子色 = #7c3aed (violet-600),HSL ≈ (262, 83%, 58%),互補配色得 #adef34 等;對白底文字對比 4.8 通過 AA、對黑底 4.4 接近 AA。改成 #10b981 (emerald-500) HSL ≈ (160, 84%, 39%),互補得 #b81081 等;對白底 3.5 僅作大字、對黑底 6.0 通過 AA。
常見問題
最常見原因是 hex 字串長度不對(必須 3 或 6 字元,前綴 # 可省)、含非 0-9/a-f 字元,或大小寫錯誤。錯誤訊息會指出具體問題 — 先把色碼改成 #ffffff 確認其他流程正確。
HSL 互補(H+180°)是色相環的數學對立,但人眼對色相敏感度不均(綠色感最廣、紫色感最窄),所以視覺上「最舒服」的互補色不一定是 H+180°。設計上常微調 ±15° 找到視覺平衡點;本工具給出標準 180° 為基準,微調由您決定。
不會。本工具完全在瀏覽器端用 HSL 公式與 WCAG 對比度公式運算;頁面關閉後色碼即消失,適合處理包含未公開品牌 ID 的設計稿(例如 brand-launch-2025-${tenant})。
WCAG 4.5 是底線(覆蓋大多數視力人群),對 high-contrast 美感要求或弱視族群仍嫌低。建議:重要 CTA 走 AAA(≥7),普通內文走 AA(≥4.5),裝飾元素 ≥3.0 即可;APCA(WCAG 3 草案)會更精準考量字級。
目前不支援,本工具僅處理 sRGB。P3 約多覆蓋 25% 色域,適合 macOS / iOS Safari 16+;OKLCH 是感知均勻色空間,適合 dark mode 動態色階。未來會以獨立工具上線,專業版設計系統包已含。
不建議。本工具只做數學公式推導,不檢查實際 DOM 互動狀態(focus ring、disabled、placeholder、error)、字級權重、跨瀏覽器渲染差異、或色盲模擬。正式稽核請使用 axe DevTools、WAVE、Pa11y,或委由 a11y 專業團隊。
推薦工具
* 聯盟連結,購買後我們可能獲得佣金。
解鎖 P3 廣色域推導、APCA 對比度、tints/shades 自動展開、design token JSON 匯出、Figma/Sketch 變數同步、light/dark 雙主題鏡像。
信任聲明 · 相關工具 · 參考資料
本工具僅在瀏覽器端推導調色板;貼上的色碼不會送到伺服器,適合處理含品牌 ID 的未公開設計稿。
Hash 生成器 · JSON 格式化器 · HTML 編碼解碼器 · Cron 表達式解析器
Joblove & Greenberg (1978) Color spaces for computer graphics;W3C WCAG 2.2 (2023) Success Criterion 1.4.3 Contrast (Minimum)、1.4.6 Contrast (Enhanced);Itten (1961) The Art of Color — 配色法則理論基礎;sRGB IEC 61966-2-1:1999 色域標準。