基於單一色彩的配色產生器是一種工具，它接受使用者提供的一個基礎色彩，並運用既定的色彩和諧規則（如互補色、類似色、三等分色、四等分色、分裂互補色以及單色關係）將其擴展為完整的多色配色方案。基礎色彩扮演錨點的角色，輸出色盤中其他每一個色樣，都是根據它在色相環上相對於該錨點的位置計算得出。使用位於 /color/color-palette-generator/ 的配色產生器，您可以透過輸入像 #3b82f6 這樣的 HEX 值，或使用視覺化挑選器來選擇起始色調，接著選擇一種和諧類型，工具便會立即產生一組相符的色樣，並提供每個色樣的 HEX、RGB 與 HSL 值。其結果是一個基於單一決策所建構的協調配色，免除了為網站、簡報、插圖、品牌素材或室內情境板挑選搭配色時的摸索過程。

設計師、開發人員、行銷人員以及業餘愛好者都會遇到同樣的問題：他們擁有一個喜愛的色彩（通常取自標誌、產品照片或客戶的品牌規範），並需要圍繞它建立一個完整可用的配色。手動在設計軟體中調整滑桿既緩慢，隨機產生色彩的工具又完全忽略色彩理論。基於和諧關係的產生器透過將數學關係套用於基礎色彩之色相、飽和度與明度通道，一次解決了這兩個難題。

color palette generator based on one color
color palette generator based on one color

色彩和諧規則說明

產生器所輸出的每一個配色方案，皆源自色相環上一個已定義的幾何關係。了解每個規則會產生什麼，能幫助您為專案選擇合適的方案。

和諧類型 與基礎色的色相關係 典型用途
互補色 基礎色 + 對面色 (180°) 高對比的行動呼籲按鈕、首頁主視覺區塊
類似色 基礎色 + 兩個鄰近色 (±30°) 平靜、統一的背景，啟發自然的品牌設計
三等分色 基礎色 + 兩個相距 120° 的色相 趣味、平衡的插圖、資訊圖表
四等分色 基礎色 + 三個構成矩形的色相 豐富的儀表板、多區段版面配置
分裂互補色 基礎色 + 兩個鄰近對面的色相 大膽的對比，但比完整互補色張力較低
單色 相同色相，變化的飽和度與明度 極簡 UI、字型層級、印刷跨頁

上述定義反映了設計軟體中通用的標準色彩理論慣例，產生器將其作為具名預設套用，您無需自行測量角度。

如何從單一基礎色建立配色

  1. 在瀏覽器中開啟 配色產生器。
  2. 將基礎色輸入 HEX 欄位（例如輸入像 #3b82f6 這樣的值），或點擊挑選器以視覺方式選擇一個色調。
  3. 從可用選項中挑選一種和諧類型：互補色、類似色、三等分色、四等分色、分裂互補色或單色。
  4. 檢視產生的色樣。每個色樣的正下方都會直接顯示其 HEX、RGB 與 HSL 值。
  5. 點擊任何一個色樣，即可將其 HEX 代碼複製到剪貼簿，然後貼到您的 CSS、設計檔或樣式指南中。
  6. 針對相同的基礎色切換和諧類型，無需更改錨點色調，即可預覽不同的氛圍。

整個流程皆在瀏覽器本機執行，無需安裝任何東西，也不必建立帳號。如果您想在沒有特定起始色的情況下探索配色，隨機色彩產生器 可隨需產生 HEX、RGB 與 HSL 值，並與配色工具搭配，是很好的發現步驟。

選擇合適的基礎色

每組輸出配色的品質，完全取決於您所提供的基礎色彩。柔和、中等飽和度的基礎色，在所有六種規則下通常都能產生和諧的結果；而高飽和度的霓虹色基礎，則可能讓互補色和四等分色配置顯得刺眼。如果您要從標誌或照片中取色，請從最大面積的平坦區域取樣，而非從亮部或暗部取樣，如此和諧運算才有具代表性的色相可用。設計師在將取樣值作為錨點之前，通常會先調整飽和度與明度至 HSL 範圍的中段，進行正規化處理。

在數位產品設計中，基礎色通常來自既有的品牌權杖（token）。將其 HEX 直接輸入產生器，所有下游色樣便會繼承該品牌關係。對於印刷或包裝專案，您可能需要先轉換品牌色；CMYK 轉 RGB 工具和 RGB 轉 CMYK 轉換器 可處理該雙向轉換，當您需要驗證螢幕上挑選的錨點色在印刷輸出時的呈現時特別實用。

