在 8 位元 sRGB 中，六位數十六進位顏色的反色，是將紅、綠、藍三個通道分別從 255 中減去所得到的數值；這也使逐位元組的 RGB 反色，成為螢幕設計中最簡單、最具可重現性的「反色」定義。這條規則是純機械式的：以 #ff0000（純紅）為例，其反色即為 #00ffff（青色）；輸入 #336699，則會得到 #cc9966；反轉黑色會得到白色，反轉白色則會得到黑色。整個運算完全在瀏覽器本地端進行，不需要色彩描述檔、量測儀器或對照表。設計師在尋找反色計算機時，通常想要的是一個快速、可預期的答案，可以直接貼入 CSS 變數或 Figma 色票中，而無須反覆權衡色相、亮度或色域。這樣一個狹義的定義，正是 數位 RGB 反色計算機 所提供的。問題在於，「反色」並非單一概念：傳統的顏料色環以藝術家熟悉的 RYB 模型為基礎，現代的 UI 設計則是在 HSL 中將色相旋轉 180 度，而知覺色彩科學則是在 CIELAB 中沿 L 軸對立顏色。對同一個輸入的十六進位色碼，每個系統會產生不同的數值，因此要選用哪個工具，取決於實際的工作需求。

opposite color calculator
反色計算機：找出十六進位顏色的 RGB 反色

「反色」在數位設計中的意義

「反色計算機」這個詞，並非對應單一的數學運算——它其實反映的是一個詞彙問題。設計師、畫家、印刷業者以及知覺研究者，都在使用「反色」這個詞，但幾乎每個領域各自採用不同的定義。「互補色尋找器」透過明確採用單一定義來解決這種模糊：逐位元組的數位 RGB 反色。三個 8 位元 sRGB 通道各自以 255 減去原始值來取代，因此這個計算是確定性的、可重現的，並且不需要用到選色器或描述檔轉換。

這個範疇比「互補」一詞通常所暗示的意義更為狹隘。在 CSS 中，rgb() 標記法將顏色編碼為 sRGB 色彩空間中三個介於 0 到 255 的整數，而這些位元組的反色，在該空間中就是一種合法的數學互補。超出這個空間——例如在 HSL、RYB、CMYK 或知覺色彩度量中——同一個輸入的十六進位色碼，就可能對應到完全不同的「反色」。了解計算機採用的是哪種定義相當重要，因為每一項後續工作（配色測試、無障礙性、印刷前置作業）關注的面向各不相同。

模型越狹隘，答案就越可預期。當你需要驗證結果、交給同事或為其撰寫單元測試時，像試算表般具確定性的規則具有明顯的優勢。它同時也讓工具對自身的限制保持誠實：它不會對知覺結果做出任何承諾，也不會假裝其結果在人眼觀感上是「相反」的。這份誠實正是它大部分價值所在——搜尋反色計算機的讀者，通常只想要一個快速的機械式答案，再決定是否要投入更複雜的工具。

255 相減規則的運作方式

這個演算法小到可以寫在一張便利貼上：將六位數十六進位碼解析為三個介於 0 到 255 的整數 R、G、B，接著將每個通道的反色計算為 255 減去原始值。再把三個結果序列化為兩位數的小寫十六進位位元組，就得到了反色。這條規則獨立處理每個通道，因此除了數學運算之外並沒有共享的「色彩邏輯」——紅色通道並不知道綠色通道正在做什麼。

以純紅 #ff0000 為例，快速走一遍流程：

  1. R：255 − 255 = 0
  2. G：255 − 0 = 255
  3. B：255 − 0 = 0
  4. 結果：#00ffff（青色）

同樣的邏輯可以產生一張簡單易記的反色對照表：綠色變成洋紅、藍色變成黃色、黑白互換，而像 #336699 這類混合通道則會反轉為 #cc9966。邊界情況是可預期的——#000000 永遠對應到 #ffffff，而 #ffffff 永遠對應到 #000000——這正是設計師在需要一個保證、機械式答案時會選擇這類計算機的原因。想要深入了解背後的數學，可以參考 互補色尋找器公式逐步指南。

如何用三個步驟取得反色

