一個六位數十六進位值的數位互補色,就是將每個 8 位元 sRGB 通道從 255 減去所得到的顏色,而這正是 互補色尋找工具 所顯示的、作為你來源色彩反相的結果。在 iPhone 上,無論是 Safari 或 Chrome 都能使用這個工具,因此不需要從 App Store 下載任何東西、不需要 TestFlight 版本,也不需要建立帳號。每個結果都是確定且可重現的:紅色變成青色、綠色變成洋紅、藍色變成黃色,而色階的兩個端點——黑色與白色——則會互換位置。所有運算完全在裝置本機執行,這代表十六進位值永遠不會離開手機,且兩次造訪之間不會儲存任何資料。該工具會在頁面上標明其 RGB 定義,因此每個答案都能夠以人工方式核對。輸出結果明確是數位 RGB 反相,並非 HSL 中使用的 180 度色相旋轉,也不是傳統顏料的減法混色,更不是印刷機的 CMYK 行為。了解一個結果遵循的是哪種定義,正是區分一個實用配對與一個誤導配對的關鍵。

「互補」在螢幕上的真正含義

在日常對話中,「互補色」一詞至少被用於四種截然不同的概念,而其中只有一種是位元層級的數位反相。將這些概念區分開來,是避免設計師的吸管工具與十六進位計算器產生分歧時造成混淆的最快方法。

  • 數位 RGB 反相(本工具):每個 sRGB 通道變成 255 減去其原始值。可重現、確定性、且與人類感知無關。
  • HSL 色相互補:在色輪上將色相旋轉 180 度,同時保持亮度與飽和度不變。這是大多數設計應用程式的預設行為。
  • 傳統顏料互補:顏料的減法混色,其行為與光的加法混色不同,且會因顏料本身而異。
  • 感知互補:在 CIELAB 等感知色彩空間中選擇的視覺對比色,常用於無障礙設計與品牌對比。

互補色尋找工具的範圍限定在第一種定義,且頁面上已直接標明。這個範圍正是為什麼即使輸入完全相同,一個十六進位值與其數位反相所產生的結果,會在視覺上看起來與其他應用程式產生的「互補色」不同。

如何在 iPhone 上尋找互補色

iPhone 上的操作流程很短,因為此工具設計為在行動瀏覽器中以單一頁面執行。下列步驟假設你已經從設計檔案、螢幕截圖或品牌指南取得了一個六位數十六進位值。如果你需要先從螢幕上讀取值,請使用 Safari 的截圖編輯器與內建選色器,然後再回到此步驟。

  1. 在 iPhone 上開啟 Safari 或 Chrome,並前往互補色尋找工具頁面。該頁面以自成一體的文件載入,不會顯示任何安裝提示。
  2. 將六位數十六進位顏色輸入到輸入欄位中,無論是否加上開頭的 # 皆可。該頁面僅接受剛好六個十六進位數字,並將輸出標準化為小寫,因此 #A1B2C3 與 a1b2c3 會產生相同的結果。
  3. 如果你還沒有十六進位值,請點擊頁面上的選色器以視覺方式選擇顏色;該欄位會自動填入對應的六位數代碼。
  4. 點擊「尋找 RGB 互補」動作。該頁面會將每個通道讀取為 0 到 255 之間的整數,並以 255 減去該值來計算反相結果。
  5. 直接在頁面上讀取來源色塊、反相色塊、標準化的小寫十六進位值,以及十進位的紅、綠、藍通道值。在此步驟中,沒有任何資料會被傳送到伺服器。
  6. 使用 iOS 分享選單或欄位的複製動作,將反相後的十六進位值帶到「備忘錄」、「郵件」或你的設計應用程式中。請將儲存的值與原始值配對,以便記住反相執行的方向。

一個常見的後續做法是將該頁面儲存到主畫面,讓它的行為像一個輕量級的應用程式。在 Safari 中,點擊分享圖示、選擇「加入主畫面」,然後確認。其結果是一個一鍵啟動器,可直接開啟此工具,在現代 iPhone 上能夠隱藏 URL 列,並讓工作流程在頁面載入後保持離線可用。若需要對此工作流程背後的數學進行更深入的說明,隨附指南 如何從十六進位代碼尋找互補色 會逐步說明同一個反相過程。

解讀輸出:十六進位、RGB 與兩個色塊