綜合解讀 HEX、RGB 與 HSL 值

在每個色樣下方，產生器會顯示同一色彩的 3 種表示方式。HEX 是在 HTML、CSS 和大多數設計工具中使用的六字元代碼。RGB 將色彩拆分為紅、綠、藍三個通道，採用 0–255 的比例，這是螢幕顯示器的原生格式。HSL 將色彩表示為色相 (0–360°)、飽和度 (0–100%) 與明度 (0–100%)，這是描述和諧關係時最直觀的格式，因為僅憑色相即可決定其在色相環上的位置。

格式 #3b82f6 的範例 最佳用途
HEX #3b82f6 CSS、HTML、設計工具色樣
RGB rgb(59, 130, 246) JavaScript 色彩處理、canvas、螢幕輸出
HSL hsl(217, 91%, 60%) 描述和諧規則、程式化產生色調

若您需要手動或以程式方式在這些格式間轉換，RGB 轉 HEX 工具、HEX 轉 RGB 轉換器，以及 RGB 轉 HSV 轉換器 已涵蓋常見路徑。至於需要兩個配色色彩之間平滑過渡的 CSS 應用，色彩漸層產生器 會輸出可直接貼上的線性與放射狀漸層程式碼。

單一色彩配色的實務情境

品牌再造：一家公司保留其標誌性的藍色，但希望為重新設計的網站取得輔助色調。從品牌 HEX 產生一組類似色配置作為背景、淡色與懸停狀態，再產生一組互補色作為行動呼籲按鈕。

儀表板設計：一項產品需要一個主要操作色，加上用於成功、警告與錯誤的狀態色。從主要品牌色建構的四等分色配置，會產生四個共享底層飽和度與明度的平衡色相，使介面保持統一。

簡報投影片：以單一企業色建構的單色配置，能讓簡報看起來簡潔專業，僅透過明度建立內建的層級感，避免了衝突色相所造成的視覺雜訊。

插圖工作：從選定焦點色衍生的三等分色配置，可為藝術家提供角色、背景與重點所需的三個平衡色相，無需手動從參考照片中取樣。對於 Illustrator 等工具中基於影像的選色，相關操作指南位於 /color/guides/get-a-matching-color-palette-from-an-image-in-illustrator/，涵蓋該工作流程。

將配色輸出與無障礙檢查結合

在色相環上看似平衡的配色，若前景與背景色樣之間的明度對比過低，仍可能產生難以閱讀的文字。在發布任何網頁或應用程式介面之前，請將您選定的文字與背景配對，交由 色彩對比檢查器 進行檢測，該工具會根據 W3C 制定的 WCAG 2.2 AA 與 AAA 門檻評估每種組合。相同的評估亦適用於 Figma 設計，相關實務指南位於 /color/guides/check-color-contrast-for-accessibility-in-figma-easily/，涵蓋該情境。W3C 的網頁內容無障礙指南規定，AA 標準下正常文字的最低對比為 4.5:1，大型文字為 3:1；AAA 標準則更為嚴格，分別為 7:1 與 4.5:1。

搭配相關工具使用

配色產生器專注於從單一錨點出發的和諧關係。若您需要雙色混合，想找出兩個特定 HEX 值之間的中點，色彩混合器 會顯示精確結果，並在兩個輸入值之間提供即時漸層。若需要 HEX 值的嚴格數位反相，互補色尋找器 會回傳不套用任何明度或飽和度調整的 8 位元 RGB 對比色，這與配色產生器中基於和諧的互補色預設有所不同。

開始前的常見問題

和諧規則在每個設計工具中都一樣嗎？是的，其底層的角度關係已標準化，但個別工具可能會對產生的色樣套用些微的飽和度或明度調整，以達到視覺平衡。

我可以鎖定基礎色並嘗試所有和諧類型嗎？產生器讓您在無需重新輸入基礎色的情況下變更加諧類型，因此您可從同一錨點比較全部六種配置。

相同的 HEX 是否總會產生相同的配色？只要和諧預設相同，且工具採用標準的色彩理論角度，輸出結果便是確定性且可重現的。

此工具可用於印刷工作流程嗎？HEX 與 RGB 值屬於螢幕空間色彩。對於印刷輸出，請使用 CMYK 轉換工具轉換您的最終選擇，並在正式量產前向印刷廠索取樣張。

相關指南：一鍵在 Ibis Paint 中取得完美配色。

相關閱讀：如何計算兩個 HEX 值之間的色彩差異。

相關閱讀：在 Illustrator 中一鍵將 HEX 代碼轉換為 RGB。