透過「互補色尋找器」取得結果的最快路徑包含三個動作。

  1. 在輸入欄位中輸入六位數十六進位顏色（可有可無的 # 前綴），或是透過色彩輸入工具以視覺方式挑選顏色。
  2. 選擇「尋找 RGB 互補色」動作，讓工具反轉三個 8 位元 sRGB 通道。
  3. 複製或使用以十六進位或十進位 RGB 形式顯示的結果。原始色樣與反色色樣會並排顯示，以便以視覺方式確認反轉結果。

反色計算機僅接受剛好六個十六進位數字，會將輸出統一規範為小寫，並拒絕像 #abc 這類簡寫形式以及像 "tomato" 這類具名顏色，同時不執行任何網路請求、上傳或描述檔轉換。所有步驟皆在本機瀏覽器中執行，這代表輸入的資料從不離開頁面。

反色的其他定義

逐位元組反轉並非唯一合理的定義。下表並列了「反色」最常見的四種意義，以及逐位元組的數位反色，以供比較。

定義 變更的內容 對 #ff0000 的結果 最適合的用途
數位 RGB 反色（每個通道 255 相減） 每一個 sRGB 位元組 #00ffff CSS 實驗、圖示遮罩、快速反色配色
HSL 色相旋轉 180 度 僅變更色相——飽和度與亮度保持不變 hsl(180, 100%, 50%) 裝飾性配色、色相平衡的模型
畫家 RYB 色環上的反色 傳統藝術家的色彩關係 綠色（近似） 美術參考、插畫草圖
知覺對立色（基於 CIELAB） 在知覺空間中沿 L 軸的距離 取決於 L* 與彩度 品牌無障礙性、研究等級的視覺對比

W3C 的 CSS Color 4 規範將 sRGB 通道描述為 rgb() 函式中的 8 位元整數，這正是數位反色計算機運作的命名空間。一旦工作流程超出這個命名空間——切換到 HSL、RYB、CMYK 或知覺模型——「反色」的定義與數學就會跟著改變。同一個輸入的十六進位色碼，根據工具實作的定義不同，可能會對應到四種不同的「反色」，這也說明了在頁面層級揭露所使用的公式，是一個值得信賴的重要指標。

何時使用（與不應使用）反色作為合適的選擇

255 相減的反色適用於狹隘的螢幕設計情境：快速的配色草稿、CSS 變數實驗、圖示與資料視覺化的除錯，以及在需要保證的機械式答案勝過猜測的高階組合中。它是一個有用的起點，而非終點。一個反色可以與其原始色並存於同一頁面，卻仍產生難以辨識的文字、互相衝突的圖示，或違反品牌視覺層級的配色。

對於任何仰賴實際視覺判斷的工作，建議將反色與 色彩對比檢查工具搭配使用，以確認前景與背景組合能通過 WCAG AA 或 AAA，並在實際介面中（而非單獨環境下）測試其結果。印刷製作、廣色域素材、需要色彩管理的工作流程，以及無障礙決策，皆超出數位 RGB 命名空間的範疇，需要採用具名的色彩空間與基於量測的工具，而非逐位元組的反色。

可以試著做一個快速的健全性檢查：反轉 #ff0000 會得到青色 #00ffff——兩者的通道相加皆為 255，這也是為什麼這兩個色樣看起來像是乾淨的負片效果。反轉 #808080（50% 灰）會得到另一個 50% 灰，因為 255 減去 128 等於 127，而人眼所感知到的灰色看起來幾乎相同。反轉 #336699 會得到 #cc9966，這是一種溫暖的褐灰色，看起來並不特別「相反」於原本的冷調藍灰色。最後一個例子是最典型的情況：數學結果很乾淨，但視覺關係並不會自動和諧，而這正是純粹的反色無法跨越的鴻溝。

可在此基礎上建立的相關工作流程

一旦掌握單一反色，下一步通常就是建立配色。一組反色可以作為整套配色的種子，而 配色產生器能將一個基礎十六進位色碼，展開為互補、類似、三元以及其他和諧關係的配色，方便複製到 CSS 中。如果需要先把已儲存的色樣從十進位 RGB 轉換為十六進位，RGB 轉 HEX工具可以在瀏覽器中直接處理。這些工具皆不會上傳輸入資料，因此從原始十六進位碼到完成的色樣清單，整個工作流程都在本地端完成，每一步的反色結果也都容易驗證。

若想進一步了解，請參閱 線上使用的十六進位轉 RGB 轉換器是否安全？。