此工具同時呈現四個產出物,讓你無需離開頁面即可對結果進行健全性檢查。

  • 來源色塊:顯示輸入或選取顏色的方塊。如果看起來有誤,表示輸入有誤,反相結果也會以同樣的方式出錯。
  • 反相色塊:顯示位元層級數位反相結果的方塊。請以視覺方式比較兩者,確認結果符合預期。
  • 小寫十六進位:以小寫 #rrggbb 格式表示的反相結果。CSS 接受兩種大小寫,但小寫能讓記錄檔與 diff 工具保持一致。
  • 十進位 RGB:以三個 0 到 255 之間的整數表示的反相結果。在將數值餵入 JavaScript、設計應用程式或任何偏好使用通道數字而非十六進位字串的系統時,相當實用。

以下用一個完整的範例說明整個流程。以 #3a7f12 作為來源。紅色通道為 0x3a,十進位即 58;綠色通道為 0x7f,十進位即 127;藍色通道為 0x12,十進位即 18。套用公式 255 減去每個通道:

  • 紅色:255 − 58 = 197,即 0xc5
  • 綠色:255 − 127 = 128,即 0x80
  • 藍色:255 − 18 = 237,即 0xed

將三個新的位元組串接起來即得到 #c580ed。這個字串正是該頁面對輸入 #3a7f12 所顯示的結果。如果人工計算與頁面不符,差異出在算術上,而非工具本身。

參考配對:邊界、原色與中點

一些基準案例說明了此公式在立方體的角落、加法原色,以及無色軸上的行為。下表顯示其標準行為,讓任何已知的顏色無需輸入即可與此工具進行驗證。

來源十六進位來源顏色反相十六進位反相顏色為何重要
#000000黑色#ffffff白色端點交換:兩個無色的極端位置互換。
#ffffff白色#000000黑色相同的規則,反向應用。
#ff0000紅色#00ffff青色原色交換:達到最大值的通道歸零,其他通道則達到滿值。
#00ff00綠色#ff00ff洋紅綠色適用相同的規則。
#0000ff藍色#ffff00黃色藍色適用相同的規則。
#808080中灰色#7f7f7f接近中灰色中點不對稱:128 與 127 分別位於真正的 127.5 兩側。

其中一行說明了一項在 iPhone 與桌機上都值得了解的不對稱性。真正的數學中點為 127.5,但整數通道會四捨五入為 127(0x7f)或 128(0x80)。反相一個剛低於中點的值會產生一個剛高於中點的結果,因此立方體中點的反相並非剛好是其本身;它會偏移一步。這是 8 位元顏色的特性,而非此工具的錯誤。

此結果無法告訴你的事

輸出是一個確定性的字串,但仍有許多決定留給你。請將此結果視為一個起點,而非一個完成的調色盤。

  • 可讀性:反相配對並不自動代表清楚易讀。兩個在位元組立方體上數學上相反的顏色,如果兩者皆為深色或兩者皆為淺色,仍可能無法通過對比檢查。
  • 協調性:反相並不自動代表協調。數位反相並不追求平衡、溫度或視覺權重;它在每個通道上產生最大的數學距離。
  • 品牌契合度:反相並不自動符合品牌。在品牌調色盤內工作時,請將反相視為一個候選,並與現有系統進行比較,而非作為替代品。
  • 色域:此結果完全位於傳統 sRGB 範圍內。對於寬色域或色彩管理的素材,在目標空間中,sRGB 中的反相可能並非感知上的相反色。

對於印刷、CMYK 或寬色域的工作,數位反相並非正確的互補色。請使用範圍限定於該色彩模型的工具,而非將位元層級的結果視為通用答案。

在發布配對之前檢查無障礙性

如果反相結果將作為前景與背景配對出現——無論是在 CSS 橫幅、狀態指示器或任何面向使用者的介面上——請將其通過專門的對比檢查工具。此工具背後的公式不對亮度比作出任何保證;它僅保證這兩個顏色在每個通道上位元組立方體所允許的最大距離。

對於該後續步驟,顏色對比檢查工具 會根據 WCAG AA 與 AAA 門檻評估此配對,以便在情境中判斷反相結果。隨附指南 互補色尋找工具與無障礙對比 逐步說明反相在實務中傾向於失敗之處,以及在發布前應注意的事項。

MDN 上關於 CSS rgb() 的參考資料,以及 W3C 的 CSS Color 4 sRGB 規範,都是有用的背景閗讀材料,可用於確認「iOS 上的 sRGB 位元組」實際上的意義,以及為何此工具將範圍限定於該模型,而非感知型或印刷型的定義。