若要混合兩個 HEX 顏色，請將各個數值輸入 Color A 與 Color B 欄位，拖曳比例滑桿以選擇每個顏色在混合中佔多少比重，並在結果面板中讀取產生的 hex 與 RGB。Color Mixer 所使用的精確公式為各通道的 sRGB 線性內插：對於紅、綠、藍各通道，結果等於四捨五入後的加權平均值，result = round(A × (1 − ratio) + B × ratio)，其中 ratio 來自滑桿，且會被限制在 [0, 1] 的範圍內。當 ratio 為 0.5 時，你會得到兩個顏色通道值的精確中點；當 ratio 為 0 時，結果為純 Color A，當 ratio 為 1 時，結果為純 Color B。每當你變更輸入或移動滑桿時，結果會立即更新，下方的漸層條則會顯示兩個端點之間十一個等距的混合階段。一旦找到你喜歡的混合，結果面板會提供小寫的六位數 hex 以及 rgb() 字串，並可透過一鍵複製按鈕將 hex 放入剪貼簿。整個流程只需幾秒鐘，且完全在你的瀏覽器中執行，因此你的顏色資料不會離開你的電腦。
Color Mixer 的功能
Color Mixer 是一款免費的瀏覽器工具，能接收任意兩個顏色，並依你選擇的比例產生單一的混合結果，再以 hex 與 RGB 兩種形式顯示，讓你可直接套用於 CSS、設計檔案或程式碼中。它使用與 CSS 漸層、影像編輯器以及大多數 UI 設計系統相同的數學方式：對 8 位元 sRGB 數值進行各通道加權平均。由於其運算僅針對每個顏色通道進行單純的算術處理，每次混合都是可重現的，而且滑桿上的比例標籤會明確告訴你產生目前結果的精確分配比例，例如 70% A / 30% B。此工具適用於挑選兩個品牌色之間的中間色、為漸層挑選停駐點、建立圖表調色盤，或單純探索兩個顏色在中點相遇時的樣貌。
工具可辨識的輸入格式
Color A 與 Color B 欄位皆接受相同的三種輸入格式，且可自由混搭：在一個欄位輸入簡寫 hex，並在另一個欄位輸入 rgb() 字串，工具的運作方式不會改變。解析器的設計相當寬容——多餘的空格會被忽略，開頭的 # 為選填，且英文字母大小寫皆可，不會影響結果。你也可以點擊任一欄位旁的原生色塊來開啟視覺選色器，方便用眼睛選色而非手動輸入。
| 格式 | 範例 | 說明 |
|---|---|---|
| 簡寫 hex | #f00 | 三位數簡寫，內部會展開為六位數 |
| 完整 hex | #3b82f6 | 六位數標準 CSS hex |
| rgb() 字串 | rgb(59, 130, 246) | 使用 0–255 整數通道的函式表示法 |
| 視覺選色器 | 點擊色塊 | 開啟瀏覽器內建選色器 |
若需在開始前轉換格式，HEX to RGB Converter 與 RGB to HEX 工具可單一步驟完成雙向轉換。
如何使用 Color Mixer 混合兩個 HEX 顏色
- 開啟 Color Mixer，將第一個顏色以 hex 值（#f00 或 #3b82f6）或 rgb() 字串輸入 Color A 欄位，或點擊色塊以視覺方式選色。
- 以同樣方式將第二個顏色輸入 Color B 欄位，可任意組合簡寫 hex、完整 hex 或 rgb() 格式。
- 拖曳比例滑桿以設定每個顏色在混合中的占比——0% 為純 Color A，100% 為純 Color B，50% 則為兩個顏色通道值的精確中點。
- 在結果面板中讀取混合顏色的 hex 與 RGB 值，並使用漸層條預覽兩個端點之間的每個階段。
- 點擊「複製」將產生的 hex 放入剪貼簿，再貼到你的樣式表、設計檔案或任何需要的地方。
當你移動滑桿時，結果會持續更新，因此你可以來回拖曳以在情境中比較中間顏色。目前的比例會始終顯示在滑桿旁，方便日後重新輸入相同比例以重現特定的混合效果。
解讀漸層條與結果面板
滑桿下方的結果面板會以兩種格式提供混合顏色：小寫六位數 hex（例如 #ac4668）與 rgb() 字串（例如 rgb(172, 70, 104)）。兩者描述的是同一個顏色，因此你可依專案需求選擇貼上。面板上方的漸層條會將你輸入的兩個顏色之間的過渡預覽為十一個等距色塊（包含兩端點），讓你一眼就能看出所有中間色階的完整進展，並目測出令人愉悅的中間色位置。若想在事後驗證混合結果，混合兩個 HEX 顏色後檢查結果 一文會逐步說明如何確認工具所產生的結果。
sRGB 混合適用與不適用的情境
對幾乎所有螢幕上的任務來說，sRGB 線性內插是正確的模型：網站、行動應用程式、圖示、圖表、簡報，以及任何將在螢幕上顯示的數位藝術作品。它與 CSS 漸層底層使用的數學一致，因此工具中 50% 的混合將與樣式表中 50% 的漸層停駐點完全相同。它也是透過在不同位置取樣相同比例來建構色彩色階，或將一個品牌色微幅推向另一個顏色而不失系列感時，一種快速且可預測的方式。
這個數學模型並非物理顏料的模型。sRGB 內插是以加法方式混合螢幕光線，因此將純紅 (#ff0000) 與純藍 (#0000ff) 混合會得到純淨的洋紅 (#800080)——即兩個通道值的精確中點。而在畫家調色盤上混合真實的紅與藍顏料，則會因為減法混合而產生陰暗混濁的顏色，這是任何誠實的螢幕工具都無法預測的。若你是為螢幕設計，這個工具正是你所需；若你嘗試預測壓克力、油畫顏料或印刷油墨在紙上的混色效果，則需要不同的、針對顏料的模型。
驗算數學：逐步範例
若想確認 Color Mixer 的結果與頁面上的公式一致，可手動演練一個範例。以 Color A 為 #ff0000（純紅，通道值 255, 0, 0）、Color B 為 #0000ff（純藍，通道值 0, 0, 255），比例滑桿設為 0.5。對於紅色分量：round(255 × (1 − 0.5) + 0 × 0.5) = round(127.5) = 128。對於綠色：round(0 × 0.5 + 0 × 0.5) = 0。對於藍色：round(0 × 0.5 + 255 × 0.5) = round(127.5) = 128。結果為 rgb(128, 0, 128)，即 hex #800080——洋紅色。將 #ff0000 與 #0000ff 輸入 Color Mixer，比例設為 50%，你就會在結果面板中看到完全相同的 hex。同樣的算術方法可應用於任意比例下的任何混合，這也正是此工具在實際設計工作中值得信賴的原因。