Windows 上的互補色查找工具會對每個 8 位元 sRGB 通道套用「255 減去該值」的公式進行反轉，產生一個可在任何 Windows 10 或 Windows 11 電腦上用 Edge、Chrome 或 Firefox 開啟、且無需安裝任何軟體的確定性數位互補色。以位元組為單位的反轉運算，可在任何執行相同十六進位與相同算術的機器上重現，包括 S 模式的 Surface、Windows 11 桌上型電腦，或遠端桌面工作階段；由於此工具不發出任何網路請求，也不儲存任何資料，因此答案永遠不會離開分頁。因為每個步驟都在瀏覽器中執行，所以在工作用的筆電、家用 PC，或任何現代的 Windows 虛擬機上都會得到相同的結果；也就是說，你今天看到的答案，與同事明天看到的答案一模一樣。在 Windows 上常見的使用情境包括 CSS 實驗、儀表板原型、圖示與徽章配對，以及快速的對比檢查——這類免安裝的互補色工具，能省下往返於設計工具或自訂腳本之間的時間。

complementary color finder on windows
Windows 上的互補色查找工具：瀏覽器工作流程

瀏覽器型互補色查找工具能做什麼

互補色查找工具僅接受恰好一個六位數的十六進位 sRGB 顏色（可包含或不含開頭的 #），並將其解析為範圍 0 到 255 的三個整數通道。接著，它會把每個通道替換為 255 減去該通道的值，再把這三個新通道序列化為兩位小寫的十六進位數字，並將原始色塊與反轉後的色塊並排顯示，同時列出兩者的十進位 RGB 通道值。頁面以明確的措辭標示此範圍，讓讀者能重現任何答案：其結果是位元組層級的數位反轉，而非 HSL 色相旋轉，也不是油漆店的減色混合，更不是感知均勻的對比色。

八組獨立的測試案例涵蓋公式必須正確處理的邊界值、原色、中點以及混合十六進位數字。這些知名配對的行為屬於公開契約的一部分：#ff0000 反轉為 #00ffff、純綠色反轉為洋紅、純藍色反轉為黃色，而純黑與純白互相交換。若頁面日後對這些輸入不再回傳上述數值，代表公式已變動；否則，每個答案都能在十秒內以計算機心算重現。

此工具不接受諸如 #fff 的簡寫標記，也不接受像 tomato 這類具名顏色，或非整數的通道值。它不執行任何色彩設定檔轉換、不進行伽瑪調整，也不發出任何網路請求——從解析到顯示的整個過程都在瀏覽器分頁中完成。若你需要在資產管線或 Windows 端的 shell 腳本中反轉顏色值，由於頁面已將該公式公開呈現在畫面上，因此要移植同樣的公式可說輕而易舉。

為什麼要在 Windows 上的瀏覽器執行互補色查找工具

Windows 並不缺色彩選擇器與調色盤工具，從內建的 PowerToys Color Picker，到能從螢幕取樣的 Microsoft Store 專用應用程式都有。當你需要從影像或即時視窗讀取顏色時，這些工具相當實用；但它們並無法回答「這個十六進位代碼的 RGB 反轉值是什麼」。對於這個確切任務，瀏覽器型的查找工具更快，因為輸入本身就是一串可直接貼上的字串，輸出也是一串可直接貼回 CSS、Figma 畫框、VS Code 檔案或 Power BI 主題的字串。

第二個原因是摩擦成本。由 IT 管理的 Windows 電腦經常封鎖 Microsoft Store、限制可執行檔的安裝，或僅允許 Edge 在 kiosk 模式下執行。一個能在 Edge、Chrome、Firefox 及任何 Chromium 核心瀏覽器上運作的瀏覽器工具，能繞過上述所有限制。它不需要部署 MSI、不需要管理員權限提升提示，也不需要重新啟動。此外，該頁面是無狀態的：關閉分頁後，不會在 %AppData% 留下任何設定檔，下一次工作階段會以全新的狀態開始。

第三個原因是可重現性。桌面端的色彩選擇器可能會使用系統的色彩設定檔、套用伽瑪校正，或以使用者無法察覺的方式對通道進行四捨五入。而互補色查找工具則明確表示：它僅處理原始的 8 位元 sRGB 位元組，並將結果標示為數位反轉。若同事在不同的 Windows 電腦上以同一個 URL 與相同的十六進位代碼開啟頁面，將會看到相同的答案；這使它在設計交付、程式碼審查與錯誤回報等情境中非常實用。

如何在 Windows 上尋找互補色

下列 Windows 工作流程以 Edge 為示範瀏覽器，但 Chrome、Firefox、Brave 及任何現代的 Chromium 核心瀏覽器皆遵循相同的步驟。

  1. 從「開始」功能表、工作列，或按下 Win + S 並輸入 Edge 後按 Enter，開啟 Microsoft Edge。
  2. 在網址列中前往互補色查找工具頁面，並等候其載入完成。
  3. 點擊十六進位輸入欄位。輸入或貼上一個六位數的十六進位顏色（可包含或不含開頭的 #），例如 #1a73e8。輸入欄刻意拒絕簡寫與具名顏色，因此請先將任何三位數的形式展開為六位數。
  4. 可選擇性地從內建色彩輸入器中挑選一個顏色，以便在反轉前以視覺方式確認來源色塊。
  5. 點選「Find RGB complement」。頁面會將每個 8 位元通道替換為 255 減去該通道值，並在來源色塊旁邊渲染出第二個色塊。
  6. 讀取正規化後的小寫十六進位值，以及兩個色塊的十進位 RGB 通道值。複製你所需的值——CSS 用十六進位，canvas、SVG 或 shader 程式碼用十進位通道值。
  7. 將結果貼到你的樣式表、設計工具或對比檢查器中。若日後想重複使用反轉結果，可讓該頁面保持在 Edge 分頁中開啟，或將其加入書籤以供下次使用。

