互補色尋找器是一個瀏覽器型應用，用來尋找互補色，它會把每個 sRGB 通道以 255 減去原始值的方式算出精確的 8 位元 RGB 反相，讓來源色塊與結果色塊在數位空間中相加等於純白。它完全在瀏覽器中執行，接受六位數十六進位顏色，並回傳逐位元組的反相結果，不猜測色相旋轉、油漆混色或印刷行為。輸出結果完全具決定性:同一個十六進位值輸入兩次，就會得到相同的十六進位值兩次。因為所有計算都在頁面本地執行，顏色值不會被上傳、儲存或傳輸，這讓這個工具適合用於快速的 CSS 實驗、配色草圖、圖示草稿，以及資料視覺化的模型。代價是範圍:答案就是其中一種互補定義——數位 RGB 反相，這個定義可能與 HSL 色相旋轉、傳統油漆或 CMYK 印刷流程產生的互補色不同。
為何瀏覽器應用通常勝過原生下載
顏色工作就在你正在使用的瀏覽器分頁中發生。大多數搜尋尋找互補色的應用的人，都希望立即在 CSS、SVG 或設計畫布所在的同一個視窗中得到結果，而不是還要安裝一個獨立的行動應用。瀏覽器型工具也避免了許多實際的麻煩:沒有應用程式商店審查的延遲、沒有平台特定的怪問題、沒有更新迴圈、也無需額外登入。互補色尋找器在任何現代的桌面或行動瀏覽器中都能開啟，解析六位數十六進位值，並在你按下按鈕的瞬間顯示反相結果。
這也有隱私上的優勢。頁面使用 JavaScript 在目前的文件中解析、反相並呈現結果;它不會針對你輸入的顏色發出網路請求。對於正在處理品牌色票、進行中的模型或尚未公開的十六進位值的設計師來說，這個純本地路徑很重要。你可以將結果直接複製到樣式表、Figma 框架或程式碼片段中，不必擔心還有誰看到了這個顏色。
工具如何計算 8 位元 RGB 反相
演算法對每個通道只做一行算術。輸入必須是一個六位數的十六進位 sRGB 顏色，可以選擇性加上 # 前綴。工具會將字串解析為三個整數(紅、綠、藍)，每個介於 0 到 255 之間，然後把每個通道替換為255 減去原始值。三個新通道會被序列化為各兩個小寫十六進位數字，可以選擇性加上 # 前綴，並顯示在來源色塊旁邊，讓你一次看到兩個顏色。
以一個具體的例子來說明，取 #3a7f9c。解析數字後得到 red = 58 (0x3a)、green = 127 (0x7f)、blue = 156 (0x9c)。反相結果為 (255 - 58, 255 - 127, 255 - 156) = (197, 128, 99)，序列化後為 #c58063。頁面會並排顯示兩個色塊，並在結果旁邊印出十進位通道值。
因為這個運算純粹是數值，將一個顏色反相兩次會回到原來的顏色。把 #00ffff(青色，即紅色的反相)反相後會再次得到 #ff0000(紅色)。同一個邏輯也會產生設計師最早學到的經典配對:紅變青、綠變品紅、藍變黃，以及黑白互換。CSS Color 4 規格文件中記載了工具所讀取的標準 sRGB 通道表示方式，而 MDN 的 CSS rgb() 參考文件則展示了把結果放回樣式表時應使用的對應語法(MDN — CSS rgb())。
三個步驟找到你的互補色
這是從十六進位碼到其數位反相結果的最短路徑。
- 輸入或挑選一個六位數十六進位顏色。將值輸入十六進位欄位，可加可不加 # 前綴，或用顏色選擇器挑選顏色。工具僅接受正好六個十六進位數字，並會拒絕如 #abc 之類的簡寫形式、"tomato" 這類具名顏色，以及任何非十六進位輸入。
- 選擇「Find RGB complement」。按鈕會觸發反相運算。每個 8 位元通道都會被替換為 255 減去目前值，頁面會更新結果色塊、標準化的小寫十六進位值，以及十進位的紅/綠/藍通道。
- 複製或使用顯示的結果。可將十六進位字串用於 CSS，將十進位通道用於 JavaScript 呼叫，或將可見的色塊作為視覺參考。請記住，答案就是逐位元組的反相;其他色彩模型會得出不同結果。
輸入、輸出與格式規則
工具對格式的要求很嚴格，因為對於解析器無法讀取的輸入來說，逐位元組反相是沒有意義的。下表總結了頁面接受什麼、回傳什麼，以及哪些超出範圍。
| 面向 | 接受 | 不接受 |
|---|---|---|
| 輸入格式 | 六個十六進位數字，可選擇性加上 # 前綴 | 簡寫十六進位(#abc)、CSS 具名顏色、rgb() 字串、hsl() 字串 |
| 輸入通道範圍 | 每個通道從 00 到 ff | 超出 0-255 的通道、小數、百分比 |
| 輸出十六進位 | 小寫，六位數，可選擇性加上 # 前綴 | 大寫十六進位(會標準化為小寫) |
| 輸出通道 | 0-255 的十進位整數，代表紅、綠、藍 | 浮點數、百分比、透明度(不會計算透明度) |
| 處理方式 | 瀏覽器本地處理，不上傳也不儲存 | 使用你的顏色值進行伺服器端呼叫 |
| 色彩模型 | 僅限標準 sRGB 位元組值 | 廣色域空間、CMYK、感知色彩空間 |
W3C 的 CSS Color 4 模組定義了與本工具所依賴的相同通道語意，因此這裡產生的結果與 CSS rgb() 宣告在螢幕上的呈現一致(W3C — CSS Color 4 sRGB)。
比較 RGB 反相與其他互補定義
「互補色」至少存在四種運作定義，而這些定義之間很少一致。互補色尋找器只採用其中一種，並在頁面上標明其範圍。了解其中的差異，可以避免錯誤的色票出現在實際產品中。
| 定義 | 變化之處 | #ff0000(紅)的結果 |
|---|---|---|
| 8 位元 RGB 反相(本工具) | 每個位元組變為 255 減去其值 | #00ffff(青) |
| HSL 色相旋轉 180 度 | 色相反向偏移，亮度與彩度保持不變 | 亮度與輸入相符的偏青色顏色 |
| 傳統油漆混色 | 基於顏料行為的減法互補 | 偏綠的色相，並非青色 |
| CMYK 印刷互補 | 印刷規則下的相反油墨組合 | 綠色版的組合，而非青色 |
| 感知上的對立(CIELAB) | 在感知均勻的空間中的視覺對立 | 通常接近綠色，會依亮度而變化 |
對於快速的數位配色來說，逐位元組反相是最便宜、最可重現的選項。對於品牌、印刷、無障礙設計，或任何涉及人類感知的任務，正確的互補色存在於不同的模型之中，而工具所標明的範圍正是讓你能重現每一個答案的依據。
當數位反相無法涵蓋全部時
十六進位碼的反相結果是一個數字，而非設計定論。一組顏色可能在數學上完全相反，卻仍無法通過任何可讀性的檢驗。同一個互補色可能非常適合深色模式圖示，卻完全不適合內文文字。請把輸出當作起點，在實際發布前先透過專屬的檢查工具來驗證這組配色。
針對無障礙設計的決策，請使用像 Color Contrast Checker 之類的對比工具，以確認前景與背景符合 WCAG AA 或 AAA 的比例。數位反相並不保證一定通過對比檢驗;一個接近白色的反相色對應到接近白色的來源色，結果仍然接近白色。針對印刷生產、廣色域素材、色彩管理描述檔，或任何涉及感知色彩的配色設計，正確的路徑是使用具名色彩空間並進行量測，而不是逐位元組翻轉。W3C 的 CSS Color 4 文件與 MDN 的 rgb() 參考文件，都為本工具所遵循的 sRGB 通道模型提供了依據，讓螢幕上的結果能與瀏覽器渲染一致，但並不會把這種一致性延伸到印刷或感知相關的工作。
如果你想從單一十六進位碼繼續探索，如何在 RGB 中找到互補色指南以手動方式逐步說明相同的數學過程。若需要更廣泛的配色，Color Palette Generator 可以一鍵將基準色擴展為互補、類似、三等分以及其他配色方案。