色彩配置產生器（color palette generator）可從 HEX 色碼轉出一組完整、和諧的色票——只要輸入一個顏色（例如 #3b82f6），就會在 HSL 色輪上旋轉該色相，產出整組配色。這個工具可接受任何六位數十六進位值，在 HSL 色彩空間中計算對應關係，並回傳每個輸出顏色的 HEX、RGB 和 HSL 數值，方便設計師和開發者直接貼進 CSS、Figma、Sketch 或品牌風格指南中。由於每個關係都衍生自同一個基準色相，整組調色板會保持視覺上的一致性，看起來不會雜亂無章；切換配色方案就像替換位移值一樣快——無需手動重新挑選顏色。
當你已經有品牌色、螢幕截圖的強調色，或是想延伸發揮的競品 HEX 時，手動建立其餘配色意味著要在腦中猜測淺色、深色和互補色。HEX 驅動的產生器消除了這種臆測，它套用受過訓練的設計師會使用的相同色輪規則——互補色（complementary）、類似色（analogous）、三元色（triadic）、四元色（tetradic）、分裂互補色（split-complementary），以及單色（monochromatic）——並將結果以可直接複製的色票形式呈現。整個程序都在你的瀏覽器中執行，因此你輸入的 HEX 不會離開你的裝置，也不需要帳號就能查看、複製或反覆調整輸出。
HEX 為基礎的配色產生器會產生什麼
輸出是一個小型色票網格——依方案不同，通常包含 2 到 4 種顏色——每個色票標示著三組等效數值：你會在 CSS 中輸入的六位數 HEX、螢幕實際繪製所用的整數 RGB 三元組，以及數學上描述該顏色的 HSL 三元組（色相、飽和度、亮度）。點擊任何色票，其 HEX 就會複製到你的剪貼簿；對應的 RGB 和 HSL 數值則顯示在下方供參考。更改基準色或配色方案時，整個調色板會即時更新，無需重新載入。
在底層，產生器會讀取 HEX、將其轉換為 HSL、依所選方案以固定角度旋轉色相，然後再轉換回來。這種經由 HSL（而非 RGB 或 CMYK）的來回轉換，正是讓結果可預測的關鍵。色相是一個 0–360° 的圓，因此旋轉它總會落在與基準色相同飽和度與亮度的顏色上。你保留了情緒氛圍；改變的只是色輪上的位置。
六種配色方案一覽
下方的每種方案都是色相圓上一個不同的固定旋轉。下表摘要說明位移、會得到的對比類型，以及各自最適合的情境。這些關係與古典色彩理論中針對藝術家色輪所描述的相同。
| 方案 | 相對基準色的色相位移 | 氛圍與對比 | 最適用於 |
|---|---|---|---|
| 互補色 (Complementary) | +180° | 最大對比、高能量 | 行動呼籲強調色、首頁主按鈕 |
| 類似色 (Analogous) | ±30° | 平靜、和諧、自然 | 背景、插圖、登陸頁 |
| 三元色 (Triadic) | ±120° (兩個搭配色) | 平衡且鮮明 | 趣味品牌系統、資訊圖表 |
| 四元色 (Tetradic) | 90° 上的四個點 | 兩組配對的豐富變化 | 編輯型版面、儀表板 |
| 分裂互補色 (Split-complementary) | +150° 與 +210° | 有對比但不緊湊 | 內文強調色、次要 CTA |
| 單色 (Monochromatic) | 相同色相、不同的亮度 | 色階，組內低對比 | UI 中性色、陰影、hover 狀態 |
以同一個 HEX 切換方案，是比較不同氛圍最快的方式。試著用 #3b82f6 作為互補色，得到一組搶眼的藍橙配對；接著切換到類似色，觀察同一個品牌色如何沉穩為冷色系的藍-青-紫帶狀配色。
如何從 HEX 色碼建立配色
- 在瀏覽器中開啟色彩配置產生器。
- 將你的 HEX 輸入基準色欄位——例如 #3b82f6——或點擊色票選擇器以視覺化方式挑選。基準色票會在你輸入時即時更新。
- 從列表中選擇一個方案：互補色、類似色、三元色、四元色、分裂互補色或單色。配色網格會依據你的基準色相重新計算。
- 閱讀每個色票下方列出的三組數值：HEX（用於 CSS 和設計檔案）、RGB（用於接受整數的原生程式碼），以及HSL（用於手動微調飽和度與亮度）。
- 點擊任何色票，即可將其 HEX 複製到剪貼簿。直接貼到你的樣式表、設計工具或品牌文件中。
- 若要探索變化，請替換基準 HEX 或更改方案。這兩種編輯都會即時更新配色，無需重新載入頁面。
一起閱讀 HEX、RGB 與 HSL
這三種格式描述的是同一個顏色，但它們各自適用於不同的工作情境。
HEX 是網頁設計師最熟悉的簡寫形式。#3b82f6 表示 red = 0x3b (59)、green = 0x82 (130)、blue = 0xf6 (246)。它簡潔、便於複製貼上，並且被所有接受顏色的 CSS 屬性所支援。
RGB 將這三個通道展開為 0 到 255 的整數。這是螢幕硬體驅動背光所用的格式，因此任何直接與 canvas 像素或 GPU 溝通的工具都預期使用 RGB。RGB 也是最容易餵給 JavaScript 或 Python 色彩函式庫的格式。
HSL 將顏色拆解為色相 (0–360°)、飽和度 (0–100%) 與亮度 (0–100%)。正是這種分離讓產生器能透過旋轉色相來建立配色：在固定飽和度與亮度的同時改變色相，能保持配色的整體氛圍。當你想手動把一個色票調亮作為 hover 狀態，或調暗作為按下狀態時，使用 HSL 比重算 RGB 數值更快。
HEX 驅動配色的實際應用場景
從單一 HEX 建立出來的配色，會出現在大多數設計與工程工作中：
- UI 與網頁設計——挑選品牌色，再衍生按鈕、連結、邊框與焦點環的強調色與中性色階。
- 品牌與標誌系統——將單一標誌色延伸為完整的次要與第三色彩，用於行銷素材。
- 資料視覺化——挑選在圖表與地圖上保持區分且不互相衝突的類別色。
- 插畫與數位藝術——透過從主色相衍生陰影與高光色，鎖定整體氛圍。
- 室內與時尚情緒板——從照片中取樣一個 HEX，並將其轉化為可穿著或可居住的配色。
從品牌色到 UI 配色的實用工作流程
一個可靠的工作流程如下：將品牌色作為基準 HEX——例如 #3b82f6——並執行三元色或互補色方案，找出 2 到 3 個候選強調色。將這些強調色與你的品牌標誌比對並篩選出一個。在保持同一基準色的同時將方案切換為單色；這會給你一條從極淺到極深的乾淨色階，成為你的中性色、hover 狀態與分隔線。
若想了解背後的數學為何穩定，可以考慮一次單純的色相旋轉。基準色相 350° 加上 30° 的類似色偏移，得到 350° + 30° = 380°。因為色輪在 360° 處循環，380° − 360° = 20°。輸出色相為 20°，是一個溫暖的橘紅色，而不是沒有意義的 380°。正是這種循環特性，讓產生器無論你的品牌色落在圓上的哪個位置，都能產出穩定一致的配色。
無障礙性與和諧的限制
看起來和諧的配色未必就是無障礙的配色。色輪上的顏色關係談的是美學，而非可讀性。對於任何文字與背景的搭配，請將實際的顏色組合透過色彩對比檢查工具依 WCAG 指引進行驗證，確保該組合的可讀性。將「和諧」與「對比」視為兩項獨立檢查，正是區分一個「漂亮」配色與「可用」配色的關鍵習慣。
為何所有運作都在你的瀏覽器本地執行
每一次色相旋轉、HEX 解析與剪貼簿複製，都透過用戶端 JavaScript 完成。沒有任何資料被上傳、沒有任何資料被儲存，也不需要建立帳號。你輸入的 HEX 與最終得到的配色，都不會離開這個瀏覽器分頁。這使得這個工具可安全地用於尚未公開的品牌色、僅限客戶的配色，或你不希望傳輸出去的實驗性作品。
若想更深入了解如何將產生的色票當作圖表來閱讀，請參考色彩配置產生器圖表：解讀色輪，它會以視覺方式逐一展示同一組六種方案。如果你一開始只有 RGB 三元組而沒有 HEX，RGB 轉 HEX 轉換器可產生產生器所預期的六位數輸入。
如需更深入的內容，請參考CMYK 色碼及其對應的 CSS 命名顏色。