適用於網頁設計的互補色尋找工具會產生一個六位數十六進位色碼的數位 RGB 反相值，方式是將每個 8 位元 sRGB 通道以其原始值減去 255 來取代，所以紅色 (#ff0000) 會變成青色 (#00ffff)、綠色 (#00ff00) 會變成洋紅色 (#ff00ff)、而藍色 (#0000ff) 會變成黃色 (#ffff00)。設計師在想要一個可預期的對比色來測試 CSS 變數、按鈕懸停狀態、首頁區塊漸層、徽章配色或狀態指示器時，就會使用這類尋找工具，而且他們希望答案是來自一個清楚寫明的公式，而不是模糊的「色輪上對面」的直覺。這個工具的合約範圍很窄也很誠實：它反相的是位元組，並不會旋轉色相，也對和諧度或對比度不做任何承諾。這個範圍正好就是為什麼網頁設計師可以放心用它來做快速實驗，因為每個答案都能用 255 - R、255 - G、255 - B 親手重現，而其他每一種互補色的定義（HSL 色相旋轉、油墨減法混色、CMYK 分色、感知對比）都明確排除在範圍之外，並且會在頁面上標示出來。
在網頁設計情境中「互補」一詞的真正含義
「互補」這個詞被過度濫用了。在日常對話中，設計師常常說「互補色」是指「在傳統色輪上對面的顏色」，但這個色輪本身是基於與瀏覽器實際繪製方式並不相符的假設所建立的。CSS 中使用的 sRGB 色輪是在 HSL 空間中旋轉色相，油墨色輪是減去顏料，印刷工作流程會轉換成 CMYK 分色，而感知色輪則是位於 CIELAB 空間中，試圖平衡視覺上的對比。對於同一個十六進位輸入，每種定義都會產生不同的答案。互補色尋找工具只採用一種定義並在頁面上寫明：逐位元組的 RGB 反相。在網頁設計中，這個承諾很重要，因為 CSS rgb() 值是 8 位元 sRGB 數字，而反相運算也正好存在於同一個數字空間中。如果你把品牌色設為 #2c5fff，然後用色相輪工具挑了 #d3a000 作為「互補色」，那麼你的懸停狀態在 Chrome、Safari 和 Firefox 中的顯示，很可能會與工具預覽中所看到的不一樣。透過堅持使用每個位元組減去 255，工具給出的結果是當下就能在數學上重現的，這正是網頁設計師在為介面建立測試配對時通常想要的特性。
數位 RGB 反相的計算方式
這個公式就是三次減法，僅此而已。以一個像 #805ac8 的六位數十六進位色碼為例，將它解析成十進位通道 R=128、G=90、B=200，然後計算 255 - 128 = 127、255 - 90 = 165、255 - 200 = 55。把結果再序列化成兩位數小寫十六進位：127 變成 7f、165 變成 a5、55 變成 37，最終結果就是 #7fa537。你可以把這個運算再對結果做一次，來還原來源，這是一個很實用的健全性檢查：255 - 127 = 128、255 - 165 = 90、255 - 55 = 200，再次得到 #805ac8。這個工具在本地端處理這個解析、反相和序列化的過程。它只接受剛好六個十六進位數字，可選擇性地加上前綴 #、會將輸出標準化為小寫、會拒絕像 #fff 這樣的簡寫形式以及像 rebeccapurple 這樣的具名關鍵字，並驗證每個通道都是有效的整數。因為這個計算純粹是 8 位元整數上的算術運算，所以不會進行任何色彩設定檔轉換或色域映射，這在目標是快速的 CSS 實驗而非印刷或廣色域決策時是合適的。
在網頁設計專案中尋找互補色
互動流程刻意設計得很短。每一個步驟都對應到頁面上的一個控制項以及工具會保持可見的一項狀態，讓設計師在貼到樣式表之前，能一眼確認輸入和輸出。
- 在桌機或行動瀏覽器的分頁中開啟互補色尋找工具。
- 在十六進位欄位中輸入或貼上一個像 #2c5fff 的六位數十六進位色碼，或者用顏色選擇器以視覺方式挑選顏色。
- 確認顯示在欄位下方的來源色塊、標準化後的小寫十六進位色碼，以及紅、綠、藍的十進位通道值。
- 選擇「尋找 RGB 互補色」動作，用 255 減去每個 8 位元通道的值來進行反相。
- 讀取顯示在來源色塊旁邊的結果色塊、新的小寫十六進位色碼，以及新的十進位 RGB 通道值。
- 複製結果十六進位色碼，用於 CSS 自訂屬性、SVG 填色或 SCSS 變數；或是複製 RGB 三元組，用於 rgb() 函式內部。
- 在你實際的介面中開啟這個配色組合，然後在上線前用色彩對比檢查工具驗證前景與背景的對比度。
步驟 2 強制執行輸入合約（六位數，可選 #）、步驟 4 是唯一的轉換，而步驟 6 和 7 是設計師判斷唯一介入的地方。若需要常見配對的實作範例，如何從十六進位色碼找出互補色這份逐步教學涵蓋了更多範例輸入的相同概念。
反相配對能派上用場的網頁設計情境
不同情境需要不同的互補色定義。挑選符合你目標的那一列，然後選擇合適的工具。下表刻意採用定性描述：相對方法之間的關係比原始數字更重要，任何特定的對比比率都應該用專門的檢查工具，針對實際的十六進位配對再做確認。
| 情境 | 「互補」應該代表什麼 | 為什麼數位反相有幫助 |
|---|---|---|
| 首頁漸層與行動呼籲按鈕 | 在同一個 sRGB 數字空間中具有高對比度的對比色 | 每個通道減 255 的數學運算能讓兩個色彩節點在螢幕上保持相同的位元深度 |
| 淺色主題基底上的深色模式強調色 | 可預期的位元組對調，讓主題切換是可預測的 | 因為通道都是整數，無論主題為何，反相結果都一致 |
| 狀態徽章（成功、警告、錯誤）的色調 | 與來源顏色明顯不同，不需猜測色相 | 反相保證了與基礎色之間每個通道的最大距離 |
| CSS 自訂屬性的基礎架構 | 可以在規格文件中寫下的可重現十六進位配對 | 反相結果只需透過減法就能親手重現 |
| 攝影背景上的圖示描邊 | 在壓縮後仍能保留的感知對比 | 可信度較低，因為感知空間的工具通常更合適 |
| 印刷色樣或 CMYK 打樣 | 目標色域中的減法混色 | 用錯工具，因為 CMYK 需要的是具備設定檔感知能力的轉換 |
前四列有一個共同特徵：答案是由 CSS、SVG 或其他 8 位元通道的使用者來取用。最後兩列描述的是位元組反相完全不適合作為互補色的情境，應該改用其他工作流程。
為什麼反相配對不等於無障礙配對
互補色尋找工具回傳的是通道空間中的對比色，而不是對比空間中的安全配對。兩種顏色可能位於 0 到 255 範圍的兩端，卻仍然無法通過 WCAG 文字對比標準，因為驅動對比比率的相對亮度是通道的加權總和，而不是它們的原始距離。深色海軍藍搭配它的逐位元組反相色仍然可能把內文文字埋沒，而鮮豔的強調色搭配它的反相色仍然可能讓小標籤糊掉。對於任何要上線的 UI 決策，請把實際的十六進位配對跑過對比工具，根據你所承諾的門檻來讀取比率。若想更深入了解如何將反相與專門的比率測試搭配使用，互補色尋找工具與無障礙對比這份指南會逐步說明具體的配對與其測量分數。請把反相視為候選答案而非最終裁決，並把對比決策與調色盤決策分開處理。
在 CSS、印刷和感知工作中需要留意的限制
互補色尋找工具是一個單一用途的工具，而它的限制正是它值得信賴的原因之一。它不會上傳任何十六進位值、不會發出網路請求、也不會套用色彩設定檔轉換。它只接受帶有可選前綴 # 的六位數十六進位色碼、會將輸出標準化為小寫、拒絕簡寫形式與具名色彩，並將每個通道視為 0 到 255 的整數。在這個範圍之外，答案就會改變。HSL 的互補色是旋轉 180 度並保留亮度與飽和度，對於中等飽和度的顏色來說，結果可能與位元組反相相差甚遠。傳統油墨的互補色採用減法顏料混色，在紙上產生的結果會比 RGB 螢幕值所暗示的更暗。CMYK 的互補色需要具備設定檔感知能力的轉換，這比較接近 RGB 到 CMYK 的工作流程，而不是單純的減法。CIELAB 中的感知互補色追求的是視覺對比而非通道對比，並且會受到觀察者與白點的影響。對於 CSS 實驗、快速反相調色盤、圖示、資料視覺化以及高階組合測試來說，位元組反相是合適的工具。對於印刷製作、廣色域素材、色彩管理工作流程以及無障礙決策，請把反相結果與專門的對比工具、具備色彩管理的色樣庫，或感知調色盤產生器搭配使用，而不是把數位反相當成萬用的答案。當你需要確認 rgb() 輸出的 CSS 語法時，W3C CSS Color 4 規格文件中記載的整數通道模型，正是這個工具所實作的模型。