在「互補色查找工具」所使用的嚴格 8 位元 sRGB 意義中，互補色是指將紅、綠、藍三個通道各自從 255 中減去後所得到的顏色。公式很簡單：對於像 #3a7b2c 這樣的十六進位顏色，你計算 255 減去 0x3a、255 減去 0x7b，以及 255 減去 0x2c，分別等於 197、132 和 211，再將這三個數字重新編碼為新的十六進位 #c584d3。這個工具會針對任何六位數十六進位輸入執行完全相同的計算，將原始色樣與反向色樣並排顯示，並印出十進位的 RGB 通道值，讓你可以逐一驗證每個位元組。由於運算是確定性的，兩位使用相同起始顏色的設計師必定會得出相同的互補色，並且在任何瀏覽器中都能重現相同結果。這就是在處理舊式 8 位元螢幕色彩時，「互補」的精確含義，也是將該數值應用於 Adobe Illustrator 色彩工具中的基礎。
8 位元 RGB 中「互補色」的意義
當設計師說「互補」時，他們往往指的是不同的概念。互補色查找工具採用最狹隘且最易於重現的定義：sRGB 顏色的逐位元組精確反向。運算方式為 255 減去每個通道，套用於六位數十六進位顏色的紅、綠、藍三個分量。以輸入 #3a7b2c 為例，計算過程為 255 減去 58（紅）、255 減去 123（綠），以及 255 減去 44（藍），分別等於 197、132 和 211。重新編碼為十六進位後，互補色為 #c584d3，此結果在執行相同演算法的每個瀏覽器中都保持一致。
由於計算是逐通道進行的，在邊界輸入上的行為是可預測的。純紅 #ff0000 反向為青色 #00ffff；純綠反向為洋紅 #ff00ff；純藍反向為黃色 #ffff00。黑色 #000000 與白色 #ffffff 會互換位置。這些基準點讓你在信任工具對任意顏色的輸出之前，可以先驗證工具是否運作正確。
對於偏綠的十六進位 #3a7b2c，詳細計算過程如下：
- 紅色：0x3a 等於 58，所以 255 減去 58 等於 197，寫為 0xc5。
- 綠色：0x7b 等於 123，所以 255 減去 123 等於 132，寫為 0x84。
- 藍色：0x2c 等於 44，所以 255 減去 44 等於 211，寫為 0xd3。
結果：#c584d3。反向後的顏色呈現為柔和的薰衣草紫，且沒有殘留的綠色通道，因為每個綠色位元組都被完全減去。這種可預測、通道明確的結果，正是該方法在以相同十六進位語言溝通的設計工具中如此實用的原因。
如何逐步找出 RGB 互補色
互補色查找工具中的工作流程刻意設計得很短，每一步都錨定在確定性的運算上，而非啟發式規則：
- 將六位數十六進位顏色輸入輸入欄位，可包含或省略開頭的 #。工具將 #3a7b2c 和 3a7b2c 視為相同的輸入，並將兩者統一規範為小寫。
- 若尚未決定十六進位值，可使用頁面上的色彩選擇器挑選顏色。選擇器會將相同的六位數字串送入演算法。
- 選擇「Find RGB complement」（找出 RGB 互補色）。頁面會將十六進位解析為三個整數通道，分別從 255 中減去，並將結果序列化回小寫的十六進位字串。
- 閱讀原始色樣與反向色樣並排的結果，這樣在複製之前可以視覺化地進行比較。
- 複製顯示的十六進位或十進位 RGB 通道。規範化後的小寫十六進位才是要貼到其他工具中的內容。
輸出面板刻意同時列印兩種表示形式：十六進位字串與紅/綠/藍三色數值組。重複的顯示讓螢幕閱讀器與下游工具能解析單一數值，同時讓人類能驗證逐位元組的反向運算。如果結果不符合「255 減去原始值」，則表示輸入並非乾淨的六位數十六進位，而工具在任何運算執行前就已拒絕像 #abc 這類簡寫或具名顏色。
將互補色帶入 Adobe Illustrator
在 Illustrator 外部計算互補色，目的是為了能將其帶回軟體中。一旦從互補色查找工具取得反向的十六進位數值，該數值即可直接套用於 Adobe Illustrator 的標準色彩輸入，無需轉換。Illustrator 工作階段中一個可靠的操作順序如下：
- 開啟 Illustrator 文件並選取要重新設定樣式的 artwork。鎖定的圖層、隱藏的群組以及非向量資產會靜默地忽略填色變更。
- 開啟「Color Panel」（視窗 > 色彩），或是在工具列中雙擊填色色樣以開啟「Color Picker」（色彩選擇器）。
- 若尚未處於該模式，請將色彩選擇器切換至「RGB Color」。右下方出現的十六進位欄位，是貼上從瀏覽器複製的數值最簡便的位置。
- 貼上反向的十六進位字串並按下 Enter 鍵。Illustrator 會根據該數值建立新的填色或描邊顏色，並將原始透明度保留在 100 percent。
- 將產生的配對儲存為「Swatches」面板中的具名色樣，可從「Fill」控制項拖曳至面板中。將其中一個命名為「Base」、另一個命名為「RGB Complement」，可讓關係在日後易於回顧。
- 若 artwork 使用 Spot Colors、Pantones，或文件色彩模式為 CMYK，請在貼上之前先決定螢幕互補色是否要作為印刷色的替代。將 sRGB 數值貼入 CMYK 文件在技術上是可行的，但未經校色；若是印刷用途，應將該數值改由支援色彩管理的 CMYK 轉換流程處理。
另一個相關的捷徑是對以互補色建立的色樣使用 Illustrator 的「Save Color to ASE」匯出功能，再將該 ASE 匯入其他 Adobe 應用程式。十六進位字串本身即可在 Illustrator、Photoshop 與 InDesign 之間攜帶，因為每個現代的 Adobe 色彩選擇器都接受相同的六位數格式。如需 Illustrator 內建「Recolor Artwork」互補功能的平行操作說明，Illustrator 快速互補指南更詳細地介紹了內建的方法。
為何數位反向與 Illustrator 內建的互補色可能不同
Illustrator 提供不只一種互補的概念，當你比較結果時，這其中的差異很重要。「Recolor Artwork」對話框內建了數種色彩和諧規則，其中包括一項「Complementary」規則，它會在 HSL 中將色相旋轉 180 度，同時保持彩度與亮度不變。對於許多輸入而言，這會產生與逐位元組反向不同的顏色。以 #3a7b2c 為例，HSL 色相旋轉會落在洋紅色範圍，而非 #c584d3 的薰衣草紫，因為來源顏色並非處於 50 percent 亮度。
第二個差異來自 Illustrator 處理色彩模型的方式。「Color Picker」會顯示 RGB、CMYK、HSB 與 Lab 等欄位，而十六進位欄位僅在作用中的模式為 RGB 時才會填入值。顯示的數值會四捨五入至最接近的可表示 sRGB 位元組，這可能在任何通道中引入一步的偏移。第三個差異在於具名顏色的存在：Illustrator 可將色樣儲存為「Complement of Base」，但該標籤屬於專案慣例，而非計算屬性，因此當基礎色樣變更時，它並不會自動更新。
| 方法 | 其定義「互補」的方式 | 典型用途 | 重現十六進位時的注意事項 |
|---|---|---|---|
| 8 位元 RGB 反向（本工具） | 255 減去每個 sRGB 通道 | 螢幕色票、CSS 實驗、圖示 | 逐位元組精確且具確定性 |
| HSL 色相旋轉 180° | 色相偏移，S 與 L 保持不變 | 繪畫式色票、Recolor Artwork | 結果會隨來源亮度而變化 |
| CMYK 對比色 | 印刷色邏輯、油墨限制 | 印刷生產 | 需要色彩管理設定檔 |
| 感知色彩空間（Lab、OKLCH） | 人類視覺下的視覺對比 | 無障礙色票、品牌設計 | 需要將色域對應回 sRGB |
Illustrator 中確定性 RGB 互補色的常見使用情境
有幾種反覆出現的情境，會讓在 Illustrator 中工作的設計師傾向採用精確的位元組反向，而非和諧規則：
- 儀表板、資訊圖表與儀器面板中以向量繪製的狀態色彩：主要狀態顏色的反向可產生高對比的「關閉」或「中性」狀態，且無需中間的調色盤設計步驟。
- 圖示配對：當圖示使用品牌色，而你需要一個配對的字符以形成對比時，逐位元組的反向可確保該字符與品牌填色之間呈現最大的逐通道距離。
- 在 Illustrator 中原生繪製的圖表與示意圖之資料視覺化：反向是「負空間」或「背景」填色的快速且可辯護的選擇，因為它是由數學定義，而非美學考量。
- 線框稿與原型設計中的高對比佔位階段：將填色替換為反向可確認哪些形狀已被填色、哪些尚未填色，再於交付前還原為真實的調色盤數值。
這些用途共享一個特性：「互補」的價值在於其確定性的反向，而非感知上的關聯。一旦專案需要符合品牌、無障礙或印刷安全的色彩，設計師就應該退一步改用和諧規則或具色彩管理的工作流程。
Practical Limits and When RGB Inversion Is the Wrong Tool
The byte-wise complement is fast, reproducible, and free, but it is not a universal "right" complement. Three limits are worth naming explicitly:
- Contrast is not guaranteed. An inverse pair can produce text and background combinations that fail WCAG contrast at AA and AAA. Test the actual pair with a contrast tool before treating it as a UI pairing.
- Print behavior is uncalibrated. The inverse of an sRGB color has no defined CMYK meaning. For Illustrator documents set to CMYK Document Color Mode or any print workflow, use a color-managed conversion rather than pasting the hex as a process color.
- Perceptual harmonies differ. Many brand and accessibility palettes are designed in perceptual spaces (Lab, OKLCH) where "complement" means visual opposition, not byte inversion. Treating the digital inverse as the brand complement is a category error.
A useful guardrail is to ask, before pasting the inverse, whether the project will be measured in pixels, in ink, or in perceived difference. Pixels and CSS are the territory where byte-wise inversion is exactly right; ink and perception are not. The tool states its RGB definition on the page so every result is reproducible, and the MDN reference on the CSS rgb() syntax documents the underlying 8-bit channel model used for the calculation.
The tool's input rules are strict, and following them prevents silent errors:
| Input form | Accepted? | Why |
|---|---|---|
| #3a7b2c | Yes | Six digits with optional leading hash |
| 3a7b2c | Yes | Six digits, normalized to lowercase |
| #abc | No | Three-digit shorthand is rejected |
| red | No | CSS named colors are not parsed |
| #3a7b | No | Truncated value, not six digits |
Once the value is accepted, every downstream step in Illustrator — Color Panel, Color Picker, ASE export, Swatch Library — uses the same six-digit lowercase string.
Putting It Together
The shortest path from a hex value in Illustrator to a documented complement is: open the Complementary Color Finder, paste or pick the hex, click "Find RGB complement," read the inverse swatch, copy the lowercase hex, and paste it back into Illustrator's Color Panel or Color Picker. The whole loop is deterministic, browser-side, and free of hidden color-model assumptions, which is precisely why it pairs well with Illustrator's exact hex inputs. For screen work, the result is the byte-wise inverse; for print or perceptual palettes, take the inverse as a starting point, not a final answer.
If you're weighing options, Find Complementary Colors in InDesign From a Hex Code covers this in detail.