在數位設計中，補色是指一個給定十六進位色碼的精確 8 位元 RGB 反相值，計算方式是將紅、綠、藍三個色道分別從 255 中減去。例如，#FF5733（RGB 255, 87, 51）的補色是 #00A8CC（RGB 0, 168, 204）。這種關係能在兩種顏色之間創造出最高的對比，使其在標誌、字型排版以及對可見度要求極高的 UI 元素中極具價值。雖然 Illustrator 提供了色相環和配色規則，但並沒有直接的「RGB 補色」按鈕，設計師只能手動計算或依賴外部工具。互補色尋找器能自動化反相過程，並以十六進位和 RGB 兩種格式顯示結果，方便直接貼到 Illustrator 的色彩選擇器或色票面板中。

為什麼這在 Illustrator 中很重要？這款軟體的色彩工具功能強大，但在精確的數位反相方面並不總是直觀。例如，重新著色圖稿功能可以產生配色和諧，但無法單獨取出 RGB 補色。同樣地，Color Guide 面板會建議類似色或三等分配色方案，但並不保證是數學上精確的反相值。對於從事品牌設計、無障礙介面或色彩精準度不容妥協的印刷專案的設計師來說，這些近似值是不夠的。互補色尋找器能在幾秒內提供精確的 RGB 補色，消除了手動計算中的人為錯誤風險或目測猜測，彌補了這個缺口。

how to find complementary color in illustrator
how to find complementary color in illustrator

為什麼 RGB 補色與其他模型不同

補色在不同色彩模型中有不同的定義，在 Illustrator 中工作時可能會造成混淆。在傳統的 RYB（紅-黃-藍）模型中（用於繪畫），紅色的補色是綠色，藍色的補色是橙色，黃色的補色是紫色。然而，數位設計依賴 RGB（紅-綠-藍）模型，其中的補色是將每個色道的 8 位元值反相計算得出。例如：

