正確混合兩個十六進位顏色，意味著要對紅色、綠色和藍色三個通道分別使用加權平均進行獨立混合——具體來說就是 result = round(A × (1 − ratio) + B × ratio)——這樣在 50% 比例時，你會剛好落在兩個通道的中點，而在 0% 或 100% 時則會還原為純粹的來源顏色。這種逐通道的做法稱為 sRGB 線性插值，它與 CSS 漸層、設計標記和大多數 UI 色彩系統所使用的數學完全相同，這就是為什麼它能為任何數位專案產生可預期、可直接複製貼上的結果。Color Mixer 即時套用此公式：你輸入兩個十六進位值（或 rgb() 字串，或視覺色票選擇），拖曳比例滑桿以選擇混合比重，然後即可讀取混合結果的小寫六位數十六進位值與 rgb() 字串，並透過一個即時的 11 階漸層顯示兩個輸入之間的每一個過渡。由於每個通道都會四捨五入為介於 0 到 255 之間的整數，且比例會被限制在 [0, 1] 的範圍內，因此輸出的永遠都是一個可以直接放入樣式表、Figma 檔案或任何需要標準六位數色的設計工具中的有效十六進位值。
「正確」這個詞至關重要，因為有多種方式可以組合兩個顏色值，而它們彼此並不一致。顏料採減法混色（真實油漆、墨水或染料在紙上的表現方式），其物理原理與螢幕光線的加法混色截然不同，基於錯誤模型所打造的工具，所產生的結果相較於你在設計中實際看到的色，會顯得混濁或令人意外。要正確地為數位工作進行十六進位混色，必須使用你的螢幕、覽器和 CSS 都在使用的相同模型——也就是 sRGB 線性插值。
定義正確的十六進位顏色混合
對數位色彩工作而言，「正確」代表你所產生的混合十六進位值，在任何遵循 sRGB 標準的瀏覽器、作業系統或設計應用程式中渲染時，都會呈現完全相同的結果——而這基本上涵蓋了所有平台。其定義相當明確：對三個通道（紅、綠、藍）中的每一個，使用所選比例計算兩個來源值的加權平均，四捨五入到最接近的整數，並限制在 0–255 的範圍內。完整的公式為 result = round(A × (1 − ratio) + B × ratio)，分別套用於 R、G 和 B。當比例為 0.5 時，每個通道都會變成兩個來源的精確中點，而產生的十六進位值就是兩者之間毫不含糊的「一半」顏色。
這點之所以重要，是因為一些快速的心算捷徑會給出錯誤的答案。將兩個十六進位值當作數字取平均（將 #ff0000 視為 16711680）並不會產生有效的顏色中點。轉換為 HSL 後分別平均色相、飽和度和亮度，會產生與 CSS 漸層渲染結果不一致的感知上不同的結果。逐通道的 sRGB 方法才能與 linear-gradient()、影像處理程式庫和大多數色彩選擇器的輸出相符，因此採用它能讓你手動混合的值與設計系統的其他部分保持一致。
工具能可靠解析的輸入格式
確保你的混合結果正確，最簡單的方法之一就是從一開始就給工具有效的輸入。Color Mixer 接受三種書面格式外加一個視覺選擇器，並能容忍各種格式上的小瑕疵，因此你不必費心清理複製貼上的值。
| 格式 | 範例 | 備註 |
|---|---|---|
| 簡寫十六進位 | #f00 | 三位數簡寫會展開為 #ff0000 |
| 完整十六進位 | #3b82f6 | 標準六位數十六進位 |
| rgb() 字串 | rgb(59, 130, 246) | CSS 函式表示法 |
| 視覺選擇 | 點擊色票 | 開啟原生色彩選擇器 |
輸入不區分大小寫，多餘的空格會被忽略，前置井字號為選填。這代表 F00、f00、FF0000 和 rgb(255, 0, 0) 都會被解析為同一個來源顏色，因此你可以從任何工具貼上值——Figma 的檢查面板、CSS 檔案、Slack 訊息、設計標記匯出——都不必先重新調整格式。
用 5 個步驟正確混合兩個十六進位顏色
- 輸入顏色 A。在 Color A 欄位中輸入第一個十六進位值（例如 #ff0000）或 rgb() 字串，或點擊其色票以開啟視覺選擇器。
- 輸入顏色 B。在 Color B 欄位中以同樣方式加入第二個來源——簡寫十六進位、完整十六進位、rgb() 或色票選擇。兩個欄位接受相同的格式，因此你不必讓它們的風格互相對應。
- 設定比例。將滑桿從 0%（純顏色 A）拖曳到 100%（純顏色 B）。標籤會在你拖曳時更新——例如「70% A / 30% B」——讓你隨時知道目前的混合比重，之後也能重現。
- 讀取結果。查看結果面板中同時顯示的小寫六位數十六進位值與 rgb() 字串。兩者都會在每次滑桿移動時即時更新，因此顯示的值永遠是符合當前比例的值。
- 複製並使用。點擊複製按鈕將結果十六進位值放入剪貼簿，然後直接貼到你的 CSS、設計檔案或標記匯出中。結果下方的漸層條提供兩個來源顏色之間等距的十一個預覽步驟，包含兩端點，讓你能在複製前掃描是否還有更賞心悅目的中間值。
以這種方式使用 Color Mixer，能確保你剪貼簿中的值來自與瀏覽器渲染漸層時相同的數學，因此你在工具中看到的色，就是你在頁面上會看到的顏色。
驗證混合後的十六進位結果
即使有可靠的工具，仍然值得在一個簡單的例子上親手驗算一次數學，這樣你才能在面對更複雜的情況時信任結果。將顏色 A 設為純紅色 #ff0000（R=255, G=0, B=0），顏色 B 設為純藍色 #0000ff（R=0, G=0, B=255），並將比例設為 0.5。
- R = round(255 × (1 − 0.5) + 0 × 0.5) = round(255 × 0.5) = round(127.5) = 128
- G = round(0 × 0.5 + 0 × 0.5) = round(0) = 0
- B = round(0 × 0.5 + 255 × 0.5) = round(255 × 0.5) = round(127.5) = 128
混合後的結果為 rgb(128, 0, 128)，也就是六位數十六進位值 #800080——一個乾淨的洋紅色。在 50% 比例下將相同的輸入代入 Color Mixer，你會看到完全相同的值，這證實了工具實際上運行的正是這個公式。從此你可以信任你所設定的任何其他比例：25% A / 75% B 會產生 rgb(64, 0, 191)，而 75% A / 25% B 會產生 rgb(191, 0, 64)，兩者都是你可以貼到任何地方的合法六位數十六進位值。
第二個快速的健全性檢查：在滑桿的極端位置，結果必須等於來源。拖曳到 0%，面板應顯示恰好是顏色 A 的十六進位值；拖曳到 100%，則應顯示恰好是顏色 B 的十六進位值。如果其中一個端點出現偏差，代表所套用的並非文件中記載的公式，此時你也不該信任其中間值。
讓十六進位混合結果看起來不對的陷阱
大多數「看起來不對」的十六進位混合，都源自少數反覆出現的錯誤。注意避開這些錯誤，能讓你的混合保持在正軌上。
混淆螢幕光線與顏料。這個工具以加法方式混合 sRGB 值，就像螢幕組合發射光線一樣。這代表 #ff0000 加上 #0000ff 在 50% 比例下會產生洋紅色 #800080，而不是你在調色盤上拌紅色和藍色壓克力顏料時所得到的那種混濁的暗紫色。減法顏料混色遵循完全不同的物理原理——CMYK 轉換或 RYB 近似——任何基於螢幕的混合都無法準確模擬它。如果你的目標是數位輸出（網頁、應用程式、圖表、圖示、簡報），sRGB 插值就是正確的模型；如果你要預測真實墨水在紙上的列印效果，則應改用支援 CMYK 的工作流程。
假設 50% 滑桿代表「平均顏色」。在 50% 時，結果是每個通道的中點，也就是數學上的平均值，但這並不一定看起來是感知上的中點。介於兩個鮮互補色之間的小範圍低飽和度灰色，會比預期看起來更黯淡，因為眼睛對飽和度的感知是非線性的。對 UI 工作來說，一個感知上令人愉悅的中間值，往往落在滑桿上偏離中心的位置，而 11 階漸層條就是最快找到它的方法。
四捨五入方向的意外。通道會四捨五入到最接近的整數，而 127.5 的標準四捨五入會得到 128（你在上面的範例中已經看到了）。這代表相鄰的比例有時會產生相同的通道值，在漸層中形成微小的「平坦」區段，此時移動滑桿並不會改變十六進位值。這是正確的行為，而不是錯誤——它正是將連續數學轉換為離散 8 位元色彩空間時所必然產生的捨入下限。
只信任單一格式。如果你貼上一個值後結果看起來不對，切換輸入格式是個快速的檢查方式。同一個顏色寫成 #f00、#ff0000 和 rgb(255, 0, 0) 應該產生相同的混合結果；如果結果不同，代表其中一個輸入是打錯了，而不是格式有誤。這個工具能解析全部三種格式，因此最快的除錯方式就是用不同格式重新寫一次輸入，觀察輸出是否會改變。
如果在排除以上四個陷阱後，你的混合結果看起來仍然不對，問題通常出在數學運算的上游——來源顏色錯誤、複製貼上的失誤，或與周圍設計之間的感知不匹配——這時可以快速瀏覽一下 如何修正看起來不對的十六進位顏色混合結果，它能幫助你清究竟是其中哪一個原因。
上述所有運算都在你的瀏覽器本地執行。沒有任何十六進位值、rgb() 字串、滑桿位置或複製的結果會被傳送到伺服器，無需註冊，也沒有使用次數上限，因此你可以反覆嘗試，直到混合結果完全符合需求。
想深入了解，請參正確使用字型配對產生器：從輸入到程式碼。