數位互補色是一個六位數十六進位代碼的精確 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 轉十六進位 轉換器可以先產生十六進位代碼，然後您再將其輸入到互補色尋找工具中。相反地，如果您需要在反相後讀取結果的通道值，十六進位轉 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 轉換為十六進位：免費即時顏色工具。
如果您正在權衡選項，快速在 Illustrator 中尋找互補色 對此有詳細介紹。
如果您正在權衡選項，快速在 Photoshop 中尋找互補色 對此有詳細介紹。