在數位設計中，互補色是給定十六進位碼的精準 8 位元 RGB 反相色，計算方式是將紅、綠、藍三個色道分別從 255 減去。例如，#FF5733（RGB 255, 87, 51）的互補色為 #00A8CC（RGB 0, 168, 204）。這種關係能產生最大對比，對於標誌、UI 元件或需要視覺平衡的相片編輯等設計專案至關重要。雖然 Photoshop 提供強大的色彩工具，但它並未原生顯示十六進位碼的數位 RGB 互補色——使用者必須手動計算或仰賴外部工具才能避免錯誤。互補色查詢工具能即時產生精準的反相色，並提供完整的十六進位與 RGB 數值，省去猜測與時間浪費。
設計師經常需要互補色來為作品創造和諧或強調效果。舉例來說，如果你正在 Photoshop 中編輯相片，想將某個物件的顏色更改為其互補色以達到戲劇性效果，精準的反相色能確保結果看起來是刻意為之，而非隨意決定。同樣地，網頁設計師會運用互補色來確保文字在背景上仍清晰可讀，符合 WCAG 對比指南。沒有像互補色查詢工具這樣的工具，要找到正確的互補色就得反覆嘗試，這會打斷工作流程並導致結果不一致。這款工具能預先提供精準數值，讓你專注於創作而非計算。
為何 Photoshop 無法顯示數位 RGB 互補色
Photoshop 的挑色器設計上相當靈活，除了 RGB 與十六進位外，還提供 HSB、Lab、CMYK 等多種色彩模型。然而，它並未包含專門用來顯示所選色彩之數位 RGB 互補色的功能。這項缺漏迫使使用者必須手動計算反相色，或採用像 反相 調整圖層這類替代方案，但這種方式會對整張影像套用互補色，而非僅針對單一顏色。反相 工具同樣具有破壞性，會變更原始像素，這在非破壞性編輯工作流程中並不理想。
另一項限制在於 Photoshop 的色彩模型對互補色的定義各不相同。例如，HSL 模型的互補色是色相環上相差 180 度的位置，可能與 RGB 反相色並不一致。這種差異容易造成混淆，特別是在處理數位專案的精準十六進位碼時。互補色查詢工具透過專注於 8 位元 RGB 反相色來消除這種模糊地帶，確保與數位設計標準一致。無論你是調整標誌、製作 UI 元件，或微調相片，隨手取得精準的互補色都能避免拖慢專案進度的反覆嘗試。
如何透過工具在 Photoshop 中找出互補色
若要在 Photoshop 中找出十六進位色的精準 RGB 互補色，請依照下列步驟使用互補色查詢工具。這個方法相較於手動計算或 Photoshop 內建工具，能確保精準度並節省時間。
- 開啟互補色查詢工具：在瀏覽器中前往 /color/complementary-color-finder/。工具會即時載入，無需安裝或註冊。
- 輸入你的十六進位碼：在輸入欄位中，輸入你想反相之顏色的六位數十六進位碼（例如
#FF5733）。你也可以使用挑色器以視覺化方式選取色調。工具會自動驗證輸入，確保其為有效的十六進位碼。 - 產生互補色：點擊 尋找 RGB 互補色 按鈕。工具會透過將每個 RGB 色道從 255 減去的方式，即時計算出反相色，並同時以十六進位與 RGB 格式顯示結果（例如
#00A8CC與RGB(0, 168, 204)）。 - 複製結果：點擊十六進位或 RGB 數值旁的 複製 按鈕，將其儲存至剪貼簿。工具還會顯示原始色與互補色的即時色塊，供視覺確認。
- 貼上至 Photoshop：開啟 Photoshop 並選取 挑色器 工具（快捷鍵：
I）。在對話框中，將複製的十六進位碼貼入十六進位欄位，或手動輸入 RGB 數值。互補色即可在專案中使用。 - 套用顏色：在設計中使用該顏色，無論是文字、形狀或調整。若要進行非破壞性編輯，請建立新圖層並在其上套用顏色，以保留原始影像。
這個工作流程讓你無需手動計算或受 Photoshop 限制，就能取得精準的數位 RGB 互補色。若專案需要多組互補色，請為每個顏色重複該流程，或使用 配色產生器 根據你的基礎色建立完整調色盤。
何時該使用數位 RGB 互補色 vs. 其他模型
並非所有互補色都生而平等。數位 RGB 互補色適用於以螢幕為基礎的專案，例如網頁設計、UI 開發或數位藝術，這些場景中十六進位碼與 RGB 數值是標準規格。然而，其他色彩模型對互補色的定義各不相同，若不留意可能導致出乎意料的結果。以下條列說明各種方法的適用時機：
| 色彩模型 | 互補色定義方式 | 最佳使用情境 | 限制 |
|---|---|---|---|
| RGB（數位） | 每個色道從 255 減去（例如 #FF0000 → #00FFFF）。 |
網頁設計、數位藝術、UI 元件，以及任何使用十六進位或 RGB 數值的專案。 | 未考慮知覺差異；可能與傳統色彩理論不一致。 |
| HSL/HSV | 在色相環上相差 180 度（例如紅色 → 青色，藍色 → 黃色）。 | 平面設計、品牌設計，以及重視知覺和諧的專案。 | 可能與 RGB 反相色不符，導致數位工作流程出現不一致。 |
| CMYK | 無直接互補色；通常以反相百分比近似（例如 100% C → 0% C）。 | 印刷設計，CMYK 是實體輸出的標準。 | 反相結果無法順利轉換至 RGB 或十六進位，且常出現色偏。 |
| Lab | 在 L*a*b* 色彩空間中相對立，常用於進階色彩校正。 | 專業相片編輯、調光調色，以及科學化的色彩分析。 | 手動計算複雜；需要專門工具或軟體。 |
對大多數數位專案而言，RGB 互補色是最實用的選擇，因為它與 CSS、設計軟體及網頁開發所使用的十六進位碼一致。不過，如果你從事印刷工作或需要知覺和諧（例如標誌設計），HSL 互補色可能更合適。互補色查詢工具專注於 RGB 反相色，確保螢幕端作品的一致性。如果你需要在不同模型間轉換，RGB 轉 HSV 轉換器 或 RGB 轉 CMYK 轉換器 等工具能協助銜接。
在 Photoshop 中尋找互補色時的常見錯誤
即使有像互補色查詢工具這樣的輔助，在 Photoshop 中套用互補色時仍可能犯錯。以下是應避免的幾個陷阱：
- 假設所有互補色都相同：如上表所示，不同色彩模型對互補色的定義各異。在數位專案中使用 HSL 互補色（或反之）可能導致意外結果。請務必確認專案所需的模型。
- 忽略色彩設定檔：Photoshop 的挑色器可能會依文件設定檔（例如 sRGB 與 Adobe RGB）而以不同方式顯示顏色。如果你的專案是用於網路，請確保文件設定為 sRGB 以符合工具輸出。檢查方式：前往 編輯 > 色彩設定 並選取 sRGB IEC61966-2.1。
- 手動計算反相色：將每個 RGB 色道從 255 減去看似簡單，但容易出錯——特別是在處理十六進位碼時。例如，
#336699（RGB 51, 102, 153）反相後是#CC9966（RGB 204, 153, 102），而非#996633。互補色查詢工具 會代為處理運算，徹底消除這種風險。 - 忽略無障礙設計：互補色與原色搭配時，未必總能符合 WCAG 對比標準。例如，
#FF0000（紅色）與其互補色#00FFFF（青色）的對比比例為 1.6:1，未通過一般文字的 WCAG AA 標準。在定稿前，請務必使用 色彩對比檢查工具 驗證對比。 - 錯誤使用反相調整圖層：Photoshop 的 反相 調整圖層會對整張影像套用互補色，而非僅針對單一顏色。這在製作負片效果時很實用，但無法用於隔離特定互補色。若要針對單一顏色，請改用搭配 上色 選項的 色相/飽和度 調整圖層。
避開這些錯誤，能確保你的互補色看起來既刻意又專業。若需要更進階的色彩工作流程，可探索 混色器 來混和顏色，或使用 漸層產生器 在互補色之間建立平滑過渡。
如何在實際專案中於 Photoshop 套用互補色
一旦使用該工具找到互補色，在 Photoshop 中套用就非常簡單。以下是在常見情境中的使用方法：
變更物件顏色
若要將物件（例如襯衫、標誌或圖示）的顏色變更為其互補色：
- 使用魔術棒工具（快速鍵：
W）或快速選取工具（快速鍵：A）選取物件。必要時可透過選取 > 修改 > 平滑來精細化選取範圍。 - 在圖層面板中點選調整圖示，建立新的色相／飽和度調整圖層。在屬性面板中勾選上色。
- 將互補色的十六進位代碼貼到色彩選擇器中，或輸入 RGB 值。調整飽和度與亮度滑桿以微調結果。
- 若要保留原始紋理，請在圖層面板中將調整圖層的混合模式變更為顏色。
為 UI 設計建立配色方案
對於按鈕、圖示或文字等 UI 元素，互補色可建立視覺層級：
- 使用互補色查詢工具來產生主要品牌色的對比色。
- 在 Photoshop 中，為 UI 元素（例如按鈕）建立新圖層。使用矩形工具（快速鍵：
U）繪製形狀。 - 開啟色彩選擇器並貼上互補色的十六進位代碼，將該顏色套用至形狀。
- 對於文字，請使用文字工具（快速鍵：
T），並將文字顏色設定為原始的十六進位代碼，以確保對比。使用顏色對比檢查工具來驗證對比比例。
使用互補色點綴強化照片
若要讓照片中的主體更加突出，請使用其主要顏色的互補色：
- 在 Photoshop 中開啟照片，使用顏色範圍工具（選取 > 顏色範圍）來隔離主要顏色（例如藍天）。
- 建立新的純色調整圖層，並貼上互補色的十六進位代碼。這會將互補色覆蓋在選取區域上。
- 降低圖層的不透明度以自然地融合效果（例如 20-30%）。
- 若要將效果限制在特定區域，請新增圖層遮色片，並使用黑色塗抹以隱藏不需要的互補色區域。
若要進行更複雜的編輯，可將互補色與其他顏色工具結合使用。例如，使用配色產生器來根據您的互補色建立三等分或類比配色方案，或使用漸層產生器在顏色之間建立平滑的過渡。
相關主題：在 Illustrator 中快速找到互補色。
若想更深入了解，請參閱如何計算兩個十六進位值之間的顏色差異。
若想更深入了解，請參閱使用 HTML 顏色名稱為 DTF 印刷找到精確的 CMYK 對應色。