一個互補色尋找工具會以六位數十六進位色碼的數位 RGB 反向值作為回傳結果，其使用的公式是將每個 sRGB 通道以 255 減去原值，產生一個可在任何瀏覽器上重現的、逐位元組決定性的結果。這種數位互補色在數學上是精確的，範圍限定在傳統的 sRGB 位元組空間中，且不論在何處執行，行為都完全相同。正是這種可預測性，使它在 CSS 實驗、圖示配對、資料視覺化調色盤，以及快速的反向查詢中非常實用——也正是這種特性，使它有時會與「互補色」的其他定義混淆。需要色環上色相反向、油漆混色配方、CMYK 印刷對色，或知覺上對比色的設計師，會從不同的工具中得到不同的答案。數位反向值也並非無障礙的保證。一個顏色與其逐位元組反向值之間的對比，取決於原始數值，結果可能無法通過 WCAG AA 比例。若要判斷一組互補色是否能作為前景與背景使用，你必須明確地使用專門的對比檢查工具來測量對比，而不是假設這個互補色一定可讀。
「數位 RGB 互補色」實際上的意義
互補色尋找工具以一種特定的方式定義「互補」：也就是數位 RGB 的反向值。每個 sRGB 位元組——紅、綠、藍——會被視為 0 到 255 之間的整數，而工具會將每個通道以 255 減去原值代入。這中間沒有色相運算、沒有色彩模型轉換，也沒有任何知覺加權。輸出結果就是輸入的逐位元組相反值，並標準化為小寫六位數十六進位，可選擇是否加上前置井字號。
因為這個公式非常直觀，所以在邊界值上的行為完全可預測。純紅色 #ff0000 會變成青色 #00ffff，這是因為紅色的 255 減去 255 等於 0，而綠色與藍色的 255 減去 0 等於 255。純綠色會變成洋紅色 #ff00ff，純藍色會變成黃色 #ffff00。黑色 #000000 變成白色 #ffffff，而白色變回黑色——這兩個錨點彼此交換。中間範圍的顏色會呈現不對稱的拆分：一個稍微偏暖的綠色，例如 #2e7d32，並不會反轉成「對稱」的綠洋紅中點，因為 255 減去每個通道是獨立計算，而不是以單一偏移量處理。這種不對稱性是數學的特性，而非錯誤，也是這個結果如此容易重現的原因之一。
CSS Color 4 規格將這個 sRGB 位元組模型記載為網頁色彩函式的標準，而MDN 的 rgb() 參考資料也再次強調通道是介於 0–255 的整數。因此這個工具的輸出在產生的當下即可作為有效的 CSS 色彩值使用，無需任何捨入或描述檔轉換。
為什麼互補色組合不會自動具有無障礙可用性
在 WCAG 的定義中，無障礙可用性是以兩個顏色相對亮度之間的對比比例來衡量。根據 WCAG 2.2，AA 級的門檻是正常大小內文 4.5:1、大型文字 3:1，而 AAA 級則有更嚴格的 7:1 與 4.5:1 門檻。這些門檻都不取決於色相反向，也不取決於兩個顏色在任何色彩理論意義上是否為互補色。它們取決於前景與背景之間的亮度差異。
逐位元組反向值可以產生無法通過 AA 的組合、可以通過 AAA 的組合，以及介於兩者之間的所有情況，端視輸入而定。深色且高彩度的顏色傾向反轉為淺色且低彩度的顏色，並產生高亮度對比。中間灰階的輸入會反轉為另一個中間灰階，無論數學多正確，對比都很低。鮮豔的粉彩色可能會反轉為混濁的近黑色，雖然對比極高，卻會因色彩呈現、光暈效果與品牌契合度等其他因素而妨礙可讀性。重點在於，「互補」回答的是一個不同於「無障礙」的問題，這兩者不應混為一談。
這就是為什麼互補色尋找工具會並排顯示來源色與反向色色塊：目的是讓對比方向一眼就能看出來，而不是作為驗證。某一組配色是否適用於內文、按鈕標籤、置於淡色背景上的圖示，或圖表圖例，取決於對比比例、字型大小、字重以及檢視情境。這些是專用對比工具才能做的決定。
如何用三個步驟計算數位互補色
- 在輸入欄位中輸入六位數十六進位色彩，例如 #2e7d32，或使用色彩選擇器來挑選。簡寫格式如 #2e7 以及 CSS 命名色彩如「forestgreen」會被剖析器拒絕——輸入必須正好是六個十六進位數字，可選擇是否加上前置井字號。
- 選擇「Find RGB complement」動作。工具會讀取三個 sRGB 位元組，並以 255 減去其目前數值的方式反轉每一個。這中間沒有 HSL 旋轉、沒有知覺調整，也不會發送任何網路請求。
- 讀取顯示的十六進位與十進位 RGB 結果。輸出會標準化為小寫，且來源色色塊與反向色色塊會與原始通道一起顯示，讓你可以用肉眼確認運算結果。
整個操作都在本機端執行：剖析、反轉與顯示完全在瀏覽器中運行。不會上傳任何資料，工具也不會在 sRGB 與任何其他色彩空間之間進行描述檔轉換。如果你需要的是色相旋轉式的互補、知覺配對，或 CMYK 印刷對色，請使用專門為該定義設計的工具——數位反向值只是「這個顏色的互補色是什麼？」這個問題的其中一個有效答案。
將組合對照 WCAG 對比進行檢查
一旦你有了來源色與其逐位元組反向值，下一步就是測量對比。WCAG 2.2 將對比定義為 (L1 + 0.05) 除以 (L2 + 0.05)，其中 L1 與 L2 是較亮與較暗顏色的相對亮度。最終的比例才決定通過與否，而非色相關係。
| 等級 | 一般文字 | 大型文字（≥18pt 或 14pt 粗體） |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
將來源色與反向色都送進色彩對比檢查工具以取得比例。將 AA 視為內文用色的下限，將 AAA 視為最重要內容的目標。如果一組互補色在一般文字上未能通過 AA，你可以選擇將其中一邊調暗、將另一邊調亮，或挑選不同的基礎色——但不要以為換一種「互補」的定義就能挽救這組配色，因為 WCAG 門檻並不在乎色彩理論。
對於需要從一開始就調校整組調色盤以確保對比的設計師來說，無障礙對比調色盤產生器會從調色盤端（而非反向端）說明同樣的考量。將對比視為一個獨立的驗證步驟，而非互補運算的副作用，這正是無障礙介面與只是色彩豐富但讓使用者失望的介面之間的差別。
實例演練：反轉 #2E7D32
以單一輸入為例，逐步走過公式。來源色是 #2e7d32，一個深森林綠。三個位元組剖析如下：
- 紅：0x2E = 46
- 綠：0x7D = 125
- 藍：0x32 = 50
套用每個通道以 255 減去的規則：
- 255 − 46 = 209
- 255 − 125 = 130
- 255 − 50 = 205
將三個結果序列化回兩位數小寫十六進位：209 為 D1、130 為 82、205 為 CD。互補色為 #d182cd，一個柔和的洋紅薰衣草色。工具會同時顯示兩個色塊、來源十六進位、反向十六進位，以及十進位通道 (209, 130, 205)，因此上述運算可以與實際渲染結果比對確認。
#2e7d32 與 #d182cd 的搭配是否具有無障礙可用性，取決於兩者之間的比例，而非反轉步驟。一個顏色深且彩度高，另一個淺且彩度低，因此亮度差距很可能足以通過 WCAG AA 的一般文字標準——但要確切知道，唯一的方法就是將兩個數值送進色彩對比檢查工具並讀取比例。將反轉視為調色盤的初步草圖，接著加以驗證。
數位反轉在無障礙設計中的不足之處
位元組反轉能妥善解決一個狹隘的問題：產生 sRGB 位元組值的決定性、可重現反向值。它無法取代設計師常與之混淆的其他任務。HSL 互補色會將色相旋轉 180°，同時保持亮度與彩度不變，這通常會比位元組反轉產生更和諧的搭配。油漆互補是在調色盤上混合對立顏料，結果取決於實際使用的顏料，而非通道運算。CMYK 印刷對色則受油墨行為與色域支配，這也是為什麼 CMYK 轉換及其反向操作是由專用工具而非位元組公式來處理。現代色彩科學中使用的知覺對比，會挑選 CIELAB 或 LCh 空間中視覺上最遠的點——在無障礙為目標時很有用，因為知覺距離比位元組反轉更能反映感知的亮度差異。
| 定義 | 互補色的選擇方式 | 典型範圍 |
|---|---|---|
| 數位 RGB 反轉 | 每個 sRGB 位元組以 255 減去 | CSS、圖示、螢幕 |
| HSL 色相旋轉 | 色相 +180°，保持亮度與彩度 | 色環和諧 |
| 油漆混色 | 調色盤上的對立顏料 | 實體油漆 |
| CMYK 印刷 | 對立油墨組合 | 印刷製作 |
| 知覺對比 | CIELAB 或 LCh 中的最遠點 | 品牌與無障礙 |
對於可讀性優先的介面，請將互補色尋找工具視為快速的反向草圖。對於必須在內文、UI 控制項、圖表與品牌介面上都站得住腳的生產用調色盤，請從一開始就以無障礙對比為考量建立調色盤，並在上線前用專用對比檢查工具逐一驗證每組配色。數位互補色是工具組中的一項工具，而不是萬能答案。
延伸閱讀：無障礙對比預檢工作流程的十六進位轉 RGB。