位元組反轉公式，套用於單一十六進位顏色

此工具背後的公式，正是任何開發者都能以一行程式碼撰寫的內容：

complement_channel = 255 − source_channel

以一個飽和的靛藍色 #3b5bff 作為來源顏色的單一實例進行說明。三個通道如下：

  • 紅色：十六進位的 3b 等於十進位的 59。
  • 綠色：十六進位的 5b 等於十進位的 91。
  • 藍色：十六進位的 ff 等於十進位的 255。

將反轉公式套用於每個通道：

  • 紅色互補：255 − 59 = 196，即十六進位的 c4。
  • 綠色互補：255 − 91 = 164，即十六進位的 a4。
  • 藍色互補：255 − 255 = 0，即十六進位的 00。

將這三個兩位數的結果串接起來，便得到 #c4a400——一種深芥末黃色，其十進位通道值為 rgb(196, 164, 0)。若你在任何 Windows 瀏覽器上將 #3b5bff 貼入互補色查找工具頁面，這正是你應該看到的輸出；而相同的算術也適用於所有其他輸入。同一公式搭配更多配對的逐步說明，可參閱互補色查找工具公式逐步解析，而MDN 上 CSS rgb() 的參考資料亦確認了此處所使用的 0 到 255 整數通道慣例。

數位反轉在 Windows 設計流程中的定位

對於螢幕相關的工作，位元組反轉的結果是一個強而有力的預設選擇，因為包括 Edge、Chrome 與 Firefox 在內的每個現代 Windows 瀏覽器，皆以 sRGB 來解讀 CSS 顏色。這表示你從工具複製的十六進位值，在同一台螢幕上會對應到與來源顏色相同的像素，不需經過任何色彩管理的轉換。常見的合適應用場景包括：

  • CSS 實驗與原型。將反轉值套用至 background-color、focus ring 或 hover state，觀察這組配色在實際 Edge 算繪下的呈現效果。
  • 圖示與徽章配對。在標題列上顯示的小圖示，經常會因為套用反轉填色而在基礎狀態與 hover 狀態下都保持清晰可見。
  • 資料視覺化。反轉配對是標示主要資料序列與其偏差區間的快速做法，無需引入完整的調色盤函式庫。
  • 快速的對比檢查。由於結果是確定性的，你僅需改變來源顏色，即可在多個主題間測試同一組配對。

然而，它並非通用的互補色。反轉後的顏色可能落在色盤上對比較低的區域、無法通過可讀性檢查，或與以感知而非數位方式挑選的品牌色相衝突。在出貨前，務必對該配對進行對比檢查器的驗證——Color Contrast Checker 採用同樣的免安裝模式在本機執行，並對你貼上的精確十六進位值套用 WCAG AA 與 AAA 規則。

你可能會遇到的「互補」一詞的其他定義

「互補」一詞至少有四種實際運作的定義，而混用這些定義，是 Windows 設計團隊最常見的混淆來源。下表彙整了最常見的幾種定義，並註明其與互補色查找工具所回傳的位元組反轉結果在何種情況下會產生分歧。

方法「互補」的意涵與數位 RGB 反轉的比較
位元組層級的 sRGB 反轉每個 0–255 通道皆變為 255 減去自身。這是本工具所採用的方法。在每台 Windows 電腦上皆具確定性且完全一致。
HSL 色相旋轉色相偏移 180 度，同時保留亮度與飽和度。由於此運算將色相視為色環而非三個獨立位元組，因此經常產生不同的顏色。
減色顏料混合藝術上的「分裂互補」或顏料店中的對比色，依據顏料特性而定。與位元組值無關；取決於特定顏料，且幾乎無法以一個簡潔的十六進位值表示。
CMYK 分色四色印刷製程中所使用的分版對應色。源自完全不同的色彩模型，並假設本工具未納入考量的印刷設定檔。
感知對比基於 Lab 或 OkLCh、針對人類視覺調整的對比色。適合用於無障礙調色盤，但若不經轉換步驟，無法從單一十六進位值推導出來。

務實的結論是：本工具會以淺白的文字告訴你它實作了哪一種定義；當該定義與你的任務不符時，你可以選擇其他工具或色彩模型。對於 Windows 上的網頁工作而言，數位反轉是最便宜且最具可重現性的選擇；若涉及印刷、感知設計或以無障礙為優先的系統，則應將其視為起點，並依據相應的參考來源驗證該配對，而非直接視為最終答案。

欲深入了解，請參閱Windows 上的隨機顏色產生器：瀏覽器快速入門。