將兩種 HEX 顏色混合，核心在於對它們的紅、綠、藍通道進行平均——對每個通道計算 round(A × (1 − ratio) + B × ratio)，這個加權平均值是所有螢幕式方法的共同基礎。比較混合兩種 HEX 顏色的方法，主要就是在比較這段數學運算放在哪裡、如何處理非數值輸入，以及是否能適應純中點以外的任何情境。有些方法硬寫成 50/50 混合；有些則提供一個滑桿讓你調整比例。有些能處理多餘空格、缺少井字號以及 rgb() 字串；有些則只接受乾淨的六位數十六進制。還有些方法，例如實體顏料色卡，根本無法與螢幕上的結果對得起來。了解這些差異，能幫助你選對工具，避免在漸層、懸停狀態或圖表色盤中出現混濁或偏離品牌調性的結果。一旦看見每種方法如何處理同一組輸入，這些差異就很容易內化，本指南接下來會逐步介紹能涵蓋大多數設計與開發實務的三種方法。
混合兩種 HEX 顏色的主要方法
當人們需要組合兩個 HEX 值時，最常出現的方法有三種。
手動通道運算是第一種。你將每個 HEX 拆解為紅、綠、藍三個整數，對每個通道計算加權平均值，將結果限制在 0–255，再轉回六位數十六進制。設計師過去會在紙上或試算表上做這件事；如今通常在一小段腳本或 Figma 外掛中完成。它透明且可重現，但對非開發者來說速度較慢，而且每個漸層停色點都要重新推導時容易出錯。
靜態中點工具是第二種。許多線上的「HEX 混色」頁面永遠只給你兩色的精確 50/50 平均值。這能涵蓋一小部分實際使用情境——例如找出兩個品牌色的中間色調——但忽略了更常見的長尾需求：你想要 30% 的一種顏色混入 70% 的另一種顏色，來銜接色盤或柔化懸停狀態。
比例驅動的混色器是第三種，也是最靈活的。你輸入或挑選兩種顏色，拉動一個 0% 到 100% 的滑桿，就能即時讀到混合後的 HEX 與 rgb() 字串。一個好的工具還會渲染一條漸層預覽條，讓你一次預覽每一步的結果。Color Mixer 就是圍繞這個理念打造的，本指南接下來的步驟示範也會以它為基礎。
為什麼 sRGB 線性內插是預設選擇
螢幕式工具並非全部使用相同的數學。有些在線性光下混合，有些在經過伽馬校正的光學空間中混合，有些則在 HSL 或 LCH 中混合。對大多數螢幕上的工作——網站、應用程式、圖示、儀表板、簡報——sRGB 線性內插是安全的預設，因為它和 CSS 漸層、設計工具的選色器，以及絕大多數 UI 框架所使用的數學完全相同。
公式就是開頭引用的那一個：對紅、綠、藍每個通道，result = round(A × (1 − ratio) + B × ratio)。比例為 0 時得到純 A；為 1 時得到純 B；為 0.5 時得到兩個通道值的精確中點，通道值限制在 0–255 並四捨五入。這是 8 位元 sRGB 值的直接加權平均——屬於加法式的螢幕光混色，而非經伽馬校正的光混合，也非減法式的顏料混合。
這個區別很重要，因為在這裡把純紅 (#ff0000) 與純藍 (#0000ff) 混合會得到乾淨的洋紅 (#800080)，而在實體調色盤上把紅色與藍色顏料混合則會得到混濁的暗紫色或棕色。如果你要為任何螢幕上的成品對齊數位顏色，sRGB 線性內插就是你要的方法。如果你要預測壓克力顏料或印刷油墨在紙上的表現，沒有任何螢幕式混合能準確模擬。
如何使用 Color Mixer 混合兩種 HEX 顏色
當你想要在不做通道運算的情況下，得到任何比例的精確、可重現的混合結果時，就使用 Color Mixer。
- 將第一個顏色輸入到 Color A 欄位。簡寫十六進制如 #f00、完整十六進制如 #3b82f6，或 rgb() 字串如 rgb(59, 130, 246) 都可以使用；解析器能容許多餘空格、缺少井字號，以及大寫或小寫字母。你也可以點選欄位旁的色塊來視覺挑選顏色。
- 以同樣的方式在 Color B 欄位輸入第二個顏色。
- 拖動比例滑桿來設定兩種顏色各佔多少。零百分比是純 A，100 百分比是純 B，50 百分比是兩個通道值的精確中點。
- 從結果面板讀取混合後的 HEX（小寫六位數）以及對應的 rgb() 字串。結果上方的漸層條會顯示兩色之間十一個等距的混合步驟，方便你目測討喜的中間色在哪裡。
- 點擊 Copy 將結果 HEX 複製到剪貼簿，再貼到 CSS、設計檔案或圖表色盤中。
因為滑桿會即時更新結果，你可以一個動作從 0% 滑到 100%，即時觀察漸層變化。比例標籤永遠會顯示目前的分配——例如 70% A / 30% B——因此之後可以重現相同的結果。
並排比較各種方法
下表從通常決定你該選哪個方法的幾個面向，來對齊比較這三種方法。
| 面向 | 手動通道運算 | 靜態 50/50 工具 | 比例驅動混色器 |
|---|---|---|---|
| 輸出比例 | 你計算出的任何比例 | 固定為 50/50 | 透過滑桿設定任何比例 |
| 接受的輸入格式 | 你的腳本能解析的任何格式 | 通常僅接受完整十六進制 | 簡寫十六進制、完整十六進制、rgb() |
| 漸層預覽 | 手動 | 無 | 內建漸層條 |
| 可重現性 | 若保留公式則很高 | 永遠是相同結果 | 滑桿位置鎖定結果 |
| 最適用於 | 程式化混合、批次腳本 | 快速中點檢查 | 設計師即時挑選停色點 |
| 伺服器需求 | 任何可執行程式碼的地方皆可 | 依工具而異 | 在瀏覽器中執行，無需上傳 |
有幾格值得特別說明。「靜態 50/50 工具」在這張表看起來偏弱，但當你只想要兩種特定顏色的幾何中點、且別無其他需求時，它確實是正確的選擇。「手動通道運算」在靈活度上看起來最強，但一旦你需要視覺而非數值地反覆調整時，它就會輸給比例驅動的混色器。這三行都沒有處理顏料混合；那是另一個問題，這幾種方法都不宣稱能解決。
何時該選擇哪種方法
當混合是更大流程的一部分時，手動運算仍是首選——例如為圖表產生五十個漸層停色點、從兩個端點產生色彩刻度，或在跨版本建置中以決定性的方式重現同一個混合結果。任何活在程式碼裡的工作都屬於這一類。
當問題本質上只是二元時，靜態中點工具就夠了：這兩種顏色的中間長什麼樣？設計師為品牌煥新挑選單一銜接色，或開發者驗證兩個 CSS 變數是否如預期落點，都不需要滑桿。
只要你需要在定稿前比較不同比例下的混合效果，比例驅動的混色器就是正確的選擇。打造一個往次要品牌色偏移 20% 的懸停狀態、在色盤中找一個中間色調、取樣圖表步階——這些都是滑桿能解決的問題。特別是 Color Mixer 還提供一條十一格等距的漸層條，讓目測挑色的速度比在計算機上輸入比例還快。
一條簡單的經驗法則：如果你已經知道想要的比例，就用程式碼或 50/50 工具；如果還在選比例，就用滑桿。
實際範例：60/40 品牌銜接色
假設品牌色是 #2563eb（一種深藍），你想要一個略偏暖色的搭檔色 #ef4444（一種純紅），按 60/40 偏向藍色來混合。使用公式 result = round(A × (1 − ratio) + B × ratio)，其中 ratio = 0.4：
紅色通道： round(0x25 × 0.6 + 0xef × 0.4) = round(37 × 0.6 + 239 × 0.4) = round(22.2 + 95.6) = round(117.8) = 118 = 0x76
綠色通道： round(0x63 × 0.6 + 0x44 × 0.4) = round(99 × 0.6 + 68 × 0.4) = round(59.4 + 27.2) = round(86.6) = 87 = 0x57
藍色通道： round(0xeb × 0.6 + 0x44 × 0.4) = round(235 × 0.6 + 68 × 0.4) = round(141 + 27.2) = round(168.2) = 168 = 0xa8
得到的結果是 #7657a8，一種帶灰的紫色。把這三個通道值帶入 Color Mixer，使用相同的輸入並將滑桿設在 40%——結果面板應該會一致。如果吻合，你就得到一個可直接貼進 CSS 檔案的可重現答案，漸層條還會順便告訴你 30% 與 50% 停色點長什麼樣。
會影響結果的因素
對設計師而言看起來相同的兩個輸入，依工具處理方式不同，仍可能產生略有差異的混合結果。值得留意：
- 簡寫十六進制與完整十六進制——兩者應解析為相同的通道值。如果某個工具把 #f00 與 #ff0000 視為不同輸入，就換工具。
- 大寫與小寫——RGB 沒有大小寫之分，但有些十六進制解析器只接受小寫。一個好的工具兩者都接受。
- rgb() 內的空格——rgb(59,130,246) 與 rgb(59, 130, 246) 是相同的值；寬容的解析器會這樣看待它們。
- 缺少井字號——ff0000 仍應被解析為紅色。任何拒絕它的工具都是在無謂地挑剔。
Color Mixer 容忍以上所有情況，所以你可以直接貼上原始資料給的任何形式。一切都在你的瀏覽器本地執行，不會上傳任何東西，也不需要註冊或使用上限——當設計還在變動、你要反覆嘗試數十個混合候選時，這點特別好用。
想深入了解，請參閱 互補色尋找器範例：常見十六進制配對。
想深入了解，請參閱 比較使用字型配對產生器的方法。