在 Adobe Photoshop 中，互補色是任何六位數十六進位色碼精確的 8 位元 RGB 反向值：紅、綠、藍每個色版從 0 到 255 的數值，都會被替換成 255 減去目前值的結果。紅色 #ff0000 會變成青色 #00ffff，綠色 #00ff00 會變成洋紅 #ff00ff，藍色 #0000ff 會變成黃色 #ffff00。黑色 #000000 與白色 #ffffff 則單純互換。這種逐位元組的反轉，正是 Photoshop 的「影像 > 調整 > 負片效果」指令對每個像素執行的相同運算，也是在不開啟桌面應用程式的情況下，從單一十六進位值計算出結果最快的方法。Complementary Color Finder會對你輸入或選取的任何六位數十六進位顏色套用這個公式，接著顯示兩個色塊、正規化後的小寫十六進位值，以及反向結果的十進位 RGB 色版數值。因為這項運算在你的瀏覽器中執行，且輸出結果是精確的，你可以在正式定案設計之前，先預覽某個品牌色、UI 元素或圖層色塊在 Photoshop 中的互補色。
在 Photoshop 的 RGB 色彩空間中，「互補色」代表什麼意思
對於面向螢幕的文件，Photoshop 預設使用 sRGB，而這個程式最常見的「互補色」，正是來自定義 CSS 十六進位顏色的同一套模型。每個像素都持有三個 8 位元色版：紅、綠、藍，其中 0 代表該色版完全沒有，255 代表最大值。在這個定義下，互補色的建構方式是反轉每個色版：0 變成 255，255 變成 0，介於中間的任何值，則會變成以 128 為中心的鏡像值。這是一種確定性、可重現的運算，W3C 針對 CSS Color 4 的文件記載了這套規則，MDN 針對 CSS rgb() 語法的說明也是如此。
「互補」這個詞在不同情境下可能代表不同意思，這也是為什麼 Photoshop 設計師有時會從一般的色彩理論網頁上得到互相矛盾的答案。最常見的四種定義如下：
| 定義 | 互補色的建構方式 | 典型用途 |
|---|---|---|
| 把每個 0-255 的色版替換成 255 減去該值 | Photoshop 負片效果、CSS 實驗、資料視覺化 | |
| 將色相旋轉 180°，保留明度與飽和度 | 色輪選色器、平衡的 UI 設計 | |
| 混合位於畫家色輪上相對兩側的兩種顏料 | 傳統繪畫、水粉、油畫 | |
| 使用相反的油墨疊加行為 | 印前作業與印刷製程 |
8 位元 RGB 反向值，正是 Photoshop 對單一實色圖層執行「負片效果」時所產生的結果，也是大多數設計師在搜尋自己螢幕上正在使用的品牌十六進位色碼的「互補色」時，實際想要的答案。另外三種方法，可能會得出完全不同的十六進位值，因此你所選用的工具，必須符合你專案實際需要的定義。
為什麼 Photoshop 使用者要從十六進位色碼查找互補色
典型的 Photoshop 工作流程，通常是從一個十六進位色碼開始，而不是從檢色器對話框開始。品牌規範文件通常提供十六進位值。網頁設計師的 Figma 檔案匯出的也是十六進位值。一段 CSS 程式碼片段、一個圖示函式庫，或客戶提供的截圖，都可能給你一串六位數的字串，卻沒有任何前後脈絡。一旦你拿到這串字串，通常會想立刻找出它的互補色，好用來製作雙色調圖示、標註框、hover 狀態，或縮圖背景。
Photoshop 本身確實可以透過反轉一個純色圖層來得出相同的答案，但這麼做代表要建立一份新文件、把十六進位值貼進檢色器、填滿一個圖層、套用「影像 > 調整 > 負片效果」，最後再用滴管工具取樣結果。對單一顏色來說，這整套流程要花上好幾分鐘。直接從十六進位色碼查找互補色，能讓你直接進入設計階段、手邊已經有了第二種顏色，而你在 Photoshop 中真正需要開啟的檔案，也只需要動一次手。
如何從十六進位色碼在 Photoshop 中找出互補色
- 在瀏覽器分頁中開啟 Complementary Color Finder。
- 把你的六位數十六進位色碼輸入或貼進顏色欄位，前面加不加 # 都可以。輸入欄位恰好接受六位十六進位數字，並會把輸出正規化為小寫。
- 如果你沒有記住十六進位值，可以使用內建的顏色選擇器；只要欄位中出現有效的數值，色塊就會立即更新。
- 點一下「Find RGB complement」以反轉每個 sRGB 色版。這款工具會把每個紅、綠、藍數值都替換成 255 減去原始值。
- 並排檢視來源色塊與反向色塊，以及正規化後的小寫十六進位值，與結果的十進位 RGB 色版數值。
- 複製顯示出來的十六進位值或 RGB 三元組，接著直接貼進 Photoshop 檢色器的 (#) 欄位，或色票面板中。
因為這個公式沒有任何設定、描述檔或四捨五入處理，同一組六位數輸入，永遠會產生同一組六位數輸出。正是這種確定性，讓這個結果對圖示、按鈕狀態，以及其他小型、重複使用的 Photoshop 元素來說相當可靠。
把結果貼進 Photoshop 的檢色器中
一旦你取得互補色的十六進位值，切換回 Photoshop，並點一下工具列中的前景色色塊，開啟檢色器。在右下方的 # 欄位中輸入這組六位數的值。Photoshop 接受與 CSS 相同的語法，因此 #00ffff 與 00ffff 都可以使用；開頭的井字號是選填的。按下 Enter 後，檢色器會確認新的前景色並更新色塊，之後你的下一筆筆刷、形狀填色，或圖層效果，都會使用你在瀏覽器中計算出來的反向色。
對於圖層樣式，你可以直接把互補色輸入到「斜角和浮雕」、「漸層覆蓋」、「外光暈」或「顏色覆蓋」中任何一個色標裡。這些對話框各自都有自己的檢色器，同樣接受相同的 # 欄位輸入方式。這是讓 Photoshop 檔案與已經公開發布十六進位值的網頁設計系統維持一致最乾淨的做法，因為輸入值逐位元組完全相同，保證了色塊與你在瀏覽器中看到的顏色一模一樣。
當數位反向值不是正確的互補色時
逐位元組的 RGB 反向值雖然精確，但並不總是最有用的互補色。有三種情況需要改用不同的定義：
- 無障礙。中灰色的 RGB 反向值可能通過對比度檢查，但飽和度高的顏色的反向值往往無法通過。在把這組配色用在文字與背景之前，務必先用Color Contrast Checker測試一次。
- 印刷。Photoshop 的 CMYK 模式，以及任何廣色域文件，都透過不同的運算方式處理互補色。如果最終成品是印刷輸出，請先把十六進位值轉換成 CMYK，再於該色彩空間中檢視反向值。
- 感知和諧度。HSL 色相旋轉 180° 通常比位元組反向值，能產生視覺上更平衡的配色組合，尤其是對於柔和的品牌色而言。當目標是和諧感而非數學上的相對時，請使用色輪選色器。
Complementary Color Finder 會在頁面上明確標示它所採用的 RGB 定義，讓你隨時都清楚自己拿到的是哪一種互補色，而正是這種明確的範圍界定，讓它每一次都能回傳精確、可重現的答案。
常見十六進位色碼及其 RGB 反向值
Photoshop 設計師在需要快速配色時，通常會使用一小組固定的基準色。下表列出了你最常遇到的色碼，及其逐位元組的反向值。可以把它當成快速核對用的參考，而清單以外的任何顏色，則建議直接使用這款工具查詢。
| 來源十六進位值 | 來源角色 | RGB 反向值 | 反向角色 |
|---|---|---|---|
| 純紅色 | #00ffff | 純青色 | |
| 純綠色 | #ff00ff | 純洋紅色 | |
| 純藍色 | #ffff00 | 純黃色 | |
| 白色 | #000000 | 黑色 | |
| 中灰色 | #7f7f7f | 鏡像灰色 | |
| 品牌藍 | #cc9933 | 暖琥珀色 |
中灰色揭露了一個重要的細節：#808080 的反向值是 #7f7f7f，並不是同一個灰色。每個色版都會以 127.5 為中點翻轉，因此即使是看起來「平衡」的顏色，也會朝相反方向偏移一個刻度。正是這種不對稱性，說明了為什麼設計師要在 Photoshop 中實際測試配色，而不是單憑直覺判斷；也正是為什麼當品牌色不是純原色時，一款確定性的計算工具，會比心算更可靠。
對 Photoshop 工作流程來說，最乾淨的順序是：先確認十六進位值，透過計算工具算出結果，複製反向值，貼進檢色器，接著在實際版面中驗證這組配色。這個四步驟的循環，能讓你文件中的顏色，與你設計系統頁面上的數值保持一致，也能避免你想在 Photoshop 檢色器中憑肉眼判斷互補色的誘惑——畢竟在經過校正的顯示器上，視覺回饋有時反而會誤導你。
如果你還在權衡選項，Gradient Generator Chart: Map Color Stops to CSS Code對此有詳細說明。
如果你還在權衡選項，Complementary Color Finder and Accessibility Contrast對此有詳細說明。