任何六位數十六進位色彩的數位 RGB 補色，都是將每個 8 位元 sRGB 通道以其原始值用 255 減去後取得，僅此而已。紅色 (#ff0000) 的反色是青色 (#00ffff)；綠色 (#00ff00) 的反色是洋紅色 (#ff00ff)；藍色 (#0000ff) 的反色是黃色 (#ffff00)；黑色 (#000000) 與白色 (#ffffff) 互換，因為每個通道都會翻轉。由於每個通道都被視為 0 到 255 之間的整數，運算結果是確定性的、逐位元組的數位反色，沒有隱藏的色彩模型假設、沒有感知往返的轉換，也沒有色彩描述檔轉換。無論是每一個 CSS 引擎、每一個能存取原始通道值的影像編輯器，還是每一個在同一組六位數十六進位上執行此公式的瀏器，都會得出相同的答案。這種可重現性就是它的全部重點：當設計師、開發人員與印刷人員被同時詢問 #3a7bff 的補色是什麼時，逐位元組的 RGB 定義只會產生唯一一個答案 — #c58400 — 無論他們使用的是哪一種應用程式、作業系統或選色器。「補色」的其他定義存在且會產生不同的答案；以下章節將說明這個特定公式的實際作用、它在邊界處的行為方式，以及在哪些情境下它不再是合適的工具。
當有人搜尋某個 RGB 值的補色時，他們往往同時想到好幾種不同的定義。傳統的色環將補色定義為位於正對面的兩種顏料 — 紅對綠、藍對橘、黃對紫。HSL 色彩模型將補色定義為將色相旋轉 180 度，同時保持亮度與飽和度不變。印刷工作流程使用的是 CMYK，其中互補油墨在紙上減去光線，配對邏輯取決於網點擴大與實際的印刷機描述檔。而諸如 CIELAB 或 OKLab 等感知色彩空間，則追求視覺上的對比而非數值上的反相。逐位元組的 RGB 補色不屬於上述任何一種。它是對螢幕能顯示的整數通道所進行的純粹數位運算。
255 減去每個通道的公式之所以是個有用的起點，正是因為它毫不含糊。如果你撰寫 CSS、產生 SVG 圖示，或手動設計資料視覺化的配色，知道 #3a7bff 的反色是單一確定性的十六進位值 — 不經描述檔轉換、不靠感知判斷、無需四捨五入 — 就能省下日後的爭論。每個現代瀏覽器都已將色彩表示為每通道 8 位元的 sRGB 三元組，因此數位反色就是你螢幕實際上會顯示的反色。互補色彩尋找器正是實作了這個公式：它將你的六位數十六進位解析為介於 0 到 255 之間的紅、綠、藍整數，計算每個通道的 255 減值，然後同時顯示來源色塊與反色色塊，並附上正規化為小寫的十六進位輸出，以及結果的十進位 RGB 通道值。
RGB 補色公式
數位 RGB 補色背後的公式只有一行邏輯：將輸入解析為三個整數通道，將每個通道從 255 中減去，然後序列化結果。W3C CSS Color 4 規範說明了 CSS 如何將 sRGB 通道視為正好在 0–255 範圍內的整數，這就是為什麼逐位元組的公式會是任何螢幕配色的自然選擇。W3C CSS Color 4 rgb() 參考文件詳細記載了這個整數模型，而MDN rgb() 色彩值參考文件也確認，在以 8 位元值表示時，通道永遠會被限制為 0–255 範圍內的整數。
這項定義有三個吸引人的特性。首先，它速度很快：每個通道只做一次減法，無需在 HSL 或 CMYK 之間往返。其次，它可逆：將反色的十六進位值再次代入同一公式會得到原本的色彩，因為對於 0–255 範圍內的每個整數 x，255 − (255 − x) = x。第三，它具可攜性：任何懂得此公式的工具都能一模一樣地重現結果，包括你瀏覽器中的互補色彩尋找器、一份只有三個儲存格的試算表，或一個 CSS 前處理器樣板。一旦改用感知或 HSL 的定義，你就會失去這種可性，因為兩者都依賴會因工具而異的額外輸入（白點、描述檔、色域映射）。
如何找出十六進位碼的互補 RGB 色彩
這個程序短到足以記住，而互補色彩尋找器會將每一步自動化，讓你能從任何六位數十六進位輸入產生精確的逐位元組反色。
- 將一個六位數的十六進位色彩（不論是否帶有前置的 #）輸入到色彩輸入欄，或從選色器中挑選一個色塊。
- 選擇 Find RGB complement（找出 RGB 補色）。工具會將十六進位解析為 0–255 範圍內的三個整數通道，並計算每個通道的 255 減值。
- 讀取結果。頁面會顯示來源色塊、反色色塊、正規化的十六進位，以及補色的十進位 RGB 通道。
- 複製十六進位或十進位 RGB 輸出，以便在 CSS、SVG、JavaScript 或設計筆記中使用。如果你計畫將這組結果作為前景與背景的搭配，請在發布前將兩個色彩都代入色彩對比檢查工具，以確認該組合確實符合你的無障礙設計目標。
此工具只接受剛好六個十六進位數字、將輸出正規化為小寫、拒絕簡寫表示法與 CSS 色彩名稱，並在解析與反相過程中不發出任何網路請求，也不進行描述檔轉換。這代表你在螢幕上看到的逐位元組反色，將會與出現在你樣式表中的反色完全一致，不會有色彩管理應用程式悄悄重新解讀你輸入而產生的意外。
逐步示範：反相 #3a7bff
為了讓公式更具體，以十六進位色彩 #3a7bff 作為輸入。將它拆成三組位元組對：3a、7b 和 ff。使用十六進位算術將每組轉換為其對應的十進位整數：
- 3a₁₆ = (3 × 16) + 10 = 48 + 10 = 58
- 7b₁₆ = (7 × 16) + 11 = 112 + 11 = 123
- ff₁₆ = (15 × 16) + 15 = 240 + 15 = 255
對每個通道套用 255 減值：
- 紅色：255 − 58 = 197
- 綠色：255 − 123 = 132
- 藍色：255 − 255 = 0
將新的十進位通道轉回兩位數的小寫十六進位：
- 197₁₀ = (12 × 16) + 5 = 192 + 5 = c5
- 132₁₀ = (8 × 16) + 4 = 128 + 4 = 84
- 0₁₀ = 00
因此 #3a7bff 的補色為 #c58400，其十進位 RGB 為 (197, 132, 0)。你可以透過互補色彩尋找器在幾秒鐘內確認這項結果 — 無需描述檔、無需四捨五入、無感知偏差，只有套用於整數通道的公式本身。
公式可預測處理的邊界情況
由於此演算法完全是對整數的算術運算，每個邊界都是固定且可重現的。此工具驗證所用的測試案例涵蓋了 8 位元 sRGB 色立方的所有極端值，包括三原色頂點、黑與白兩極，以及中點的不對稱性。
| 輸入十六進位 | 通道 (R, G, B) | 補色十六進位 | 通道 (R, G, B) |
|---|---|---|---|
| #ff0000 | (255, 0, 0) | #00ffff | (0, 255, 255) |
| #00ff00 | (0, 255, 0) | #ff00ff | (255, 0, 255) |
| #0000ff | (0, 0, 255) | #ffff00 | (255, 255, 0) |
| #000000 | (0, 0, 0) | #ffffff | (255, 255, 255) |
| #ffffff | (255, 255, 255) | #000000 | (0, 0, 0) |
這些邊界測試案例是再簡單不過的基本健全性檢查。它們確認此公式在 sRGB 立方體的每個角落都保持一致，並且三原色（紅、綠、藍）會反相為你預期從螢幕光中得到的二次色（青、洋紅、黃）。它們同時也確認此運算是自身的反函式 — 將 #00ffff 再代入同一工具會回傳 #ff0000，因為此公式在合成運算下是對稱的。
RGB 反相與其他「補色」定義的比較
由於「互補」這個詞帶有不只一種含義，將逐位元組的 RGB 反色與你可能在其他地方見過的替代方案進行對照會很有幫助。下表以質化方式概述了它們之間的關係；針對你輸入的十六進位所得到的精確值，則需透過對應的工具以相同輸入分別執行各方法取得。
| 方法 | 如何定義「補色」 | 典型使用情境 | 是否與逐位元組 RGB 反色相符？ |
|---|---|---|---|
| 逐位元組 RGB 反相 | 每個 8 位元 sRGB 通道以 255 減去 | CSS、SVG、螢幕配色、圖示 | — |
| HSL 色相旋轉 180° | 相同的亮度與飽和度，色相反轉 | 色環圖、柔和配色產生 | 極少相符 — 通常不同 |
| 傳統料色環 | 在藝術家色環上正對面的顏料 | 美術、水粉、油畫 | 極少相符 — 為減法混色 |
| CMYK 分色 | 基於光線減去原理的互補油墨配對 | 平版印刷、印刷機校正 | 極少相符 — 取決於描述檔 |
| 感知色彩空間 (CIELAB、OKLab) | 視覺上的對比，而非位元組反相 | 無障礙設計、品牌系統 | 極少相符 — 採用不同指標 |
如果你需要 HSL 風格的補色 — 例如要與 Illustrator 中選色器色環的結果對齊 — 請將你的十六進位轉換為 HSL，將色相旋轉 180 度，然後再轉回十六進位。若要取得感知上的對比，請在 CIELAB 或 OKLab 中計算候選色彩之間的 ΔE，並選擇最近的對比色，而非依賴位元組反相。為任何十六進位碼找出補色指南並排說明了這些替代定義，讓你能從中挑選最符合你實際目標的方案。
Practical Uses and Where the RGB Inverse Falls Short
The byte-wise complement is a solid fit for CSS experiments, quick inverse palettes, icon and chart accents, and data-visualization contrasts where you want a deterministic, reproducible answer. It also works well as a one-click sanity check while you are sketching in code, because the answer comes out identical across browsers, code editors, and design tools that expose raw channel values.
But an inverse is not automatically readable, harmonious, accessible, or brand-appropriate. Two colors that are exact byte-wise complements can still fail WCAG contrast for body text, look garish in a printed document, or feel visually unbalanced in a real interface. For foreground and background pairs, always test the actual combination with a color contrast checker before publishing, and pick a different pair if the contrast ratio misses your accessibility target. For print production, wide-gamut color, color-managed assets, or any perceptual palette decision, use an appropriate named color space and measurement rather than treating the digital inverse as a universal complement.
All parsing, inversion, and display happen in the browser, so no color value is uploaded or stored when you use the Complementary Color Finder. The exact formula — 255 minus each sRGB channel, applied to exactly six hexadecimal digits, normalized to lowercase — is fully reproducible by hand, by the tool, and by any CSS engine that follows the integer-channel model documented by the W3C, which is what makes this definition the most portable across browsers, editors, and design tools.
If you're weighing options, How to Convert Hex to RGB: A Practical Step-by-Step Guide covers this in detail.