數位互補色是六位數十六進位色碼的精確 8 位元 RGB 反值，計算方式是從 255 減去每個色頻值：新紅色 = 255 − R，新綠色 = 255 − G，新藍色 = 255 − B。所得結果位於 RGB 色立方體的相對兩側，是螢幕設計、CSS 和大多數影像編輯軟體用於高對比強調色的標準配對。若要找出任何十六進位色碼的互補色，而不想手動計算，請使用 互補色尋找工具：貼上十六進位色碼，按一下反轉動作，然後複製相符的色票及其精確色頻值。
設計師和開發人員會基於許多原因選用互補色配對。這兩種顏色在螢幕上具有最大對比，因此自然會將視線吸引到使用第二種顏色的元素。這使得互補色成為行動呼籲按鈕、錯誤狀態、焦點環、徽章，以及需要從大面積背景中脫穎而出的任何小型強調色之熱門選擇。由於兩者之間的關係是確定性的，相同輸入一律會傳回相同配對，讓品牌強調色能在網站或產品中保持一致。
互補色尋找工具的功能
互補色尋找工具是圍繞單一操作所打造的單一用途瀏覽器工具：8 位元 RGB 反轉。輸入六位數十六進位色碼後，它會傳回反轉後的十六進位色碼，以及兩種顏色相符的紅、綠、藍色頻值。結果會並排顯示為兩個色票，讓您在複製任何內容前先視覺化預覽配對效果。
此工具刻意不混用色彩模型。它不進行 HSL 旋轉、RYB 色輪對應，也不進行暖色／冷色調整。如果您曾困惑為何某個工具會傳回柔和的天藍色互補色，而另一個工具則傳回鮮明的橙色，答案通常在於前者使用數位 RGB 反轉，後者則使用油漆色輪互補色。互補色尋找工具採用數位反轉，因為當 CSS、JavaScript、Photoshop 和大多數設計軟體提到「互補色」時，它們實際指的就是這種方式。
尋找十六進位色碼的互補色
- 在瀏覽器中開啟 互補色尋找工具。
- 在十六進位色碼欄位中輸入或貼上六位數十六進位色碼，例如 2A6F97，或按一下色票開啟選取器，以視覺化方式選擇顏色。
- 按一下尋找 RGB 互補色動作。工具會從 255 減去每個色頻，並在原始顏色旁顯示反轉後的顏色。
- 查看結果面板。您會看到以十六進位色碼、RGB 三元組和色票呈現的互補色，並與輸入顏色並排顯示。
- 複製所需的十六進位色碼或 RGB 值。CSS 使用十六進位色碼，JavaScript 或 canvas 程式碼使用 RGB 三元組，而色票則可作為視覺參考。
如果您只有 RGB 值而沒有十六進位色碼，RGB 轉 HEX轉換器可以先產生十六進位色碼，再將其輸入互補色尋找工具。反之，如果您需要在反轉後讀取結果的色頻值，HEX 轉 RGB轉換器會將任何六位數色碼拆分為紅、綠、藍色元件。
RGB 互補色的計算方式
每個六位數十六進位色碼都代表三個以兩字元配對封裝的 8 位元色頻。第一組是紅色，第二組是綠色，第三組是藍色。每一組都是介於 00 到 FF 的十六進位數，等同於十進位的 0 到 255。數位互補色只是將每個色頻翻轉至該 0 到 255 色階的相反值，這正是使用 255 − 色頻作為公式的原因。
以十六進位色碼 2A6F97 為單一計算範例。將各配對轉換為十進位後，紅色 = 42，綠色 = 111，藍色 = 151。從 255 分別減去各值，以取得互補色的色頻：新紅色 = 255 − 42 = 213，新綠色 = 255 − 111 = 144，新藍色 = 255 − 151 = 104。將 213、144 和 104 轉回十六進位時，先將每個值除以 16 取得高位半位元，再取餘數作為低位半位元。十進位 213 是 D5，十進位 144 是 90，十進位 104 是 68，因此互補色的十六進位色碼是 D59068。這就是完整的計算過程，也是您每次按一下反轉時工具所執行的運算。
RGB 互補色與油漆色輪互補色的差異
如果您是在美術課的傳統色輪中學習互補色，記得的規則就是「選擇色輪正對面的顏色」。這種模型很適合顏料混合，因為減色混合的運作方式與光線不同。在螢幕上，光線採用加色混合，而在 8 位元 RGB 工作流程中，與指定顏色最強烈相反的顏色是逐色頻反值，而不是色輪上的某個位置。
| 面向 | 數位 RGB 互補色 | 傳統色輪互補色 |
|---|---|---|
| 定義 | 以 255 減去來源顏色的每個色頻 | 色輪正對面的色相 |
| 色彩模型 | 加色 (RGB) | 減色 (顏料或 RYB) |
| 使用於 | CSS、Photoshop、數位影像 | 繪畫、室內設計、印刷指南 |
| 對灰色的影響 | 中性灰色維持中性 | 色輪互補色可能改變色相 |
| 輸出 | 依十六進位色碼確定 | 取決於使用的色輪 |
實際結論很簡單。如果您在螢幕、CSS、數位相片或使用 RGB 的軟體中作業，請採用數位反轉。互補色尋找工具使用此定義，因此其輸出會與您在 Photoshop 中選擇影像、調整、反轉時看到的顏色相符，也會與您在 Illustrator 中選擇編輯顏色、反轉顏色時看到的顏色相符。
互補色配對的常見用途
取得互補色後，下一個決定就是如何使用它。實際設計工作中經常會出現幾種模式，而每種模式都運用了兩種顏色之間的高對比關係。
- 彩色背景上的強調文字。當按鈕、徽章和小標籤的文字顏色是背景的互補色時，閱讀最為清晰。發布前，請將最終配對交由 色彩對比檢查工具確認其符合 WCAG 規定。
- 焦點和懸停狀態。表單欄位和互動元素常會在取得焦點時切換為互補色，讓使用者獲得清晰的視覺提示，而不會變更版面配置。
- 插圖和圖示。只使用兩種顏色的平面插圖，在這兩種顏色互為互補色時會維持醒目且易於閱讀。
- 漸層端點。兩種互補色之間的線性漸層可形成充滿活力的轉場，您可以使用 色彩漸層產生器預覽效果。
- 快速探索調色盤。取得互補色後，您可以要求 調色盤產生器將這組顏色延伸成完整的相鄰色、三角色和分裂互補色調色盤。
對比是一把雙面刃。兩種色相距離最大的顏色在等量使用時，也會產生最強烈的顫動感，可能讓大面積區域顯得疲勞。大多數設計師會將互補色保留給主色基底上的小型強調元素，而不是讓版面配置在兩種顏色間平均分配。
取得可靠結果的訣竅
此工具很直覺，但養成幾個習慣能避免將結果帶入專案時遇到意外狀況。
- 一律使用相同的十六進位字串再次確認。十六進位色碼不區分大小寫，卻很容易輸入錯誤。字串 2A6F97 和字串 2a6f97 描述相同顏色，但只要少一個數字，就會完全破壞計算。
- 留意簡寫形式。CSS 接受像 #2A6 這樣的三位數十六進位色碼，其會展開為 #22AA66。執行工具前，請先將簡寫轉換成六位數形式，以維持可預測的結果。
- 包含開頭字元。部分工具接受不含 # 的十六進位色碼，其他工具則要求包含 #。如果欄位不接受某個值，請確認是否需要 #。
- 將結果與對比檢查搭配使用。互補色配對具有很高的色相對比，但控制文字可讀性的是亮度對比。將互補色套用至內文前，請一律使用檢查工具檢查最終配對。
- 保留來源十六進位色碼的記錄。設計演變時，您可能需要根據原始色碼重新計算互補色，而不是再次反轉互補色。反轉兩次會回到來源顏色，因此請從起點向前計算。
如果您在取得配對後想探索同一色系的變化，隨機色彩產生器可讓您快速取樣鄰近色相，並測試略微偏移的強調色是否比嚴格的互補色更容易閱讀。
將互補色帶入您的專案
取得互補色的十六進位色碼後，可直接將其放入 CSS 的自訂屬性、設計權杖 JSON 檔案，或您所選編輯器的色彩選取器中。這些值可互換使用，因此互補色尋找工具產生的十六進位色碼，在 Figma、Illustrator 和瀏覽器預覽中都會呈現相同效果。
對於印刷工作，請記住 RGB 互補色是螢幕顏色，送往印刷廠前需要另外轉換為 CMYK。RGB 轉 CMYK 轉換器可在瀏覽器中處理此步驟，但印刷後的互補色幾乎肯定會與螢幕上的互補色不同，因為這兩種色彩模型描述顏色的方式根本不同。最安全的做法，是將在螢幕上看起來合適的互補色與印刷預覽搭配檢視。
關於互補色查詢的常見問題
人們常會詢問，為何兩個工具會對相同顏色提供不同答案、為何灰色輸入會傳回灰色輸出，以及互補色是否在每台裝置上都相同。簡短回答是：數位 RGB 互補色是固定的數學運算，因此不會因裝置或螢幕而改變。真正會改變的是每個顯示器呈現最終十六進位色碼的方式，因為顯示器校準、面板技術和色彩設定檔都會稍微改變可見顏色。請將工具輸出視為精確的起點；如果特定螢幕對某個色頻的呈現比預期強烈，則應以肉眼進行調整。
如果輸入是完全中性的灰色，例如 808080，其互補色也會是 808080，因為 255 − 128 = 127 在每個色頻中都會四捨五入為 128。純黑會反轉為純白，而純白會反轉為純黑。這些邊界案例可快速驗證公式是否產生預期結果。
深入了解此主題：線上將 RGB 轉換為 HEX：免費即時色彩工具。
如果您正在比較選項，快速在 Illustrator 中尋找互補色會詳細說明此主題。
如果您正在比較選項，快速在 Photoshop 中尋找互補色會詳細說明此主題。
<