一個為初學者設計的互補色查找工具，會將六位數十六進位代碼中的三個 sRGB 通道分別反相，方法是將每個通道值從 255 減去，產生一個確定性的數位反相結果，例如 #ff0000 會變成 #00ffff。這一句話就是這個瀏覽器工具背後的完整規則，在你信任它顯示的任何顏色之前，這也是你應該理解的規則。互補色查找工具接受一個十六進位顏色，像 3a7bff 這樣的六個字元，並將每一對視為 0 到 255 之間的一個數字。然後它會寫出 255 減去紅、255 減去綠、255 減去藍，再以十六進位數字輸出。結果背後沒有任何色彩設定檔轉換、沒有任何感知調整、也沒有任何隱藏模型。你所看到的就是一個跨越 sRGB 立方體中點的純位元組層級鏡像。初學者常常期望這類工具的行為像藝術家的色輪，但數位 RGB 反相遵循的是不同於 HSL 色相旋轉、油畫混色或 CMYK 分色的規則。確切理解這個工具做了什麼，以及它刻意不做什麼，是有信心使用它的第一步。
在螢幕上「互補」代表什麼意思
大多數讀者看到「互補色」這個詞時，心中已經浮現傳統色輪的圖像——紅色對應綠色、藍色對應橙色、黃色對應紫色。這個圖像源自藝術上對相反色相的概念，只要你是憑眼睛進行設計，它一直都很有用。然而，在螢幕上，「互補」可能代表好幾種不同的意思，取決於你使用的是哪一種色彩模型，而每個定義對同一個起始顏色會產生不同的第二個顏色。互補色查找工具刻意採用這些定義中最簡單的一種：位元組層級的 RGB 反相，將每個 8 位元通道以 255 減去其目前數值來取代。這個選擇在工具的頁面上有明確說明，因此它所回傳的任何答案都能以手工方式重現。
其他定義也存在，而且並沒有錯；它們只是解決不同的問題。下面的表格比較了最常見的幾個定義，讓初學者能看出數位反相在其中所處的位置。
| 定義 | 計算方式 | 典型用途 |
|---|---|---|
| 數位 RGB 反相（本工具） | 將每個 8 位元 sRGB 通道以 255 減去 | CSS 十六進位、快速反相調色盤 |
| HSL 色相旋轉 180 度 | 在 HSL 色輪上旋轉色相，保持亮度與飽和度 | 設計系統色輪、和諧色圖表 |
| 顏料減法混色 | 在紙上混合兩種顏料 | 傳統繪畫、插畫 |
| CMYK 分色 | 青色、洋紅色、黃色與黑色油墨的比例 | 印刷製作 |
| 感知對立色 | 在感知空間（例如 CIELAB）中尋找視覺對立關係 | 品牌調色盤、無障礙設計 |
請注意，數位反相是表中唯一完全在輸入位元組上運作的定義。這是初學者可以用計算機驗證、並在任何程式語言中重現的定義，這就是為什麼它是如此乾淨的第一步。
為什麼數位反相對初學者友善
位元組層級的反相容易上手，是因為其數學是透明的。你可以閱讀純文字版的公式，也可以用計算機驗證任何答案。對於仍在學習十六進位與 RGB 差異的初學者來說，這種清晰度比結果在藝術上的絕對正確性更重要。CSS 十六進位標記法已在 sRGB 色彩空間中標準化，W3C 在 CSS Color 4 規範中對此有所記載，而根據 MDN 參考資料，rgb() 函式在每個瀏覽器中的行為都相同。只要你留在那個 sRGB 方框內，255 減通道的規則每次都會給出可預期的答案。
以下是反相對初學者具有吸引力的幾個實際原因：
- 它完全在瀏覽器中執行，所以不需要安裝、不需要帳號、也沒有上傳。該工具明確聲明不會有任何顏色值離開你的裝置。
- 相同的輸入永遠回傳相同的輸出，因此你可以稍後重新執行計算以確認答案。
- 結果本身就是一個有效的六位數十六進位，可以直接貼到樣式表或設計 token 中使用。
- 它對應了許多影像編輯器中常見的快速鍵，例如「反相」或「負片」，因此答案與你在螢幕上看到的結果一致。
這些特性讓反相成為一個很好的教學範例：它展示了色彩模型與工具之間的差異，也讓底層的 RGB 立方體可以一次一個通道輕鬆探索。
如何使用互補色查找工具
以下是該工具預期的確切步驟。按照這些步驟操作，可以保持輸入格式簡潔，並讓你想反相的任何顏色都能重現結果。
- 在輸入欄位中輸入像 3a7bff 這樣的六位數十六進位代碼，或使用選色器從你已經喜歡的調色盤中取得顏色。該工具僅接受剛好六個十六進位數字，可選擇性地加上開頭的 #。
- 選擇「Find RGB complement」（尋找 RGB 互補色）動作來反相每個 8 位元通道。頁面接著會並排顯示來源色塊、反相色塊、標準化的小寫十六進位，以及十進位的 RGB 通道。
- 複製你需要的十六進位或 RGB 值。小寫十六進位是你應該貼到 CSS 中的內容，而十進位通道在你手動建立 rgb() 運算式時很有用。
- 將結果與已知的邊界情況進行驗證，例如紅色變成青色、黑色變成白色。如果邊界情況不通過，輸入很可能是一個簡寫或具名顏色，而該工具將會拒絕它。
- 請記住，「互補」還有其他有效的含義。如果反相不適合你的設計，切換到 HSL、顏料或感知定義，而不是責怪這個數學。
簡短地提醒限制：該工具會拒絕像 #abc 這樣的三位數簡寫、拒絕像 rebeccapurple 這樣的具名顏色、驗證每個通道都是 0 到 255 之間的整數，並且不執行任何網路請求或色彩設定檔轉換。請把答案視為一個起點，而不是最終的調色盤。
使用一個十六進位代碼的快速演算範例
為了讓規則更具體，讓我們對一個顏色執行反相並跟著算術走一遍。選擇 #3a7bff，這是一個帶點綠色的藍色，在現代 UI 設計中很常見。
將十六進位分割成三組位元組對：
- 3a — 十進位 58
- 7b — 十進位 123
- ff — 十進位 255
套用 255 減去每個通道的公式：
- 255 − 58 = 197
- 255 − 123 = 132
- 255 − 255 = 0
將十進位結果轉換回兩位數十六進位：
- 197 — c5
- 132 — 84
- 0 — 00
串接起來就得到 #c58400。互補色查找工具對於輸入 #3a7bff 所回傳的正是這個值，並標準化為小寫。這個單一範例說明了先前提出的所有主張：數學就是純粹的算術，結果是可重現的，而且來源與反相之間沒有任何感知上的魔法，只是在每個通道中點上的鏡像。
數位反相適用與不適用的場景
因為規則純粹是算術，數位反相非常適合已經使用 sRGB 的情境。CSS 實驗、快速圖示調色盤、儀表板模擬、資料視覺化草圖，以及設計審查中的高階組合，都能從這種速度與可重現性中受益。下面的表格列出了該工具的測試案例所驗證的邊界情況，讓你可以在想要確認新答案時，將它們作為錨點使用。
| 來源十六進位 | 來源 RGB | 反相十六進位 | 反相 RGB |
|---|---|---|---|
| #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 |
| #808080（中灰） | 128, 128, 128 | #7f7f7f | 127, 127, 127 |
上面的反相結果是該工具本身的邊界測試的一部分，因此它們也兼作內建的測驗題。記住紅變青、綠變洋紅、藍變黃、黑與白彼此互變，你大部分的健全性檢查就已經完成了。
然而，在以下幾個常見的初學者情境中，反相是錯誤的工具：
- 印刷製作。CMYK 分色與顏料混色是遵循不同規則的減法模型。螢幕顏色的數位反相無法預測墨水混合在紙上的呈現效果。
- 廣色域與色彩管理的資產。P3 與 Rec. 2020 顏色位於 sRGB 立方體之外，而該工具的輸入格式無法表示它們。
- 感知調色盤設計。CIELAB 中的視覺對立旨在追求眼睛的和諧，而非 RGB 立方體中的對稱。
- 無障礙決策。位元組層級的反相並不能保證文字的可讀性。在推出任何依賴可讀性的 UI 之前，請將實際的前景與背景配對通過 顏色對比檢查工具 進行檢驗。
如果你的任務符合上述其中一種情境，請切換到適當的具名色彩空間與測量方式，而不是將數位反相視為通用的互補色。
取得反相結果後的延伸應用
一旦你有了一個起始的反相結果，下一步自然就是延伸這個調色盤。三個對初學者友善的做法能幫助你把一個原始的位元組層級答案轉化為可用的東西。
首先，對你模擬圖中的每一個色塊執行反相，而不僅僅是一個。結果的集合通常能勾勒出一個快速的雙色系統，供你稍後加以調整。其次，將每一組配對貼到對比檢查工具中，過濾掉任何在內文文字上未通過 WCAG 的組合。第三，從反相與來源一起產生漸層或圖案，以查看這組配對在小尺寸下的呈現方式——在這類情況下，中間色調的行為與全通道極值不同。
這些是探索性的做法，而不是規則。請將數位反相視為互補色的快速、透明的第一稿，一份你可以使用色彩工具箱中的其他工具來驗證、擴充與精煉的草稿。
延伸閱讀：十六進位轉 RGB 入門：友善的逐步說明。
延伸閱讀：網頁設計的互補色查找工具：CSS 配色。