色彩模型 紅色 (#FF0000) 的補色 計算方式
RYB（傳統） 綠色 在 RYB 色相環上的對應位置
RGB（數位） #00FFFF（青色） 255 - 255 (R)、255 - 0 (G)、255 - 0 (B)
CMYK（印刷） 青色 (100% C、0% M/Y/K) 減法混色（基於油墨）

Illustrator 支援這三種模型，但 RGB 補色是唯一能為數位專案保證數學精確反相的方式。Color Contrast Checker 工具可以幫助你驗證 RGB 補色是否符合 WCAG 無障礙標準，確保你的設計對所有使用者都適用。對於印刷專案，你之後可能會使用 RGB to CMYK Converter 將 RGB 補色轉換為 CMYK，但最初的反相計算應始終從 RGB 開始，以避免色偏。

如何在 Illustrator 中使用互補色尋找器

依照以下步驟找出任何十六進位色碼的精確 RGB 補色，並在 Illustrator 中套用：

  1. 在瀏器中開啟 Complementary Color Finder 工具。
  2. 將你的六位數十六進位色碼（例如 #3498DB）輸入到輸入欄位中，或使用色彩選擇器來選取顏色。
  3. 點擊 Find RGB Complement。工具將顯示反相後的十六進位色碼（例如 #CB6724）及其 RGB 值（例如 203, 103, 36）。
  4. 將十六進位或 RGB 值複製到剪貼簿。
  5. 在 Illustrator 中，開啟 Color 面板（Window > Color）。
  6. 將十六進位色碼貼到十六進位欄位中，或手動將 RGB 值輸入到 R、G 和 B 滑桿中。
  7. 選取物件，然後點擊 Color 面板中的新色票，將顏色套用至你的圖稿。

若要進行批次更新，請將補色加入 Swatches 面板（Window > Swatches），方法是點擊 New Swatch 按鈕，然後貼上十六進位或 RGB 值。這能確保你的 Illustrator 專案中色彩的一致性。

何時在 Illustrator 中使用 RGB 補色

RGB 補色在對比和可見度至關重要的情境中最為有效。以下是一些實際的應用場景：

  • 標誌與品牌設計：標誌的主色與其補色能創造出瞬間的視覺衝擊力。例如，一個使用 #2ECC71（祖母綠）的品牌可能會將其與 #D1328E（粉紅色）搭配，用於次要元素或行動呼籲按鈕。
  • 無障 UI 設計：文字和互動元素必須符合 WCAG 對比標準（一般文字為 4.5:1）。Color Contrast Checker 可以確認你的 RGB 補色是否符合這些標準。如果沒有，請在保持色相不變的情況下稍微調整亮度或飽和度。
  • 印刷專案：雖然 CMYK 是印刷的最終輸出格式，但從 RGB 補色開始可以確保轉換前的精確度。使用 RGB to CMYK Converter 預補色在印刷中的呈現效果，因為 CMYK 色域的限制可能需要進行調整。
  • 資料視覺化：圖表和圖形能受益於互補色來區分資料集。例如，長條圖可能使用 #3498DB 表示一個類別，並用其補色 #CB6724 表示另一個類別，確保即使在小型或密集的版面中也能保持清晰。

對於更複雜的配色方案，可以使用 Color Palette Generator 將 RGB 補色與類似色或三等分色結合。這個工具能讓你圍繞基礎色及其補色建立和諧的配色，為你的 Illustrator 專案提供全方位的選擇。

需要注意的陷阱

即使有工具輔助，過程中仍可能出錯。以下是如何規避這些問題：

  • 混淆 RGB 和 RYB 補色：Illustrator 的色相環預設為 RYB，這可能會誤導設計師，讓他們以為色相環上的對應顏色就是 RGB 補色。請務必使用互補色尋找器工具來驗證，以確保數位上的精確性。
  • 忽略色域限制：某些 RGB 補色可能落在 CMYK 色域之外，導致印刷時顏色黯淡或失真。在最終確定印刷設計之前，請使用 RGB to CMYK Converter 檢查是否有超出色域的警告。
  • 忽略無障礙性：高對比的配色並不一定是無障礙的。例如，#FF0000（紅色）和 #00FFFF（青色）的對比比率為 1.9:1，不符合 WCAG 標準。請務必使用 Color Contrast Checker 來測試你的補色。
  • 手動計算錯誤：手動進行十六進位減法運算（例如 FF - 57 = A8）容易出錯，尤其是對不熟悉十六進位運算的設計師而言。互補色尋找器透過自動化過程消除了這個風險。
  • 忘記儲存色票：找到完美的補色後，請將其儲存到 Illustrator 的 Swatches 面板中，以避免日後重新建立。這對於需要保持一致性的多張畫板專案特別有用。

Illustrator 色彩工具的比較

Illustrator 提供了多種處理色彩的方式，但都沒有提供直接的 RGB 補色功能。以下是內建工具的比較：

工具／面板 功能 在 RGB 補色方面的限制
Color Guide 根據基礎色建議配色和諧（類似色、三等分色等）。 無法單獨取出精確的 RGB 補色；預設依賴 RYB 色相環。
Recolor Artwork 允許全域色彩變更和配色規則。 補色為近似值；無法精確反相 RGB 色道。
Color Picker 允許手動輸入十六進位／RGB 值。 無內建反相功能；需要外部計算。
Swatches Panel 儲存並套用已儲存的色。 無法產生補色；只能儲存預先計算的顏色。

雖然這些工具在一般色彩工作中很強大，但它們缺乏 RGB 補色所需的精確性。互補色尋找器透過一鍵提供精確的反相值來填補這個缺口，你可以將其匯入 Illustrator 的任何面板中。例如，產生補色後，你可以：

  • 將十六進位色碼拖曳至 Swatches 面板以供日後使用。
  • 使用 Color Picker 微調補色的亮度或飽和度。
  • 使用 Recolor Artwork 全域套用該顏色，以更新專案中的所有實例。

對於經常在數位和印刷之間切換的設計師來說，RGB to CMYK Converter 是找到 RGB 補色後的合理下一步。這能確保你的色彩在所有媒介上都保持鮮豔和精確。

更多相關內容：如何為任何十六進位色碼找出互補色。

如果你正在權衡各種選項，快速在 Photoshop 中找出互補色 對此有詳細介紹。