互補色尋找器透過一條確定性的規則計算結果:每個 8 位元 sRGB 通道都變成 255 減去其原始值,因此位元組值為 0 對應到 255,位元組值為 255 對應到 0,介於兩者之間的每個值則以 127.5 為中心進行鏡像。這種位元組級的反相是工具所使用的「互補」唯一定義,這使得答案可重現且易於手動驗證。當您輸入一個六位數的十六進位色彩(例如 #ff0000)時,工具會解析三個通道(255, 0, 0),計算三個反相值(0, 255, 255),將它們重新序列化為小寫的兩位數十六進位字串(#00ffff),並同時呈現兩個色塊以及對應的十進位 RGB 通道值。在任何步驟中都沒有使用色相輪、色相旋轉、知覺模型或色彩描述檔。本文將說明此公式、工具接受的輸入、涵蓋的邊界情況,以及數位反相將無法符合其他常見互補色定義之處。

complementary color finder explained
互補色尋找器公式逐步解析

RGB 反相公式的內部原理

工具的整個演算法可以用一行撰寫:對於來源色彩中的紅、綠、藍三個通道中的每一個,將通道值替換為 255 減去該值。接著將三個結果重新編碼為單一小寫六位數十六進位字串。由於每個通道皆被視為介於 0 到 255 之間的獨立整數,因此此公式具有線性、以 127.5 為中心的對稱性,並且是對合的(involutive),意即套用兩次必定會還原為原始色彩。

這是有意設定的範圍。工具在頁面上聲明其定義,使每個答案無需指定色相輪、色彩空間或知覺模型即可重現。正是此範圍讓結果能在不同瀏覽器與作業系統間保持穩定:無論螢幕校準或色彩描述檔為何,相同的十六進位輸入必定產生相同的十六進位輸出。相對地,依賴色相、油彩混合或知覺對立的定義,可能會對相同的起點產生不同的色彩,這正是工具僅採用單一方法,而不會悄悄選用任何方便的定義的原因。

工具接受的輸入與拒絕的內容

由於演算法非常精簡,因此輸入合約相當嚴格。工具僅接受恰好六個十六進位數字,無論是否帶有前置 #、大小寫皆可,每對必須解析為介於 0 到 255 之間(含)的整數。簡寫形式(三個數字,如 #f00)、具名色彩(如 red 或 rebeccapurple)、RGB 或 HSL 函式語法、Alpha 通道、百分比通道以及超出範圍的值,皆不在輸入合約之內,將不予處理。

輸出以兩種特定方式進行標準化。井字號(#)被視為輸入上的便利設計,而結果始終以小寫序列化,使得複製貼上至 CSS 或 SVG 標記時能保持一致的行為。十進位 RGB 通道值與十六進位並列顯示,讓您可以同時閱讀兩種形式,並確認這些值與您的 IDE、設計工具或瀏覽器所解讀的內容相符。一切皆在瀏覽器內完成:解析、反相與顯示皆在本機執行,無上傳、無儲存,當輸入可能來自私密調色盤或未公開的產品色彩時,這一點至關重要。

三步驟執行工具的方式

  1. 開啟互補色尋找器,在色彩欄位中輸入六位數十六進位色彩,無論是否帶有前置 #。您也可以使用欄位旁的色彩輸入器以視覺化方式挑選色彩;兩種路徑最終都會解析為相同的六位數形式。
  2. 點選「尋找 RGB 互補色」。工具會將三個 sRGB 通道各自讀取為介於 0 到 255 之間的整數,將每個通道值替換為 255 減去該通道值,並將三個結果序列化為六位數小寫十六進位輸出,同時並列顯示十進位 RGB 值。
  3. 複製或使用所顯示的十六進位與 RGB 結果。請記住,工具僅產生位元組層級的數位 RGB 反相,因此「互補」的其他定義(HSL 色相旋轉、油彩混合、CMYK 行為、知覺對立)可能會對相同的起點產生不同的色彩。

邊界情況在「255 減去各通道」下的行為

邊界情況是觀察公式運作的最清晰方式。黑色 #000000 反相為白色 #ffffff,而白色反相回黑色,因為 0 與 255 直接交換。紅色 #ff0000 反相為青色 #00ffff,綠色反相為洋紅 #ff00ff,藍色反相為黃色 #ffff00。這些交換絕非偶然:每個原色都會反相為由另外兩個通道以全強度組成的二次色,這正是位元組級反相與螢幕上加法 RGB 原色關聯一致的部分。

中點則呈現更細微的特性。中性色 #808080 並不會反相為自身;通道值(128, 128, 128)會變成(127, 127, 127),因此結果為 #7f7f7f。再對 #7f7f7f 進行反相會得到 #808080,所以此運算仍為對合,但中點並非不動點。此公式下唯一理論上的不動點會是 127.5,但這在六位數十六進位中無法表示。只要任何通道恰好為 128,就會出現同樣的不對稱性。混合的十六進位輸入對每對獨立套用相同的逐通道規則,這也說明了即使來源具有可辨識的色彩名稱,結果仍可能看起來與色相旋轉毫無相似之處。如需更廣泛的來源與結果配對表格,互補色尋找器圖表針對一長串常見的十六進位輸入逐步展示了相同的公式。

位元組級反相 vs. HSL 色相旋轉 vs. 油彩互補

「互補」一詞具有多種有效定義,且它們並不總是互相吻合。下表彙整了工具明確區分開來的四種定義,讓您在信任結果之前能先判斷實際採用的是哪一種。

定義 計算方式 針對 #ff0000 的結果 適用情境
位元組級 RGB 反相(本工具) 每個通道皆變為 255 減去其值 #00ffff(青色) CSS、SVG、螢幕調色盤、圖示與資料視覺化配色
HSL 色相旋轉 將色相旋轉 180°,保持飽和度與亮度 取決於來源的飽和度與亮度 基於 HSL 的設計系統、色相輪工具
RYB 油彩互補 傳統藝術家色相輪上的對立色 綠色(非青色) 傳統繪畫、美術教育、基於 RYB 的配色方案
CMYK 印刷互補 由減法油墨行為衍生 取決於描述檔與轉換方式 印刷生產、色彩管理的印前作業

對於在 CSS、SVG 或任何以 sRGB 為基準的螢幕情境中工作的設計師與開發者而言,位元組級反相是與瀏覽器實際呈現結果相符的版本。對於印刷印前作業、廣色域工作,或任何知覺導向的調色盤設計,上表則提醒您應避免直接採用位元組級結果,並改用了解相關描述檔或色彩空間的工具。

數位反相適用之處與其局限

此工具最適用於螢幕上簡短、可重複的色彩決策:需要一個反相色塊來測試元件在其範圍遠端外觀的 CSS 實驗、資料視覺化中希望每個系列盡可能相互區隔的快速調色盤、需要呈現為「與背景相反」的圖示或強調色,或是確認所選配對確實為原始色彩之數位反相的健全性檢查。在上述所有情境中,位元組級規則正是您所需要的,因為十六進位的每位消費者,包括設計工具與瀏覽器,皆會套用相同的位元組解讀方式。

在四種情況下,結果不應被直接信任。第一,印刷生產:RGB 位元組級反相並無直接的 CMYK 等價物,在製版之前應透過真正的色彩管理工作流程進行轉換。第二,廣色域顯示器:P3、Rec.2020 及其他廣色域空間並不將 sRGB 位元組視為該色彩知覺的中心,因此「反相」在這些螢幕上看起來不會像對立色。第三,知覺導向的調色盤設計:位元組反相忽略了肉眼對色彩的解讀方式,因此兩個視覺上平衡的配色方案可能來自該公式無法重現的知覺模型。第四,無障礙性:反相色並不自動具有可讀性。要判斷前景色與其數位反相背景是否符合 WCAG AA 或 AAA,唯一的方法是透過專門的對比度檢查工具進行測試,該工具需了解 WCAG 對比公式。

在工具之外重現結果

此工具狹窄定義的一個有用副作用是,只要能進行整數運算,答案就能在任何地方重現。將來源視為六個十六進位數字,將每對解析為十進位整數,計算 255 減去每個整數,並將每個結果以前置零的兩位數小寫十六進位序列化。這就是完整的演算法。任何語言中相同的五行片段(Python、JavaScript、試算表公式、awk 單行指令)皆會產生與工具相同的答案,而這正是確定性的互補色所應具備的透明度。關於瀏覽器用於解讀結果的底層 sRGB 位元組模型,MDN CSS rgb() 參考文件記錄了相同的 0 到 255 整數通道合約。

如果您決定自行撰寫反相腳本,請遵守兩項限制。第一,將輸入標準化為六位數,並將前置 # 視為可選,使相同的解析器能同時處理貼上與手動輸入的內容。第二,將輸出小寫化,如此 CSS 變數與設計師手動複製的十六進位值會得到相同的字串。這是工具執行的唯二標準化步驟,也是讓結果在複製貼上、搜尋與程式碼審查中保持穩定的關鍵。

若要深入了解,請參閱《互補色尋找器入門指南》。