一個遵循數位 RGB 反轉的互補色尋找工具，會套用「255 減去每個 8 位元 sRGB 通道」的公式來產生精確的位元層級互補色，因此紅色 #ff0000 會變成青色 #00ffff，綠色 #00ff00 會變成洋紅色 #ff00ff。這個反轉只是一個確定性的運算——沒有色相旋轉、沒有色彩描述檔轉換、沒有感知映射——這使得當你想要一個可重現的搭配色來搭配你在 CSS 中已有的任何十六進位代碼時，它非常理想。互補色就是輸入色在 0–255 尺度上的嚴格數值相反數，並標準化為小寫六位數十六進位。它速度快、易於理解，而且對任何顏色的運作方式都相同，包括純黑 #000000 和純白 #ffffff 這類邊界值，它們只是直接交換。設計師經常將數位反轉與色調、色階和中性色搭配，以建立配色構想，因為數學會給出一個精確的錨定色彩，而配色的其餘部分則取決於你選擇圍繞它的顏色。了解這個公式是本指南中每個配色構想的基礎。
在數位 RGB 世界中「互補」的意義
「互補」一詞根據你所使用的色彩模型，有幾種合理的含義，而數位 RGB 反轉是其中最狹隘、最字面的意義。在位元層級的詮釋中，0–255 範圍內的每個通道 r、g、b 都會被替換為 255 − r、255 − g、255 − b。這是該工具執行的唯一運算，也是它產生的唯一答案。對於任何輸入，結果都是可重現的，因為它沒有四捨五入步驟、沒有描述檔選擇，也沒有感知加權。
HSL 互補色會將色相旋轉 180 度，同時保持原有的明度和飽和度。對於純紅色 #ff0000 來說，這兩種定義恰好一致——HSL 色相旋轉會落在青色，位元層級反轉也是如此。對於中間範圍的顏色，它們就會分歧：像 #7a8060 這種去飽和的橄欖色，在兩種定義下會產生不同的答案，因為 HSL 固定了飽和度和明度，而 RGB 反轉則同時移動三個通道。傳統顏料使用減法混色，其中的互補反映的是顏料的行為而非光線的行為。印刷製作會疊加青色、洋紅、黃色和黑色油墨，因此 CMYK 互補色是根據油墨覆蓋曲線得出的。CIELAB 或 Oklch 等感知色彩空間則尋找在人眼看起來最相反的顏色，通常會更積極地加權明度。每種定義都以不同的語言回答同一個詞。
互補色尋找工具明確將自身範圍限定在數位 RGB 定義，並在頁面上說明這個範圍，因此每個答案都是可重現的。如果你需要 HSL、顏料、CMYK 或感知互補的行為，請使用相應的模型——而不是位元層級反轉。W3C CSS Color 4 規範以及MDN rgb() 參考文件說明了 sRGB 通道如何以 0 到 255 的整數進行編碼，這與該工具使用的範圍相同。
如何使用互補色尋找工具產生配色構想
- 在瀏覽器中開啟互補色尋找工具。該工具完全在用戶端執行，因此不會上傳或儲存任何資料。
- 在欄位中輸入六位數十六進位顏色，可以有或沒有前導的 #。輸入時數字大小寫不敏感，輸出時標準化為小寫。不接受像 #f00 這樣的簡寫以及像「tomato」這樣的 CSS 命名顏色。
- 如果你手邊沒有十六進位代碼，可以從原生色彩選擇器中挑選顏色。選擇器仍會將六位數十六進位代碼送入演算法。
- 點擊尋找 RGB 互補色。每個 8 位元通道都會被替換為 255 減去其原始值，結果會以色塊和標準化後的十六進位代碼呈現。
- 讀取來源色和反轉色的十進位 RGB 通道，以便你可以將數值貼到 CSS 變數、設計 token 或程式碼編輯器中。
- 複製顯示的十六進位或 RGB 結果。在你的配色構想中將其作為錨定色彩使用，並圍繞它建立色調、色階和強調角色。
- 在將結果提升到設計系統之前，請確認它是你預期的結果。該工具執行一個特定的運算——位元層級反轉——而「互補」的其他定義可能會產生不同的顏色。
圍繞 RGB 反轉建立的配色構想模式
反轉色是單一顏色，但配色構想通常需要兩到六種顏色。一旦你有了確定性的互補色，就可以將其與色調、色階和中性色以可重複的模式結合。下面的模式描述的是如何在版面配置中賦予該錨定色一個角色，而不是單獨構成一個完整的配色。它們是適應你內容和品牌的起點，而非固定的配方。
| 模式 | 建構方式 | 典型用途 |
|---|---|---|
| 雙色反轉配對 | 來源色 + 255 − 來源色 | 醒目提示、徽章、對比測試、連結樣式 |
| 反轉色加上中性色 | 來源色 + 255 − 來源色 + #ffffff + #1a1a1a | 儀表板、內容版面、文件網站 |
| 反轉色作為強調色 | 中性主色 + 反轉色作為小面積強調色 | 行銷頁面、Callout 區塊、首頁按鈕 |
| 反轉色色調階梯 | 來源色 → #ffffff 色調 + 255 − 來源色 → #ffffff 色調 | 資料視覺化、圖表、狀態顏色 |
| 反轉色加上明度階梯 | 來源色 → #000000 明度 + 255 − 來源色 → #000000 明度 | 深色模式配對、深度與層級 |
將此表格用作從意圖到建構方式的對照表。選擇一種模式，然後在發布前將每對文字與背景組合透過顏色對比檢查工具進行檢測。當你想要更柔和、符合品牌調性的外觀時，先將反轉色向中性色混合；位元層級互補色是錨點，而非最終顏色。
實作範例：從一個十六進位代碼建立紅與青的配色
為了讓數學過程一目了然，讓我們逐步完成從十六進位到通道再到反轉色的完整運算。從來源色 #ff0000 開始。
將每對十六進位解析為 0 到 255 的十進位通道：
- 紅色 = 0xff = 255
- 綠色 = 0x00 = 0
- 藍色 = 0x00 = 0
對每個通道套用 255 減去原值：
- 255 − 255 = 0
- 255 − 0 = 255
- 255 − 0 = 255
結果通道為紅色 = 0、綠色 = 255、藍色 = 255。序列化為小寫六位數十六進位，即變成 #00ffff，也就是青色。#ff0000 的位元層級反轉就是 #00ffff，且該運算每次執行都會重現完全相同的答案。
建立在此錨定色之上的簡單配色構想可以是：
- 主色：#ff0000
- 互補色：#00ffff
- 主色的色調：#ff8080
- 互補色的色調：#80ffff
- 中性背景：#fafafa
- 中性文字：#1a1a1a
將每組文字與背景組合透過對比檢查工具進行檢測。數學為你提供錨定色彩；可讀性的決定權在你。
當數位互補配色構想不適用時
位元層級反轉並不保證協調性、可存取性或品牌適配性。以下限制是規範的一部分，而非需要除錯的邊緣情況。
純黑 #000000 會反轉為純白 #ffffff。這在數學上是正確的，但作為實用配色卻很少有用，因為結果對比度過高，往往會主導整個版面。中灰色的輸入會反轉為其他中灰色：#7f7f7f 的反轉色是 #808080，視覺上幾乎相同。經過手動微調以朝向目標色相的品牌色，往往會產生看起來混濁或失準的數位互補色，這正是品牌色已針對人類感知而非位元組運算進行調整的跡象。
該結果也不是感知互補色。受過 RYB 色彩理論訓練的設計師可能會預期得到 HSL 色相 180 度的結果，並發現位元層級反轉令人不適。對於較深的品牌色，反轉色往往顯得蒼白；對於較淺的品牌色，反轉色則往往顯得陰暗。當你需要更柔和的配色時，請將數位反轉色向中性色或原色混合，而不是直接使用原始的位元組運算結果。
可存取性、印刷製作和色彩管理工作流程應使用各自的工具。位元層級反轉本身並不會產生可讀的文字與背景配對——在發布前，請使用互補色與可存取性對比工作流程來測試每一種組合。印刷、寬色域和受控顯示器的工作應使用 CMYK、CIELAB 或 Oklch 等命名色彩空間以及測量設備，而非將數位反轉視為通用的互補色。互補色尋找工具誠實地標明這個範圍，並在頁面上顯示其定義，因此你可以重現每個答案，並決定哪種色彩模型真正適合你的專案。
超越反轉：建立真正的配色構想
配色構想不僅僅是兩種顏色。一旦你有了反轉色，就需要決定每種顏色扮演什麼角色。一種常見的方法是將原色視為主導色調、反轉色作為醒目提示或行動呼籲、主色色調作為背景、主色明度作為文字，以及接近中性的顏色作為分隔線。這種五角色結構能讓反轉色保持可見，而不會壓過版面的其餘部分。
另一種方法是交換角色：以反轉色作為主導背景、原色作為醒目提示，並以去飽和的中性色作為文字。當反轉色足夠淺以承載內文時，這種方法效果最佳，而這種情況在深色品牌色中很少見。對於圖表工作，請將反轉色作為中性灰階上的資料系列強調色，讓對比承擔比較的作用，而非依賴色相。
如果你需要快速視覺檢查，可以將兩個十六進位值貼到隨機顏色產生器工作流程中，以查看它們與鄰近色調並排的樣子，或使用HEX 轉 RGB工具來檢視每個值，然後再做決定。反轉色背後的數學在不同工具間保持不變；改變的是你如何圍繞它安排顏色。
如需更深入的探討，請參閱HTML 顏色代碼：148 個 CSS 命名顏色的查詢表。