混合兩個 HEX 顏色的核心，在於將紅、綠、藍三個通道各自取平均值——對每個通道你計算 round(A × (1 − ratio) + B × ratio)，而這個加權平均就是所有螢幕式做法的共同基礎。比較各種混合兩個 HEX 顏色的做法，大多是在比較那段數學放在哪裡、它如何處理非數值輸入，以及它是否能適應單純中點以外的情境。有些方法把 50/50 混合寫死；有些則提供一個滑桿來調整比例。有些接受多餘空格、缺少井號，以及 rgb() 字串；有些則只接受乾淨的六位數 hex。至於有些方法，像是實體的色卡，則與螢幕完全對不上。了解這些差異，能讓你選對工具來完成工作，並避免在漸層、懸停狀態或圖表調色盤中出現混濁或偏離品牌色的結果。一旦理解每種方法如何處理同一組輸入，這些差異就很容易內化，而本指南接下來會逐一說明三種涵蓋大多數實際設計與開發工作的做法。
混合兩個 HEX 顏色的主要做法
當人們需要組合兩個 HEX 值時，最常出現三種做法。
手動通道運算 是第一種。你把每個 HEX 拆成紅、綠、藍三個整數，分別計算每個通道的加權平均值，將結果限制在 0–255 範圍內，再轉回六位數 hex。設計師過去會在紙上或試算表上做這件事；現在通常發生在一段小腳本或 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)。當 ratio 為 0 時得到純 A；為 1 時得到純 B；為 0.5 時則得到兩個通道值的精確中點，通道值會限制在 0–255 並進行四捨五入。這是 8 位元 sRGB 值的直接加權平均——屬於加法式的螢幕光混合，而非伽馬校正的光混合，也非減法式的顏料混合。
這個區別很重要，因為在這裡把純紅 (#ff0000) 與純藍 (#0000ff) 混合會得到乾淨的洋紅 (#800080)，而在調色盤上實體混合紅色與藍色顏料則會得到混濁的深紫或棕色。如果你要為任何螢幕上的成品對齊數位色彩，sRGB 線性內插就是你要的；如果你要預測壓克力顏料或印刷油墨在紙上的表現，則沒有任何螢幕式混合能準確模擬。
如何使用 Color Mixer 混合兩個 HEX 顏色
當你想要在任何比例下得到精確、可重現的混合，又不想自己動手做通道運算時，使用 Color Mixer。
- 把你的第一個顏色輸入到 Color A 欄位。不論是簡寫 hex 如 #f00、完整 hex 如 #3b82f6，或是 rgb() 字串如 rgb(59, 130, 246) 都可以；解析器能容忍多餘的空格、缺少的井號，以及大小寫字母。你也可以點擊欄位旁的色塊，以視覺方式挑選顏色。
- 用同樣的方式把第二個顏色輸入到 Color B 欄位。
- 拖曳比例滑桿，設定每個顏色在混合中的佔比。零 percent 是純 A，一百 percent 是純 B，五十 percent 則是兩個通道值的精確中點。
- 在結果面板中讀取混合後的 hex（小寫六位數）以及對應的 rgb() 字串。結果上方的漸層條會顯示兩個顏色之間十一個等距的混合步驟，讓你目測出令人滿意的中間色落在哪裡。
- 點擊 Copy 把結果 hex 複製到剪貼簿，再貼到 CSS、設計檔或圖表調色盤中。
由於滑桿會即時更新結果，你可以在一個動作內從 0% 掃到 100%，即時觀察漸層的變化。比例標籤會永遠顯示目前的拆分——例如 70% A / 30% B——因此之後可以重現同一個結果。
三種做法並排比較
下表把三種做法對齊到通常決定該選哪一個的幾個維度上。
| 維度 | 手動通道運算 | 靜態 50/50 工具 | 比例驅動混色器 |
|---|---|---|---|
| 輸出比例 | 你計算的任何比例 | 固定為 50/50 | 透過滑桿設定任何比例 |
| 接受的輸入格式 | 你的腳本能解析的任何東西 | 通常只接受完整 hex | 簡寫 hex、完整 hex、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，一種帶灰的紫色。把這三個通道值用同樣的輸入與 40% 的滑桿設定丟進 Color Mixer，結果面板應該會相符。如果相符，你就得到一個可以直接貼進 CSS 檔的可重現答案，而漸層條也會免費告訴你 30% 與 50% 色標長什麼樣。
會影響結果的事項
兩個在設計師眼中看起來相同的輸入，依工具處理方式不同，仍可能產生略為不同的混合結果。值得留意：
- 簡寫 hex 對完整 hex——兩者應該會解析成相同的三個通道。如果某個工具把 #f00 與 #ff0000 視為不同的輸入，換個工具吧。
- 大寫對小寫——RGB 不分大小寫，但有些 hex 解析器拒絕小寫以外的任何形式。一個好的工具應該兩者皆收。
- rgb() 中的空格——rgb(59,130,246) 與 rgb(59, 130, 246) 是相同的值；寬容的解析器會把它們視為相同。
- 缺少井號——ff0000 仍應解析為紅色。任何拒絕它的做法都是毫無道理地嚴格。
Color Mixer 容忍以上所有情況，讓你可以照來源給你的任何格式直接貼上。一切都在你的瀏覽器本地執行，所以沒有任何東西被上傳，也沒有註冊或使用次數上限——當你在設計還在變動時反覆嘗試數十個混合候選，這點特別好用。
想深入了解，請參考 互補色尋找器範例：常見的 Hex 配色。