數位互補色是指六位數十六進制值的精確逐位元組 RGB 反相，計算方式是將每個 sRGB 通道以 255 減去其原始值來取代。互補色查找工具 (Complementary Color Finder) 將此規則套用於任何六位數十六進制輸入，並回傳對應的十六進制值、十進制通道讀數，以及並排顯示的色塊，讓您在套用至樣式表之前能先查看該配色組合。由於此運算是基於原始位元組，而非色相角度或知覺距離，因此結果在瀏覽器、設計工具和程式碼編輯器之間皆可重現，無需任何色彩設定檔轉換或網路呼叫。這種確定性正是讓數位反相在快速的 CSS 實驗、配色模擬、圖示和資料視覺化強調色等場景中實用的原因——當您需要為既有顏色找到一個已知、傾向相反的搭配色時。該工具會在頁面上標示其 RGB 定義，因此您可以放心複製的每個答案皆符合此處所述的規則。
「互補」在 8 位元數位 RGB 中的意義
在此工具所遵循的狹義定義中，互補意指對每個傳統 sRGB 通道進行位元組反相：255 減去紅、255 減去綠、255 減去藍。讀數為 0 的通道會變成 255，讀數為 255 的通道會變成 0，而讀數為 128 的通道會變成 127。由於運算以 128 為中心對稱，位於中灰較暖側的通道會產生較亮的反相，位於較冷側的通道則會產生較暗的反相。輸出會正規化為小寫六位數十六進制，並可選擇加上前導井字號 (#)，通道則會驗證為 0 到 255 範圍內的整數。簡寫標記法和具名顏色會遭到拒絕，這讓公式免於處理像 #f00 展開為 #ff0000 這類邊界情況。該工具僅接受六位十六進制數字，不發出任何網路請求，並在瀏覽器中完成解析、反相和顯示作業。沒有任何顏色值會被上傳或儲存，因此無論是機密的配色輸入還是公開的品牌色碼，整個工作流程皆安全無虞。
常見十六進制輸入的互補色查找工具範例
八個內建範例固定了此工具的涵蓋範圍，並且能整齊對應到您最可能貼上的輸入。純原色會反相為教科書上的二次色，純黑與純白互換位置，而混合的十六進制數字則展示了公式在實際設計中會遇到的通道上的效果。下表摘要列出代表性輸入的位元組反相結果。您可以將每個輸入通道從 255 減去，再將結果轉換回兩位小寫十六進制，藉此重現每一列。
| 輸入十六進制 | 輸入 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 | 中灰到接近中灰 |
| #336699 | 51, 102, 153 | #cc9966 | 204, 153, 102 | 鋼藍到暖褐 |
| #abcdef | 171, 205, 239 | #543210 | 84, 50, 16 | 粉藍到深棕 |
中灰那一列最清楚地顯示出 128 周圍的不對稱性：128 會反相為 127，絕不會回到 128。粉藍那一列說明了高通道值的亮色來源如何塌縮為低通道值的大地色，而鋼藍那一列則落在設計師經常取用作強調色的暖褐。這些輸出皆非來自色相輪或知覺模型，而是直接來自該工具在頁面上所標示的位元組規則。
鋼藍色 #336699 的逐步推導範例
一個具體的逐步推導能讓規則一目瞭然。以十六進制代碼 #336699 為例，這是儀表板和圖表配色中常見的鋼藍色調。將該值拆分為通道：開頭的 33 對應到 51，中間的 66 對應到 102，結尾的 99 對應到 153。套用公式，以 255 減去每個通道：
- 255 減去 51 等於 204，代表紅色。
- 255 減去 102 等於 153，代表綠色。
- 255 減去 153 等於 102，代表藍色。
將每個結果轉換回兩位小寫十六進制：204 是 cc，153 是 99，102 是 66。因此 #336699 的數位反相即為 #cc9966，這是一種暖褐，在 RGB 空間中與冷調的鋼藍形成對比。您可以使用互補色查找工具輸入 336699 並讀取色塊配對、正規化的十六進制值和十進制通道，藉此驗證相同的運算。
如何逐步找出數位互補色
此工具將規則簡化為三個動作，但完整步驟夠短，足以記住以便快速處理配色工作。
- 在輸入欄位中輸入六位數十六進制顏色，例如 336699，或使用色彩選擇器挑選。不接受簡寫標記法和具名顏色。
- 確認輸入顯示出預期的來源色塊，這樣您才能確定解析器讀取到您預期的值。
- 選擇「尋找 RGB 互補色 (Find RGB complement)」，以 255 減去目前值來反相每個 8 位元通道。
- 讀取結果色塊與來源色塊，以及正規化後的小寫十六進制值和紅、綠、藍十進制通道。
- 將十六進制或 RGB 值複製到您的樣式表、配色檔或設計素材中。請記住，其他色彩模型——例如 HSL、顏料混色、CMYK 印刷和 CIELAB 知覺空間——對互補色的定義不同，可能會產生不同的顏色。
數位反相 vs 其他互補色定義
「互補」一詞在設計和色彩科學中至少有四種運作定義，而數位反相僅是其中之一。選擇正確的方法，取決於您是在為螢幕撰寫程式碼、調混顏料、準備印刷檔案，還是在評估一組配色在人眼視覺下的呈現。
| 方法 | 作用對象 | 典型使用情境 | 備註 |
|---|---|---|---|
| 逐位元組 RGB 反相 | sRGB 通道，0 到 255 | CSS 實驗、圖示、資料視覺化強調色 | 具確定性，無需設定檔轉換 |
| HSL 色相旋轉 180 度 | 色相，保留明度和飽和度 | 繪畫式配色、傳統色相輪作業 | 同一色系；明度與飽和度保持不變 |
| 減法顏料混色 | 顏料與結合劑 | 傳統繪畫與插畫 | 結果取決於媒材，無法以十六進制重現 |
| CIELAB 知覺互補 | 知覺色彩空間座標 | 品牌與無障礙決策 | 追求視覺對比而非位元組對比；會隨光源而異 |
互補色查找工具僅套用第一列。若您的設計仰賴於知覺對比、通過品牌測試的配對，或是印刷就緒的輸出，則需要改用具備對應色彩模型支援的工具或工作流程。MDN 參考資料中的 CSS rgb() 顏色值，以及 W3C 的 CSS Color 4 sRGB 規範，皆描述了此工具所使用的同一個 0 到 255 通道範圍，這正是位元組規則能與 CSS 值乾淨對齊的原因。
數位反相適用與不適用的情境
當您需要為程式碼、線框圖或配色草圖取得一個快速、可重現的對比色，且願意在上線前以視覺方式評估結果時，逐位元組反相便是正解。當您需要的是無障礙的文字與背景配對、品牌安全的輔色，或是印刷打樣用的配色時，它便是錯誤的解答。以下幾項實用檢查有助於保持工作流程的誠實。
- 將選定的前景與背景透過顏色對比檢查工具 (Color Contrast Checker)依 WCAG AA 與 AAA 門檻進行檢驗。反相配對並不會自動具有良好的可讀性。
- 在實際呈現的介面中開啟色塊，因為環境脈絡會改變傾向對比的顏色被解讀的方式。
- 若需要的是知覺對比、品牌標準或色彩管理的素材，請參考互補色與無障礙對比專題指南，並改用具名色彩空間加上量測的方式，而非單靠位元組規則。
- 將反相視為構思的起點，而非最終配對。十六進制輸出是公式所承諾的確定性答案；設計的判斷則取決於您。
由於解析、反相和顯示皆在瀏覽器中執行，沒有任何顏色值會被上傳或儲存，這使得此工具無論用於機密的配色輸入或公開的品牌色碼，皆安全無虞。
如需更深入的探討，請參閱十六進制轉 RGB 範例：常見代碼與通道值。