數位互補色是六位數十六進位值的逐位元組 RGB 反向值，計算方式是將每個 sRGB 通道以其原始值減去 255。互補色查詢工具將此規則套用於任何六位數十六進位輸入，並回傳對應的十六進位色碼、十進位通道讀數，以及並排顯示的色塊，讓您在套用至樣式表之前先預覽配對結果。由於運算是基於原始位元組，而非色相角度或感知距離，因此結果可在瀏覽器、設計工具和程式碼編輯器之間保持一致，無需任何色彩設定檔轉換或網路請求。這種確定性正是讓數位反向色在快速的 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 互補色」，以 255 減去目前值的方式反轉每個 8 位元通道。
- 在來源色塊旁邊讀取結果色塊，以及標準化後的小寫十六進位色碼和紅、綠、藍通道的十進位讀數。
- 將十六進位或 RGB 值複製到您的樣式表、配色檔案或設計資源中。請注意，HSL、油漆混色、CMYK 印刷和 CIELAB 感知色彩空間等其他色彩模型對互補色的定義不同，可能會產生不同的色彩。
數位反向色與其他互補色定義的比較
「互補」一詞在設計和色彩科學中至少有四種實務定義，而數位反向色只是其中之一。選擇正確的方法，取決於您是在為螢幕撰寫程式碼、混合顏料、準備印刷檔案，還是在評估一組色彩在人眼視覺下的呈現。
| 方法 | 作用對象 | 典型使用情境 | 備註 |
|---|---|---|---|
| 逐位元組 RGB 反轉 | sRGB 通道，0 到 255 | CSS 實驗、圖示、資料視覺化強調色 | 具確定性，無需設定檔轉換 |
| HSL 色相旋轉 180 度 | 色相，同時保留明度和飽和度 | 繪畫風格配色、傳統色環應用 | 同一色彩家族；明度和飽和度保持不變 |
| 減法混色（顏料混合） | 顏料與結合劑 | 傳統繪畫與插畫 | 結果取決於媒材，無法以十六進位重現 |
| CIELAB 感知互補 | 感知色彩空間座標 | 品牌與無障礙決策 | 尋求視覺對比而非位元組對比；會因光源而異 |
互補色查詢工具僅套用第一列。如果您的工作重點在於感知對比、品牌經測試的配色組合或印刷就緒輸出，您將需要使用針對相關色彩模型的工具或工作流程。MDN 關於 CSS rgb() 色彩值的參考資料，以及 W3C 的CSS Color 4 sRGB 規範，描述了工具所使用的同一個 0 到 255 通道範圍，這也是位元組規則能與 CSS 值完美對齊的原因。
數位反向色適用與不適用的情境
當您需要一個快速、可重現的對比色，用於程式碼、線框圖或配色草稿，且樂於在上線前以視覺方式評估結果時，逐位元組反向色就是正確答案。但當您需要符合無障礙標準的文字與背景配對、品牌安全的輔助色，或印刷可達成的配色時，它就是錯誤的答案。以下幾項實用檢查可確保工作流程的可靠。
- 將所選的前景與背景透過色彩對比檢查工具檢查是否符合 WCAG AA 和 AAA 門檻。反向配對並不自動保證可讀性。
- 在實際呈現的介面中開啟色塊，因為情境會改變傾向對比之色彩的視覺感受。
- 若需要感知對比、品牌標準或色彩管理的資產，請參閱關於互補色與無障礙對比的專屬指南，並採用具名色彩空間加上測量方式，而非位元組規則。
- 將反向色視為構思的起點，而非最終配對。十六進位輸出是公式所承諾的確定性答案；設計的判斷則取決於您。
由於解析、反轉和顯示都在瀏覽器中執行，沒有任何色彩值會被上傳或儲存，因此無論是機密的配色輸入還是公開的品牌色碼，使用上都安全無虞。