一個從名稱產生配色盤的工具分兩個步驟運作：先查詢該具名顏色的 HEX 值，再把這個 HEX 餵進一個會依據色環關係產生對應配色的產生器。查詢字串中的「名稱」只是起點——實際執行工作的引擎接收的是 HEX 輸入，而不是文字。位於 /color/color-palette-generator/ 的配色盤產生器接受任何六位數的 HEX 碼（例如 #3b82f6），在 HSL 色環上旋轉其色相，並以互補、類似、三等分、四等分、分裂互補或單色等配置，回傳一組協調的色彩組合。輸出中的每個色塊會同時顯示 HEX、RGB 與 HSL，因此你一開始選的具名顏色就能在單一工作流程中，變成可在 CSS、Figma、品牌風格指南或情緒板使用的配色盤。它完全在你的瀏覽器中執行，無需註冊，因此從名稱到配色盤的來回只需幾秒鐘，而且不會在伺服器上留下任何東西。
顏色名稱如何變成配色盤
設計師經常以顏色名稱思考——「navy」、「tomato」、「rebeccapurple」、「seagreen」——但每一條 CSS 宣告、Figma 色塊以及品牌風格指南，最終講的都是 HEX。因此，「從名稱產生配色盤」的工具，實際上是一條兩階段的管線。第一階段是識別：把可讀的名稱轉成六位數的 HEX。第二階段是和諧化：把那個 HEX 交給一個懂色彩理論的引擎，回傳一組相關色彩。配色盤產生器專門為第二階段而打造，第一階段則可交由 CSS 具名顏色對照表、轉換工具，或快速用顏色選擇器目測來處理。一旦這兩個階段都釐清，這套工作流程就能對任何你能叫出名稱的顏色重複使用。
由於 CSS、設計應用程式和程式碼編輯器在配色盤產生器中不接受純英文顏色名稱，查詢這一步無可避免。好消息是速度很快：CSS 具名顏色對應到單一、標準化的 HEX，因此查詢只是讀取一列資料表，而不是估算。產生器負責較艱難的數學運算——算出哪些色相位於你基色的 30°、120° 或 180° 處，以及哪些組合在相同彩度與明度下仍然清晰可讀。
找出名稱背後的 HEX
CSS 為 148 種不透明顏色定義了關鍵字，每個都對應到固定的 HEX 與 RGB 三元組。最簡單的查詢來源是 HTML 顏色名稱對照表，它列出每個標準化關鍵字及其精確的 HEX 值。以下是幾個值得記住的範例：
- "navy" → #000080
- "tomato" → #FF6347
- "rebeccapurple" → #663399
- "cornflowerblue" → #6495ED
- "seagreen" → #2E8B57
- "goldenrod" → #DAA520
當名稱不是標準 CSS 關鍵字時——例如「dusk teal」、「harvest amber」，或是品牌專用詞彙——可以從對照表中挑選最接近的具名顏色，用影像取色工具從參考圖中取樣 HEX，或用顏色選擇器微調到滿意為止。結果都一樣：一個六字元的 HEX 字串，下一階段可直接使用，且無論你何時重新載入頁面，產生器都會以相同方式讀取它。
從該 HEX 建立配色盤
- 在任何現代瀏覽器中開啟配色盤產生器。
- 透過點擊色塊選擇器，或直接在 HEX 欄位中輸入你查到的 HEX（例如 rebeccapurple 為 #663399），來設定基色。
- 從六種配置中挑選：互補、類似、三等分、四等分、分裂互補或單色。
- 查看產生的色塊——配色中的每個顏色都會在下方顯示其 HEX、RGB 與 HSL 值。
- 點擊任何色塊即可將其 HEX 複製到剪貼簿；貼到 CSS、Figma 畫框、Notion 頁面或你的品牌風格指南中。
- 如果第一種配置不合適，更換配置下拉選單，配色盤會以同一個基色 HEX 即時更新。
六種配置及其功能
| 配置 | 色相旋轉 | 感覺 | 適用情境 |
|---|---|---|---|
| 互補 | +180° | 高對比、直接 | 行動呼籲按鈕、焦點、主視覺文字 |
| 類似 | ±30° | 平靜、協調、自然 | 背景、自然場景、柔和漸層 |
| 三等分 | ±120°（3 色） | 鮮明、平衡 | 插圖、品牌設計、親子介面 |
| 四等分 | 90°（4 個點） | 豐富、雙配對變化 | 儀表板、資訊圖表、複雜介面 |
| 分裂互補 | 180° ± 30° | 柔和對比、精緻 | 編輯型版面、精緻強調色搭配 |
| 單色 | 相同色相、不同明度 | 簡潔、色調統一 | 陰影、hover 狀態、邊框、層次 |
這些色相旋轉是 360° 色相圓上的數學位置（依據更廣泛的 色彩理論 架構），每種配置只是不同的間距。由於產生器以 HSL 色彩空間進行所有運算，切換配置時，彩度與明度會維持接近基色，因此整體配色在各種選項間的調性保持一致。色相的循環換行也處理得正確——基色色相 350° 加上 30° 會落在 20°，而不是 380°——因此色環上任何位置的結果都站得住腳。
單色配置是 UI 工作的主力：單一色相以多個明度階層呈現，就能產出圍繞品牌色的邊框、hover 狀態、停用文字與高度陰影。一旦基色確定，從鮮豔配置切換到單色配置，就能在不引入新色相的情況下，補齊系統中的中性色一側。
從單一具名顏色出發的實務工作流程
一個常見的模式是將品牌色選為基色，先產生一組鮮明或高對比的配置作為強調色，再切換到單色配置補齊系統中性的部分。具體來說，如果你的具名品牌色是「cornflowerblue」（#6495ED）：先跑一次類似配置，找出可作為漸層背景的兩個鄰近色；切換到互補配置，在色環另一側得到一個暖色強調色，用於按鈕與連結；切換到單色配置，將明度上下調整，用於邊框、hover 狀態、停用文字與高度陰影。三次配置切換、一個基色 HEX，就能得到一組完整的 UI 配色盤。
同樣的模式也適用於較暖的具名顏色。以「tomato」（#FF6347）為起點，互補配置會落在一個適合做強烈行動呼籲色的青綠色，而類似配置則提供兩個從橘到紅的鄰近色，適用於夕陽插畫。想更深入了解將這套流程應用於真實品牌系統的過程，可參考從單一顏色建立配置指南，其中以螢幕截圖與具體配色範例完整示範了整個來回流程。
對於偏好從影像而非名稱開始的設計師來說，任何上傳圖片的平均色都可作為基色 HEX，套用同樣的六種配置。工作流程完全相同：影像 → HEX → 產生器 → 色塊。
發布前檢查對比
和諧的配色並不自動代表無障礙。根據 WCAG 2.2，一般內文相對於背景需至少達到 4.5:1 的對比，大字（18 pt 標準或 14 pt 粗體）則需至少 3:1。在色環上看起來相處融洽的顏色，仍可能產生未達標的前景/背景組合——尤其是當其中之一是單色階中的淺色調。選定配色後，請將每組文字/背景配對跑過對比檢查工具，並調整明度直到通過比率為止。
最簡單的槓桿是背景：與其糾結色相，不如在 HSL 上將背景調亮或調暗幾個步階。由於產生器在單色階中保持色相不變，這屬於單一軸向的編輯，能完整保留配色的關係。色彩對比檢查器可讀取任何 HEX 配對，在你調整時即時顯示 AA/AAA 的通過/未通過狀態，讓無障礙檢查成為配色建構流程中的一環。
隱私與僅在瀏覽器中處理
這個產生器完全在你的瀏覽器中以用戶端 JavaScript 執行。不會上傳、儲存或傳送任何資料到伺服器，也不需要帳號。當你在圍繞尚未公開的品牌色建立配色時，這點很重要——HEX 從未離開你的裝置，因此從草稿到設計交付的整個工作流程都保持私密。對比檢查也是如此：每組前景/背景配對都在本地端評估，點擊色塊時不會附加任何遙測資料。
想進一步了解，請參閱Windows 上的互補色尋找工具：瀏覽器工作流程。