一個可用的網站配色是一組小巧且具名的色彩組合，從單一品牌色彩出發，採用設計師沿用數十年的相同色輪關係所建構。要為你的網站建立配色，你可以挑選一個基礎 HEX 值（通常是你的品牌色彩），選擇一種色輪配置，例如互補色、類似色、三等分、四等分、分裂互補色或單色，產生器就會回傳相符的 HEX、RGB 和 HSL 色彩值。這些值可直接放入 CSS 自訂屬性、Figma 樣式或品牌風格指南中，讓你的按鈕、標題、連結、邊框與背景在每一頁都保持一致。輸出結果不僅是裝飾——你所挑選的配置決定了強調色是否突出（互補色）、頁面是否感覺平靜（類似色），或是能否擁有乾淨的色階來處理陰影與懸停狀態（單色）。由於運算在 HSL 中進行，並在 0–360° 的圓上旋轉色相，色彩關係保持可預測，一套完整的網站配色最快不到一分鐘即可定案。
網站配色基礎：角色、氛圍與對比
在你打開產生器之前，先了解配色中每個色彩該扮演什麼角色會很有幫助。一個典型的網站會使用三到六個具名色彩，但每一個都有其任務，這些任務可歸納為四大類：品牌、強調、表面與文字。
品牌色彩是你在大型廣告板上就能辨認的那一個 HEX 值。它會出現在標誌、主要按鈕以及頂部導覽列上。強調色是用來吸引目光執行特定動作的——例如「立即購買」按鈕、作用中的分頁標記、通知徽章。表面色涵蓋畫布：頁面背景、卡片背景、模態覆蓋層。文字色則包含內文、標題、連結與較淡的輔助文字。
氛圍取決於你圍繞品牌色彩所選的配置。互補配色（在色輪上相距 180°）給人充滿活力且直接的感覺，這也是它們常見於行動呼籲按鈕的原因。類似配色（相差 30° 以內）則帶來平靜且統一的感受，就像森林場景被視為同一個綠色家族。三等分配色（相距 120° 的三個點）顯得俏皮且平衡。單色色階則給人井然有序且編輯感強烈的印象，這也是許多設計系統將其用於邊框、懸停狀態與陰影的原因。
對比是不可妥協的條件。一組和諧的配色若文字與背景的明度過於接近，仍可能無法通過無障礙檢查。你建立的每一組配色在上線前都應通過對比檢查——和諧的配色並不自動等於無障礙的配色。
三個步驟建立網站配色
- 開啟 配色產生器，使用色票挑選器選擇你的品牌色彩，或在 HEX 欄位中輸入像 #3b82f6 的 HEX 值。基礎色彩是其餘配色的種子，所有色彩都將圍繞它旋轉產生。
- 從六個選項中挑選一種色彩配置：互補色、類似色、三等分、四等分、分裂互補色或單色。配色會即時更新，依據 HSL 色輪進行數學上正確的色相旋轉。
- 點擊任一色票即可將其 HEX 值複製到剪貼簿，並讀取顯示在下方對應的 RGB 與 HSL 值。HEX 可直接套用於 CSS，RGB 可用於任何設計工具，而 HSL 則讓你手動微調飽和度與明度。
每種配置如何對應網站任務
並非每一種配置都適合每一個頁面。下表將產生器可產生的六種色彩關係，對應到它們在實際網站中通常扮演的角色。
| 配置 | 色相旋轉 | 氛圍 | 最佳網站角色 |
|---|---|---|---|
| 互補色 | +180° | 高對比、充滿活力 | 主要行動呼籲、頁首焦點 |
| 類似色 | ±30° | 平靜、協調、自然 | 頁首背景、行銷頁面 |
| 三等分 | ±120°（三個點） | 鮮明、平衡 | 特色重點、插圖、徽章 |
| 四等分 | 90°（四個點） | 豐富、多樣 | 儀表板、資料視覺化、多分區頁面 |
| 分裂互補色 | +150° / +210° | 高對比、較柔和 | 次要強調色、連結懸停狀態 |
| 單色 | 相同色相，變化明度 | 井然有序、色調一致 | 邊框、懸停狀態、陰影、文字色階 |
一個實用的工作流程是：先從你的品牌色彩開始，產生一組互補或三等分作為強調色，接著切換到單色配置，建立圍繞該品牌的中性色階與深淺變化。單一作業流程即可涵蓋品牌、強調、表面與文字，無需離開產生器。
實作範例：從 #3b82f6 建立配色
為了說明旋轉如何運作，我們以 HEX 值 #3b82f6 作為起點。在 HSL 中，該色彩約略落在 H = 217°、S = 91%、L = 60%——一個飽和的中藍色。
將配置切換到互補色。產生器將色相旋轉 +180°，因此 217° + 180° = 397°，在 360° 的圓上環繞一圈後落在 37°。產生的色彩落在暖色系的橙色家族，這給了你一個強烈的行動呼籲強調色，卻仍與品牌藍保有數學上的關聯。
切換到類似色。產生器會輸出兩個色彩，分別是 217° − 30° = 187°（青色）以及 217° + 30° = 247°（紫色）。作為背景色階與次要按鈕使用時，這兩色會安靜地與基礎藍並存，而不會互相競爭。
切換到單色。色相維持在 217°，明度則上下遞增。你會得到一個乾淨的色階——較深的色調用於標題，中間色調用於內文，較淺的色調用於卡片表面與懸停狀態。由於 HSL 將色相與明度分離，每個深淺變化都保持在同一個色彩家族中，配色的整體氛圍得以維持不變。
每個旋轉後色彩的精確 HEX、RGB 與 HSL 值直接來自工具中的色票，請從實際輸出讀取，而非從數學推算猜測。
從配色到 CSS：網頁工作流程
一旦擁有配色，將它套用到網站上最快的方式是透過 CSS 自訂屬性。在 :root 中將每個色彩定義為變數，然後在每個元件中引用該變數。日後若要更改品牌，只需修改一行而非數十行。
你從每個色票複製的 HEX 值會成為屬性的值。若需要透明度，RGB 或 HSL 的輸出可讓你直接切換到 rgba() 或 hsla()，無需手動重新轉換。由於產生器會同時並列輸出三種格式，你可以在 HEX（給設計師）、RGB（給較舊的工具）以及 HSL（給手動微調飽和度）之間切換使用，無需重新輸入任何內容。
對於較大型的專案，可將同一組配色貼到設計權杖檔案中（tokens.json、theme.ts、theme.css），並匯出到你的元件庫。HSL 在此特別實用：固定色相、調整明度，即可程式化產生懸停、作用中與停用狀態，讓每個互動狀態都源自同一個基礎色彩，而非各別目測挑選的值。
上線前檢查對比
在 Figma 畫面中看起來不錯的配色，仍可能對真實使用者造成困擾。WCAG 為內文、大字與 UI 元件定義了最低對比比例——這些數字是為了讓低視能、色盲或在強烈陽光下的使用者仍能清楚閱讀。
在上線前，將每組「文字對背景」的配對跑一次對比檢查。色彩對比檢查器接受任何一對 HEX 值，並即時依據 WCAG AA 與 AAA 回報比例。若某組配對未通過，請勿重新設計整組配色——而是利用其 HSL 值調整其中一個色彩的明度。由於產生器為每個色票都輸出 HSL，你可以在保持色相與整體配色關係不變的情況下，提高或降低明度，直到比例通過為止。
若想進一步了解色彩之間的底層關聯，色彩理論有著悠久且記載詳盡的歷史（維基百科上的色彩理論）。
若想進一步深入了解，請參閱從 HEX 碼尋找互補色的配色靈感。
若想進一步深入了解，請參閱快速建立的隨機色彩產生器配色靈感。